Skip to content

Commit 3dab87c

Browse files
varunsingh87varunsingh87
committed
Implement routing, logout
* Implement logout component * Use react-router-dom to create navigation between login, register, dashboard, logout v1.0.0
1 parent a186231 commit 3dab87c

13 files changed

Lines changed: 321 additions & 109 deletions

File tree

‎package-lock.json‎

Lines changed: 97 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "borum-sphere",
3-
"version": "0.3.1",
3+
"version": "1.0.0",
44
"description": "The web app for Borum users to read, update, delete, and create their account and the Borum products that they're using",
55
"private": true,
66
"dependencies": {
@@ -9,6 +9,7 @@
99
"@testing-library/user-event": "^12.7.1",
1010
"react": "^17.0.1",
1111
"react-dom": "^17.0.1",
12+
"react-router-dom": "^5.2.0",
1213
"react-scripts": "4.0.1",
1314
"web-vitals": "^0.2.4"
1415
},

‎src/App.js‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
11
import Register from "./Register/register";
2-
import Layout from "./Layout/layout";
2+
import Login from "./Login/login";
3+
import Logout from "./Logout/logout";
34
import "./App.css";
5+
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
6+
import Dashboard from "./Dashboard/dashboard";
47

58
function App() {
6-
return (
7-
<Layout>
8-
<section className="App">
9-
<Register />
10-
</section>
11-
</Layout>
12-
);
9+
return (
10+
<Router>
11+
<Switch>
12+
<Route path="/signup">
13+
<Register />
14+
</Route>
15+
<Route path="/login">
16+
<Login />
17+
</Route>
18+
<Route path="/logout">
19+
<Logout />
20+
</Route>
21+
<Route path="/">
22+
<Dashboard />
23+
</Route>
24+
</Switch>
25+
</Router>
26+
);
1327
}
1428

1529
export default App;

‎src/Dashboard/dashboard.js‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,35 @@ import ChangePassword from "../ChangePassword/changePassword";
22
import FullName from "../InlineFormElements/FullName/fullName";
33
import Email from "../InlineFormElements/Email/email";
44
import dashboard from "./dashboard.module.css";
5+
import { Link, useHistory } from "react-router-dom";
6+
import Layout from "../Layout/layout";
57

68
export default function Dashboard() {
9+
const history = useHistory();
10+
11+
if (sessionStorage.getItem("apiKey") == null) {
12+
history.push("/login");
13+
}
14+
715
return (
8-
<article>
9-
<h1>Borum Sphere Dashboard</h1>
10-
<FullName />
11-
<Email />
12-
<ChangePassword />
13-
<button className={dashboard.signOut}>Sign out of all accounts</button>
14-
</article>
16+
<Layout>
17+
<article>
18+
<h1>Borum Sphere Dashboard</h1>
19+
<FullName />
20+
<Email />
21+
<ChangePassword />
22+
<div className={dashboard.linkButtons}>
23+
<button>
24+
<Link to="/logout">Log Out</Link>
25+
</button>
26+
<button>
27+
<Link to="/signup">Create new Borum Account</Link>
28+
</button>
29+
<button className={dashboard.signOut}>
30+
Sign out of all accounts
31+
</button>
32+
</div>
33+
</article>
34+
</Layout>
1535
);
1636
}

‎src/Dashboard/dashboard.module.css‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
.signOut {
2-
font-size: 2em;
3-
margin-bottom: 1em;
1+
.linkButtons {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
.linkButtons button {
47
background: white;
8+
font-size: 2em;
59
border: 1px solid blue;
10+
margin-bottom: 1em;
611
padding: 1em;
712
border-radius: 25px;
813
}
914

10-
.signOut:hover {
15+
.linkButtons button:hover {
16+
color: blue;
17+
}
18+
19+
.linkButtons .signOut:hover {
1120
color: red;
21+
background-color: white;
1222
cursor: pointer;
1323
border: 1px solid red;
1424
}

‎src/InlineFormElements/Email/email.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export default function Email(props) {
2222

2323
return (
2424
<div className={inlineFormElements.inlineFormElement}>
25-
<label>Email</label>
26-
<p contentEditable="true" onChange={setFormElement(setEmail)}>{email}</p>
25+
<label for="email">Email</label>
26+
<input id="email" value={email} contentEditable="true" onChange={setFormElement(setEmail)} />
2727
<button onClick={onEmailSaveClick}>Save</button>
2828
</div>
2929
);

‎src/InlineFormElements/inlineFormElements.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,23 @@
1010

1111
.inlineFormElement [contentEditable="true"] {
1212
width: 500px;
13+
margin-right: 10px;
14+
border: none;
15+
padding: 0.5em;
16+
}
17+
18+
.inlineFormElement [contentEditable="true"]:focus {
19+
outline: 1px dotted grey;
1320
}
1421

1522
.inlineFormElement button {
1623
background: none;
1724
border: none;
1825
color: rgb(0, 255, 13);
26+
padding: 0;
27+
}
28+
29+
.inlineFormElement button:hover {
30+
cursor: pointer;
31+
scale: 1.2;
1932
}

‎src/Layout/layout.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import layout from "./layout.module.css";
33
export default function Layout(props) {
44
return (
55
<div className={layout.container}>
6-
{props.children}
6+
<section className="App">
7+
{props.children}
8+
</section>
79

810
<footer className={layout.footer}>
911
<a

0 commit comments

Comments
 (0)