zoom

app.scss

@@ -0,0 +1,2 @@
+@import 'assets/style/variables.scss';
+@import "~bootstrap/scss/bootstrap";

package.json

@@ -6,8 +6,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.20.0",
+    "bootstrap": "^4.5.3",
+    "node-sass": "^4.14.1",
     "react": "^16.14.0",
+    "react-bootstrap": "^1.3.0",
     "react-dom": "^16.14.0",
+    "react-facebook-login": "^4.1.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './App.scss';
+import ZfgcHeader from './components/zfgc-header/zfgc-header.component.js';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route, Link
+} from "react-router-dom";
+import SignIn from './components/sign-in/sign-in.component.js';
 
 function App() {
+  document.body.classList.add('theme-midnight');
+
   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>
+    <Router>
+      <div className="zfgc-main">
+        <ZfgcHeader></ZfgcHeader>
+      </div>
+
+      <Switch>
+        <Route path="/signin">
+          <SignIn/>
+        </Route>
+      </Switch>
+    </Router>
   );
 }
 

src/App.scss

@@ -0,0 +1,13 @@
+@import 'assets/style/variables.scss';
+@import "~bootstrap/scss/bootstrap";
+@import 'assets/style/header.scss';
+@import 'assets/style/sign-in.scss';
+
+html {
+  height: 100%;
+}
+
+body {
+  font-size: 1em;
+  font-family: Verdana, Helvetica, sans-serif;
+}

src/assets/style/header.scss

@@ -0,0 +1,8 @@
+.zfgc-header{
+	border-bottom: .2em solid black;
+	padding: 1em;
+
+	.user-heading{
+		font-weight: bold;
+	}
+}

src/assets/style/sign-in.scss

@@ -0,0 +1,11 @@
+.sign-in-form{
+
+	form{
+		background-color: $msecondary;
+	    padding: 2em;
+	    border: $border-stroke solid;
+	    border-radius: $border-radius;
+	    margin-top: 2em;
+	    box-shadow: 0.3em 1em 1em black;
+	}
+}

src/assets/style/themes/midnight-colors.scss

@@ -0,0 +1,6 @@
+$mprimary:			#204378;
+$msecondary:		#25334E;
+$msecondary2:		#132241;			
+
+$onPrimary:			#d5dffb;
+$onPrimary2:		#black;

src/assets/style/variables.scss

@@ -0,0 +1,9 @@
+@import './themes/midnight-colors.scss';
+
+$border-radius:		.5em;
+$border-stroke:		.2em;
+
+.theme-midnight {
+	background-color: $mprimary;
+	color: 			  $onPrimary;
+}

src/components/sign-in/sign-in.component.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import UserEndpoints from './../../utilities/axios/users.endpoints.js';
+import AuthStore from './../../utilities/common/AuthStore.common.js';
+
+function SignIn()  {
+
+	/*function handleAuthenticate(event){
+		event.preventDefault();
+	}*/
+	let signInForm = {
+		"username": null,
+		"password": null
+	};
+
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		signInForm.username = event.target[0].value;
+		signInForm.password = event.target[1].value;
+		let auth = UserEndpoints.getClausiusLogin(signInForm);
+		auth.then(data => {
+			AuthStore.getInstance().setJwtToken(data.data);
+
+			let user = UserEndpoints.getLoggedInUser();
+		});
+
+
+  };
+
+	return (
+		<div className="sign-in-form justify-content-center d-flex">
+			<Form className="col-6" onSubmit={handleSubmit}>
+				<Form.Group>
+					<Form.Label>Username</Form.Label>
+					<Form.Control type="input" name="username"></Form.Control>
+				</Form.Group>
+
+				<Form.Group>
+					<Form.Label>Password</Form.Label>
+					<Form.Control type="password" name="password"></Form.Control>
+				</Form.Group>
+
+				<Form.Group>
+					<Button type="submit">Sign in</Button>
+				</Form.Group>
+			</Form>
+		</div>
+	);
+
+}
+
+
+
+export default SignIn;

src/components/zfgc-header/zfgc-header.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Link} from "react-router-dom";
+
+class ZfgcHeader extends React.Component {
+	render () {
+		return (
+			<div className="zfgc-header">
+				<div className="user-heading">
+					Welcome, friend!<br/>
+					<Link to='/signin'>Sign in</Link> or Register
+				</div>
+			</div>
+		);
+	}
+}
+
+export default ZfgcHeader;

src/routing/login.route.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './components/sign-in/sign-in.component.js';
+
+class LoginRoute extends React.Component {
+	render (){
+		return (
+			<div>
+				<SignIn></SignIn>
+			</div>
+		);
+	}
+}
+
+
+export default LoginRoute;

src/utilities/axios/users.endpoints.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ZfgcApi from './zfgc-api.endpoints';
+import AuthStore from './../common/AuthStore.common.js';
+
+class UserEndpoints extends React.Component {
+
+	static async getClausiusLogin(body){
+		return ZfgcApi.post('users/auth/login', body);
+	}
+
+	static async getLoggedInUser(){
+		let accessToken = AuthStore.getInstance().getJwtToken(); 
+		ZfgcApi.get('users/loggedInUser', {headers : {
+			'Authorization' : 'bearer ' + accessToken.access_token
+		}});
+	}
+
+}
+
+export default UserEndpoints;

src/utilities/axios/zfgc-api.endpoints.js

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+export default axios.create({
+	baseURL: "http://localhost:8080/forum/"
+})

src/utilities/common/AuthStore.common.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default class AuthStore {
+	static myInstance = null;
+
+	jwtToken = null;
+
+	static getInstance() {
+		if(AuthStore.myInstance == null){
+			AuthStore.myInstance = new AuthStore();
+		}
+
+		return this.myInstance;
+	}
+
+	getJwtToken (){ return this.jwtToken};
+	setJwtToken (jwt) { this.jwtToken = jwt; console.log("stored JWT")};
+}