- Edit src/App.js and save to reload.
-
+
+
);
}
diff --git a/client/web/src/App.module.css b/client/web/src/App.module.css
new file mode 100644
index 0000000..3834c88
--- /dev/null
+++ b/client/web/src/App.module.css
@@ -0,0 +1,4 @@
+.App {
+ margin: auto 15%;
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/client/web/src/App.test.js b/client/web/src/App.test.js
index 4db7ebc..2609fce 100644
--- a/client/web/src/App.test.js
+++ b/client/web/src/App.test.js
@@ -2,8 +2,8 @@ import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
-test('renders learn react link', () => {
+test('renders datums', () => {
const { getByText } = render({props.datum.url}
+{props.datum.username}
+{props.datum.desc}
+Ending with {props.datum.number.slice(props.datum.number.length - 4)}
+{props.datum.title}
+{props.datum.desc}
+{props.datum.type}
+ props.clicked(props.datum)}>
+
+
+ );
+}
+
+export default datum;
\ No newline at end of file
diff --git a/client/web/src/components/Datum/Datum.module.css b/client/web/src/components/Datum/Datum.module.css
new file mode 100644
index 0000000..57d4f26
--- /dev/null
+++ b/client/web/src/components/Datum/Datum.module.css
@@ -0,0 +1,17 @@
+.Datum {
+ background-color: white;
+ border-radius: 15px;
+ box-sizing: border-box;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+ display: inline-block;
+ overflow: hidden;
+}
+
+h4 {
+ margin: 0;
+}
+
+p {
+ margin: 0;
+ font-size: 1em;
+}
diff --git a/client/web/src/components/NavigationBar/NavigationBar.js b/client/web/src/components/NavigationBar/NavigationBar.js
new file mode 100644
index 0000000..3754667
--- /dev/null
+++ b/client/web/src/components/NavigationBar/NavigationBar.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Button from '../common/Button/Button';
+import NavigationItem from './NavigationItem/NavigationItem';
+
+import styles from './NavigationBar.module.css';
+
+const navigationBar = (props) => (
+
+ {datum}
+
+
+
+);
+
+export default navigationBar;
\ No newline at end of file
diff --git a/client/web/src/components/NavigationBar/NavigationBar.module.css b/client/web/src/components/NavigationBar/NavigationBar.module.css
new file mode 100644
index 0000000..896ac9d
--- /dev/null
+++ b/client/web/src/components/NavigationBar/NavigationBar.module.css
@@ -0,0 +1,15 @@
+.NavigationBar {
+ display: inline-flex;
+ flex-direction: column;
+ width: inherit;
+}
+
+.NavigationBar div {
+ display: inline-flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ padding: 20px;
+ border-radius: 15px;
+ box-sizing: border-box;
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+}
\ No newline at end of file
diff --git a/client/web/src/components/NavigationBar/NavigationItem/NavigationItem.js b/client/web/src/components/NavigationBar/NavigationItem/NavigationItem.js
new file mode 100644
index 0000000..5feb136
--- /dev/null
+++ b/client/web/src/components/NavigationBar/NavigationItem/NavigationItem.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import AllInclusiveIcon from '@material-ui/icons/AllInclusive';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import CreditCardIcon from '@material-ui/icons/CreditCard';
+import NoteIcon from '@material-ui/icons/Note';
+import FiberPinIcon from '@material-ui/icons/FiberPin';
+
+import styles from './NavigationItem.module.css';
+
+const navigationItem = (props) => {
+ let output = null;
+
+ switch (props.navType) {
+ case ('all'):
+ output =
+ props.itemClicked('')} active={props.filter === ''}/>
+ props.itemClicked('passwords')} active={props.filter === 'passwords'}/>
+ props.itemClicked('creditcards')} active={props.filter === 'creditcards'}/>
+ props.itemClicked('notes')} active={props.filter === 'notes'}/>
+ props.itemClicked('codes')} active={props.filter === 'codes'}/>
+
+
+
+
+ {this.props.children}
+
+ )
+}
+
+export default modal;
\ No newline at end of file
diff --git a/client/web/src/containers/Auth/Auth.js b/client/web/src/containers/Auth/Auth.js
new file mode 100644
index 0000000..e69de29
diff --git a/client/web/src/containers/Manager/Manager.js b/client/web/src/containers/Manager/Manager.js
new file mode 100644
index 0000000..409f632
--- /dev/null
+++ b/client/web/src/containers/Manager/Manager.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+
+import Aux from '../../hoc/Aux/Aux';
+import Datum from '../../components/Datum/Datum';
+import NavigationBar from '../../components/NavigationBar/NavigationBar';
+
+import styles from './Manager.module.css';
+
+class Manager extends Component {
+ state = {
+ info: {
+ passwords: [
+ { url: 'www.amazon.com', username: 'abc@gmail.com', password: 'password123' },
+ { url: 'www.fb.com', username: 'abc@gmail.com', password: 'password123' },
+ { url: 'www.gmail.com', username: 'abc@gmail.com', password: 'jaimeisfoxy' },
+ ],
+ creditcards: [
+ { number: '4111 1111 1111 1111', name: 'Andy B. Calvin', expMonth: '02', expYear: '21', cvv: '123', desc: 'Visa' },
+ { number: '4111 1111 1111 4444', name: 'Andy B. Calvin', expMonth: '04', expYear: '25', cvv: '123', desc: 'Mastercard' },
+ ],
+ codes: [
+ { code: '1234', type: 'Bank Account', desc: 'Bank Account' }
+ ],
+ notes: [],
+ },
+ filter: '',
+ selectedDatumId: null,
+ adding: false,
+ }
+
+ // is there a better way of handling this using React internal tools?
+ filterListHandler = (key) => {
+ this.setState({ filter: key });
+ }
+
+ showDataHandler = (datum) => {
+ console.log(datum);
+ this.setState({ selectedDatumId: datum });
+ }
+
+ addDataHandler = () => {
+ this.setState({ adding: true });
+ }
+
+ logOutHandler = () => {
+ alert('Logged out!');
+ }
+
+ render() {
+ let items = Object.keys(this.state.info).filter((pKey) => (this.state.filter === '' ? true : pKey === this.state.filter))
+ .map(pKey => {
+ return this.state.info[pKey].map((el, i) => {
+ return
+
+
+
+
+
+
+ Kript
+My Data
+ {items.length !== 0 ? +
+ {items}
+
:
+ Nothing to see here.
} +