From bd42d8973c66edcdb1bd9f6a34de9e92445c49c6 Mon Sep 17 00:00:00 2001
From: Alexander Bell <mail@alexbell.de>
Date: Fri, 14 Sep 2018 17:27:06 +0200
Subject: [PATCH] password manager frontend setup

---
 src/pages/passwordManager/PasswordManager.js | 52 +++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/pages/passwordManager/PasswordManager.js b/src/pages/passwordManager/PasswordManager.js
index ccdf1f8..a8f2f60 100644
--- a/src/pages/passwordManager/PasswordManager.js
+++ b/src/pages/passwordManager/PasswordManager.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import jss from 'jss';
 import preset from 'jss-preset-default';
+import { Menu, Segment, Dropdown, Table, Button, Icon } from 'semantic-ui-react';
 
 /*
 * Functions import
@@ -54,7 +55,56 @@ class PasswordManager extends Component {
   render() {
     return(
       <div>
-        PasswordManager
+        <Menu attached='top'>
+          <Dropdown item icon='wrench' simple>
+            <Dropdown.Menu>
+              <Dropdown.Item>
+                New
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+
+          <Menu.Menu position='right'>
+            <div className='ui right aligned category search item'>
+              <div className='ui transparent icon input'>
+                <input className='prompt' type='text' placeholder='Search...' />
+                <i className='search link icon' />
+              </div>
+            </div>
+          </Menu.Menu>
+        </Menu>
+
+        <Segment attached='bottom'>
+          <Table celled striped>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell width={4}>Application / URL</Table.HeaderCell>
+                <Table.HeaderCell width={5}>Username / Email adress</Table.HeaderCell>
+                <Table.HeaderCell width={1}>Copy</Table.HeaderCell>
+                <Table.HeaderCell width={5}>Password</Table.HeaderCell>
+                <Table.HeaderCell width={1}>Copy</Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
+
+            <Table.Body>
+              <Table.Row>
+                <Table.Cell>cell</Table.Cell>
+                <Table.Cell>cell</Table.Cell>
+                <Table.Cell>
+                  <Button icon>
+                    <Icon name='copy' />
+                  </Button>
+                </Table.Cell>
+                <Table.Cell>cell</Table.Cell>
+                <Table.Cell>
+                  <Button icon>
+                    <Icon name='copy' />
+                  </Button>
+                </Table.Cell>
+              </Table.Row>
+            </Table.Body>
+          </Table>
+        </Segment>
       </div>
     );
   }