Skip to content

Topic/web #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jkvaternik wants to merge 12 commits into
base: development
Choose a base branch
from
Open

Topic/web #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4f6324d
feat: Add Web Files
Oct 5, 2020
27f20f0
Feat: Kript homepage interface
Jan 13, 2021
8edbefe
Topic/web - Feat: Add Home html/css/js
Jan 26, 2021
cb39d5e
Fixing commit
Jan 27, 2021
f421804
Feat: Kript homepage interface
Jan 13, 2021
2d65676
Topic/web - Feat: Add Home html/css/js
Jan 26, 2021
8002200
Fix merge conflict
Jan 27, 2021
ed1d102
edit .gitignore for esLint file
Jan 27, 2021
413fbe3
fix App.test.js
Jan 27, 2021
8af2135
edit NPM test
Jan 27, 2021
83134c8
Delete .eslintcache
Jan 29, 2021
c02b594
fix: Increate cloudbuild timeout
liam923 Jan 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/web/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
.env.development.local
.env.test.local
.env.production.local
.eslintcache

npm-debug.log*
yarn-debug.log*
Expand Down
18,527 changes: 11,415 additions & 7,112 deletions client/web/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion client/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
"react-scripts": "4.0.1"
},
"scripts": {
"start": "react-scripts start",
Expand Down
2 changes: 1 addition & 1 deletion client/web/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Kript</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
38 changes: 0 additions & 38 deletions client/web/src/App.css
View file
Open in desktop

This file was deleted.

26 changes: 9 additions & 17 deletions client/web/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';

import styles from './App.module.css';

import Layout from './hoc/Layout/Layout';
import Manager from './containers/Manager/Manager';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className={styles.App}>
<Layout>
<Manager />
</Layout>
</div>
);
}
Expand Down
4 changes: 4 additions & 0 deletions client/web/src/App.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.App {
margin: auto 15%;
box-sizing: border-box;
}
6 changes: 3 additions & 3 deletions client/web/src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
const headElement = getByText(/My Data/i);
expect(headElement).toBeInTheDocument();
});
58 changes: 58 additions & 0 deletions client/web/src/components/Datum/Datum.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react';

import Aux from '../../hoc/Aux/Aux';

import styles from './Datum.module.css';

const datum = (props) => {
let datum = null;

switch (props.type) {
case ('passwords'):
datum = (
<Aux>
<h4>{props.datum.url}</h4>
<p>{props.datum.username}</p>
</Aux>
);
break;
case ('creditcards'):
datum = (
<Aux>
<h4>{props.datum.desc}</h4>
<p>Ending with {props.datum.number.slice(props.datum.number.length - 4)}</p>
</Aux>
);
break;
case ('notes'):
datum = (
<Aux>
<h4>{props.datum.title}</h4>
</Aux>
);
break;
case ('codes'):
datum = (
<Aux>
<h4>{props.datum.desc}</h4>
<p>{props.datum.type}</p>
</Aux>
);
break;
default:
datum = null;
break;
Comment on lines +11 to +44
Copy link
Owner

@liam923 liam923 Jan 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code ends up switching over the types of datums in a lot of places. Maybe an enum or some sort of inheritance would be better?

}

return (
// revise onClick method; should it be ID based or not?
<div className={styles.Datum} onClick={() => props.clicked(props.datum)}>
<div style={{ backgroundColor: 'beige', height: '100px', borderRadius: '15px 15px 0 0' }}></div>
<div style={{ padding: '20px' }}>
{datum}
</div>
</div>
);
}

export default datum;
17 changes: 17 additions & 0 deletions client/web/src/components/Datum/Datum.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
22 changes: 22 additions & 0 deletions client/web/src/components/NavigationBar/NavigationBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => (
<div className={styles.NavigationBar}>
<div>
<NavigationItem navType='all' clicked={() => props.itemClicked('')} active={props.filter === ''}/>
<NavigationItem navType='passwords' clicked={() => props.itemClicked('passwords')} active={props.filter === 'passwords'}/>
<NavigationItem navType='creditcards' clicked={() => props.itemClicked('creditcards')} active={props.filter === 'creditcards'}/>
<NavigationItem navType='notes' clicked={() => props.itemClicked('notes')} active={props.filter === 'notes'}/>
<NavigationItem navType='codes' clicked={() => props.itemClicked('codes')} active={props.filter === 'codes'}/>
</div>
<Button clicked={props.addDataClicked}>Add Data</Button>
<Button clicked={props.logOutClicked}>Log Out</Button>
</div>
);

export default navigationBar;
15 changes: 15 additions & 0 deletions client/web/src/components/NavigationBar/NavigationBar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
40 changes: 40 additions & 0 deletions client/web/src/components/NavigationBar/NavigationItem/NavigationItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = <span onClick={props.clicked} className={props.active ? styles.active : null}><AllInclusiveIcon className={styles.icon}/><span className={styles.NavText}>All</span></span>
break;
case ('passwords'):
output = <span onClick={props.clicked} className={props.active ? styles.active : null}><VpnKeyIcon className={styles.icon}/><span>Passwords</span></span>
break;
case ('creditcards'):
output = <span onClick={props.clicked} className={props.active ? styles.active : null}><CreditCardIcon className={styles.icon}/><span>Credit Cards</span></span>
break;
case ('notes'):
output = <span onClick={props.clicked} className={props.active ? styles.active : null}><NoteIcon className={styles.icon}/><span>Notes</span></span>
break;
case ('codes'):
output = <span onClick={props.clicked} className={props.active ? styles.active : null}><FiberPinIcon className={styles.icon}/><span>Codes</span></span>
break;
default:
output = null;
break;
}

return (
output
)
};

export default navigationItem;
20 changes: 20 additions & 0 deletions client/web/src/components/NavigationBar/NavigationItem/NavigationItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.icon {
position: relative;
top: 5px;
}
span > span {
margin-left: 10px;
}

span:hover {
text-decoration: none;
color: #537BFF;
cursor: pointer;
}

span:active,
span.active {
text-decoration: none;
color: #537BFF;
font-weight: bold;
}
13 changes: 13 additions & 0 deletions client/web/src/components/common/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';

import styles from './Button.module.css';

const button = (props) => (
<button
className={styles.Button}
onClick={props.clicked}>
{props.children}
</button>
);

export default button;
11 changes: 11 additions & 0 deletions client/web/src/components/common/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.Button {
background-color: #FF8E8E;
color: white;
border-radius: 15px;
border: none;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
font-weight: bold;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 16px;
}
11 changes: 11 additions & 0 deletions client/web/src/components/common/Modal/Modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

const modal = (props) => {
return (
<div>
{this.props.children}
</div>
)
}

export default modal;
Empty file added client/web/src/containers/Auth/Auth.js
View file
Open in desktop
Empty file.
Loading