Creates Navbar component

React/public/index.html

@@ -6,7 +6,8 @@
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
-  <title>We Want Doughnuts</title>
+  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+  <title>Traffic Police</title>
   <style>
     body {
       text-align: center;

React/src/pages/components/Navbar.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import logo from '../../images/logo.png'
+
+const Navbar = ()=>(
+    <div className="w-100 bg-blue-400 flex justify-center items-center" style={{height: "90px"}}>
+        <div className="flex items-center w-4/5">
+            <img src={logo} alt="logo" className="h-28"/>
+        </div>
+    </div>
+)
+export default Navbar

React/src/pages/components/VehicleRegisterForm.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const VehicleRegisterForm = ()=> (
+    <form className="w-64 flex flex-col justify-center shadow">
+        <h3>Register A Vehicle</h3>
+    </form>
+)
+
+export default VehicleRegisterForm

React/src/pages/login.js

@@ -2,6 +2,8 @@ import React from 'react'
 import { signinRedirect } from '../services/userService'
 import { Redirect } from 'react-router-dom'
 import { useSelector } from 'react-redux'
+import Navbar from './components/Navbar'
+import VehicleRegisterForm from './components/VehicleRegisterForm'
 
 function Login() {
   const user = useSelector(state => state.auth.user)
@@ -16,15 +18,9 @@ function Login() {
       :
       (
         <div>
-          <h1>Hello!</h1>
+          <Navbar />
-          <p>Welcome to We Want Doughnuts.</p>
+          <VehicleRegisterForm />
-          <p>A demo of using React and Identity Server 4 to authenticate a user via OpenID Connect to gain access to a web API (and some lovely doughnuts).</p>
+         </div>
-          <p>Start by signing in.</p>
-          <p>💡 <strong>Tip: </strong><em>User: 'spiderman', Pass: 'spiderman'</em></p>
-
-          <button onClick={() => login()}>Login</button>
-          <p><a target='_blank' rel='noopener noreferrer' href='https://github.com/tappyy/react-IS4-auth-demo'>Github Repo</a></p>
-        </div>
       )
   )
 }