mirror of
https://github.com/ditkrg/AuthorizationServerDemos.git
synced 2026-01-23 05:27:07 +00:00
Configures Router for homepage & register page
This commit is contained in:
Vazhin Tayeb
parent
4d6c0fd1d2
commit
098808a19c
@ -1,36 +1,33 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
|
||||
import SigninOidc from './pages/signin-oidc';
|
||||
import SignoutOidc from './pages/signout-oidc';
|
||||
import Home from './pages/home';
|
||||
import Login from './pages/login';
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store';
|
||||
import userManager, { loadUserFromStorage } from './services/userService';
|
||||
import AuthProvider from './utils/authProvider';
|
||||
import PrivateRoute from './utils/protectedRoute';
|
||||
import './index.css';
|
||||
import {storeUser} from './actions/authActions'
|
||||
import React, { useEffect } from "react";
|
||||
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
||||
import SigninOidc from "./pages/signin-oidc";
|
||||
import SignoutOidc from "./pages/signout-oidc";
|
||||
import Home from "./pages/home";
|
||||
import Login from "./pages/login";
|
||||
import { Provider } from "react-redux";
|
||||
import store from "./store";
|
||||
import userManager, { loadUserFromStorage } from "./services/userService";
|
||||
import AuthProvider from "./utils/authProvider";
|
||||
import PrivateRoute from "./utils/protectedRoute";
|
||||
import "./index.css";
|
||||
import { storeUser } from "./actions/authActions";
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
// Commented out not to check the localStorage for the user's existence ** Temporary **
|
||||
|
||||
// fetch current user from cookies
|
||||
// loadUserFromStorage(store);
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// Should be removed ** Temporary **
|
||||
const logUserIn = () => {
|
||||
const user = {profile: {given_name: 'John Doe'}}
|
||||
console.log(`User logged in!`)
|
||||
store.dispatch(storeUser(user))
|
||||
}
|
||||
const user = { profile: { given_name: "John Doe" } };
|
||||
console.log(`User logged in!`);
|
||||
store.dispatch(storeUser(user));
|
||||
};
|
||||
|
||||
// ** Temporary **
|
||||
logUserIn()
|
||||
// ** Temporary **
|
||||
logUserIn();
|
||||
|
||||
return (
|
||||
<Provider store={store}>
|
||||
|
||||
67
React/src/pages/RegisterVehicle.js
Normal file
67
React/src/pages/RegisterVehicle.js
Normal file
@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import * as apiService from "../services/apiService";
|
||||
|
||||
const RegisterVehicle = () => {
|
||||
const [model, setModel] = useState("");
|
||||
const [licensePlate, setlicensePlate] = useState("");
|
||||
const [color, setColor] = useState("White");
|
||||
const [type, setType] = useState(1);
|
||||
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
|
||||
async function registerVehicle() {
|
||||
await apiService.registerVehicle(
|
||||
{ model, licensePlate, color, type },
|
||||
user.access_token
|
||||
);
|
||||
// await getVehicles();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3>Register Vehicle:</h3>
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<div className="form-group">
|
||||
<label>Model: </label>
|
||||
<input
|
||||
value={model}
|
||||
type="text"
|
||||
name="model"
|
||||
onChange={(e) => setModel(e.target.value)}
|
||||
/>
|
||||
<label>License Plate: </label>
|
||||
<input
|
||||
value={licensePlate}
|
||||
type="text"
|
||||
name="licensePlate"
|
||||
onChange={(e) => setlicensePlate(e.target.value)}
|
||||
/>
|
||||
<label>Color: </label>
|
||||
<input
|
||||
value={color}
|
||||
type="text"
|
||||
name="color"
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
/>
|
||||
<label>Type: </label>
|
||||
<select
|
||||
value={type}
|
||||
name="type"
|
||||
onChange={(e) => setType(e.target.value)}
|
||||
>
|
||||
<option value="1">Sedan</option>
|
||||
<option value="2">SUV</option>
|
||||
<option value="3">Pickup</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button className="btn" onClick={() => registerVehicle()}>
|
||||
Register
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterVehicle;
|
||||
74
React/src/pages/YourVehicles.js
Normal file
74
React/src/pages/YourVehicles.js
Normal file
@ -0,0 +1,74 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import * as apiService from "../services/apiService";
|
||||
import { useSelector } from "react-redux";
|
||||
import { prettifyJson } from "../utils/jsonUtils";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Main from "./components/Main";
|
||||
|
||||
const YourVehicles = () => {
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
const [vehicleData, setVehicleData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getVehicles();
|
||||
}, []);
|
||||
|
||||
async function getVehicles() {
|
||||
console.log(user);
|
||||
const vehicles = await apiService.getVehiclesFromApi(user.access_token);
|
||||
setVehicleData(vehicles);
|
||||
}
|
||||
|
||||
function getType(type) {
|
||||
switch (type) {
|
||||
case 1:
|
||||
return "Sedan";
|
||||
case 2:
|
||||
return "SUV";
|
||||
case 3:
|
||||
return "Pickup";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen">
|
||||
<Navbar />
|
||||
<Main
|
||||
Component={() => <h1>hello world! this is the "Your Vehicles Page"</h1>}
|
||||
/>
|
||||
</div>
|
||||
// <>
|
||||
// <h1>Traffic Police</h1>
|
||||
// <p>Hello, {user.profile.given_name}.</p>
|
||||
|
||||
// <h3>Your Vehicles:</h3>
|
||||
// {vehicleData ? (
|
||||
// <ul>
|
||||
// {vehicleData.map((v) => (
|
||||
// <li key={v.id}>
|
||||
// {v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}
|
||||
// </li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// ) : (
|
||||
// <p>No vehicles yet :(</p>
|
||||
// )}
|
||||
// <pre>
|
||||
// <code>
|
||||
// {prettifyJson(vehicleData ? vehicleData : "No vehicles yet :(")}
|
||||
// </code>
|
||||
// </pre>
|
||||
// <p>
|
||||
// <a
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// href="https://github.com/tappyy/react-IS4-auth-demo"
|
||||
// >
|
||||
// Github Repo
|
||||
// </a>
|
||||
// </p>
|
||||
// </>
|
||||
);
|
||||
};
|
||||
|
||||
export default YourVehicles;
|
||||
@ -1,19 +1,14 @@
|
||||
import React from 'react';
|
||||
import Button from './Button';
|
||||
import {storeUser} from '../../actions/authActions'
|
||||
import store from '../../store'
|
||||
import userManager from '../../services/userService'
|
||||
import React from "react";
|
||||
import Button from "./Button";
|
||||
import { storeUser } from "../../actions/authActions";
|
||||
import store from "../../store";
|
||||
|
||||
const LoginWindow = () => {
|
||||
|
||||
|
||||
const onUserLogin = () => {
|
||||
const user = {profile: {given_name: 'John Doe'}}
|
||||
console.log(`User logged in!`)
|
||||
store.dispatch(storeUser(user))
|
||||
// Looks like we don't have this function even tho it's in the library installed
|
||||
// userManager.storeUser(user).then(()=> console.log('yay')).catch(()=> console.log('nope'))
|
||||
}
|
||||
const user = { profile: { given_name: "John Doe" } };
|
||||
console.log(`User logged in!`);
|
||||
store.dispatch(storeUser(user));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">
|
||||
|
||||
@ -1,23 +1,28 @@
|
||||
import React from 'react';
|
||||
import logo from '../../images/logo.svg';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useSelector } from 'react-redux';
|
||||
import React from "react";
|
||||
import logo from "../../images/logo.svg";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import { signoutRedirect } from "../../services/userService";
|
||||
|
||||
const Navbar = () => {
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
|
||||
function signOut() {
|
||||
signoutRedirect();
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-100 bg-blue-custom flex justify-center items-center"
|
||||
style={{ height: '90px' }}
|
||||
style={{ height: "90px" }}
|
||||
>
|
||||
<nav className="flex items-center justify-between w-4/5">
|
||||
<img src={logo} alt="logo" className="h-28" />
|
||||
{user ? (
|
||||
<ul className="list-none flex items-center justify-between w-1/5 m-0">
|
||||
<ul className="list-none flex items-center justify-between w-2/6 m-0">
|
||||
<li className="m-0">
|
||||
<Link
|
||||
to="/vehicles"
|
||||
to="/"
|
||||
className="text-white font-inter text-xl font-semibold hover:text-white"
|
||||
>
|
||||
Your Vehicles
|
||||
@ -31,9 +36,15 @@ const Navbar = () => {
|
||||
Register A Vehicles
|
||||
</Link>
|
||||
</li>
|
||||
<li
|
||||
onClick={signOut}
|
||||
className="m-0 text-white font-inter text-xl font-semibold hover:text-white cursor-pointer"
|
||||
>
|
||||
Sign Out
|
||||
</li>
|
||||
</ul>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -1,103 +1,21 @@
|
||||
import React, { useState } from 'react'
|
||||
import { signoutRedirect } from '../services/userService'
|
||||
import { useSelector } from 'react-redux'
|
||||
import * as apiService from '../services/apiService'
|
||||
import { prettifyJson } from '../utils/jsonUtils'
|
||||
import { useEffect } from 'react'
|
||||
import React from "react";
|
||||
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
|
||||
import RegisterVehicle from "./RegisterVehicle";
|
||||
import YourVehicles from "./YourVehicles";
|
||||
|
||||
function Home() {
|
||||
const user = useSelector(state => state.auth.user)
|
||||
const [model, setModel] = useState('')
|
||||
const [licensePlate, setlicensePlate] = useState('')
|
||||
const [color, setColor] = useState('White')
|
||||
const [type, setType] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
getVehicles();
|
||||
}, []);
|
||||
|
||||
const [vehicleData, setVehicleData] = useState(null)
|
||||
function signOut() {
|
||||
signoutRedirect()
|
||||
}
|
||||
|
||||
async function getVehicles() {
|
||||
console.log(user);
|
||||
const vehicles = await apiService.getVehiclesFromApi(user.access_token);
|
||||
setVehicleData(vehicles);
|
||||
}
|
||||
|
||||
async function registerVehicle() {
|
||||
await apiService.registerVehicle({ model, licensePlate, color, type }, user.access_token);
|
||||
await getVehicles();
|
||||
}
|
||||
|
||||
function getType(type) {
|
||||
switch (type){
|
||||
case 1:
|
||||
return "Sedan";
|
||||
case 2:
|
||||
return "SUV";
|
||||
case 3:
|
||||
return "Pickup";
|
||||
}
|
||||
}
|
||||
|
||||
// async function getDoughnuts() {
|
||||
// console.log(user);
|
||||
// const doughnuts = await apiService.getDoughnutsFromApi(user.id);
|
||||
// setDoughnutData(doughnuts)
|
||||
// }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Traffic Police</h1>
|
||||
<p>Hello, {user.profile.given_name}.</p>
|
||||
|
||||
<button className="button button-outline" onClick={() => getVehicles()}>Get Vehicles</button>
|
||||
<button className="button button-clear" onClick={() => signOut()}>Sign Out</button>
|
||||
|
||||
<h3>Register Vehicle:</h3>
|
||||
|
||||
<form onSubmit={e => e.preventDefault()}>
|
||||
<div className="form-group">
|
||||
<label>Model: </label>
|
||||
<input value={model} type="text" name="model" onChange={e => setModel(e.target.value)} />
|
||||
<label>License Plate: </label>
|
||||
<input value={licensePlate} type="text" name="licensePlate" onChange={e => setlicensePlate(e.target.value)} />
|
||||
<label>Color: </label>
|
||||
<input value={color} type="text" name="color" onChange={e => setColor(e.target.value)} />
|
||||
<label>Type: </label>
|
||||
<select value={type} name="type" onChange={e => setType(e.target.value)} >
|
||||
<option value="1">Sedan</option>
|
||||
<option value="2">SUV</option>
|
||||
<option value="3">Pickup</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button className="btn" onClick={() => registerVehicle()} >Register</button>
|
||||
</form>
|
||||
|
||||
<h3>Your Vehicles:</h3>
|
||||
|
||||
{
|
||||
vehicleData ?
|
||||
<ul>
|
||||
{ vehicleData.map(v => (<li key={v.id}>{v.color} {v.model} ({v.licensePlate}) - {getType(v.type)}</li>)) }
|
||||
</ul>
|
||||
:
|
||||
<p>No vehicles yet :(</p>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path="/register">
|
||||
<RegisterVehicle />
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<YourVehicles />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
<pre>
|
||||
<code>
|
||||
{prettifyJson(vehicleData ? vehicleData : 'No vehicles yet :(')}
|
||||
</code>
|
||||
</pre>
|
||||
<p><a target='_blank' rel='noopener noreferrer' href='https://github.com/tappyy/react-IS4-auth-demo'>Github Repo</a></p>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
export default Home;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
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 Main from './components/Main';
|
||||
import LoginWindow from './components/LoginWindow';
|
||||
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 Main from "./components/Main";
|
||||
import LoginWindow from "./components/LoginWindow";
|
||||
|
||||
function Login() {
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
@ -14,7 +14,7 @@ function Login() {
|
||||
}
|
||||
|
||||
return user ? (
|
||||
<Redirect to={'/'} />
|
||||
<Redirect to={"/"} />
|
||||
) : (
|
||||
<div className="h-screen">
|
||||
<Navbar />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user