diff --git a/client/src/App.tsx b/client/src/App.tsx index 23e38c3..89d3e85 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,5 +1,5 @@ import React, { useContext, useEffect } from 'react'; -import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom'; +import { createBrowserRouter, Navigate, RouteObject, RouterProvider } from 'react-router-dom'; import AuthContext from './context/AuthContext'; import BrowserRoutes from './routes'; @@ -9,6 +9,7 @@ import Layout from './layout/PrivateLayout'; import Landing from './views/Landing'; import Login from './views/Login'; import NotFound from './views/NotFound'; +import Register from './views/Register'; import './styles/custom.scss'; @@ -21,9 +22,17 @@ const App: React.FC = () => { element: }, { - path: '/signin', + path: '/login', element: }, + { + path: '/register', + element: + }, + { + path: '/home', + element: + }, { path: '*', element: @@ -49,10 +58,8 @@ const App: React.FC = () => { const getBrowserRouter = () => { if (signed) { - console.log('app signed'); return createBrowserRouter(signedRouter); } - console.log('app not signed'); return createBrowserRouter(notSignedRouter); }; diff --git a/client/src/api-service/apiConfig.ts b/client/src/api-service/apiConfig.ts index e81b1b3..7c2c4ad 100644 --- a/client/src/api-service/apiConfig.ts +++ b/client/src/api-service/apiConfig.ts @@ -7,10 +7,10 @@ const server = env.VITE_BACKEND_SERVER; /** * */ -async function privateSessionState(signed: boolean): Promise { +async function privateSessionState(): Promise { const tokenState = localStorage.getItem(API_TOKEN); - if (signed && tokenState) { + if (tokenState) { const response = await fetch(ApiConfig.refreshTokenUrl, { method: 'GET', mode: 'cors', @@ -38,7 +38,7 @@ const ApiConfig = { refreshTokenUrl: `${server}/rest/user-sessions/refresh`, - signin: async (email: string, password: string): Promise => { + login: async (email: string, password: string): Promise => { try { const response = await fetch(ApiConfig.signinUrl, { method: 'POST', @@ -56,7 +56,7 @@ const ApiConfig = { token: data.token }; } else { - console.error('signin error', response); + console.error('login error', response); } } catch (error) { diff --git a/client/src/context/AuthContext.ts b/client/src/context/AuthContext.ts index ad0fc7a..d23e2ca 100644 --- a/client/src/context/AuthContext.ts +++ b/client/src/context/AuthContext.ts @@ -5,7 +5,7 @@ export interface AuthContextData { signed: boolean; user: User | undefined; checkCurrentAuthUser: (pathname: string) => Promise; - signIn: (email: string, password: string) => void; + signIn: (email: string, password: string) => Promise; signOut: () => void; isAdmin: boolean; } diff --git a/client/src/context/AuthProvider.tsx b/client/src/context/AuthProvider.tsx index 6d5d1e9..5e2a444 100644 --- a/client/src/context/AuthProvider.tsx +++ b/client/src/context/AuthProvider.tsx @@ -19,7 +19,7 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }: Pro const fetchCurrentSession = async (pathname: string): Promise => { try { - const bearerToken: SigninResponse | undefined = await ApiConfig.currentSessionState(signed); + const bearerToken: SigninResponse | undefined = await ApiConfig.currentSessionState(); if (bearerToken && bearerToken.token) { setSigned(true); } @@ -47,16 +47,14 @@ const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }: Pro }; const checkCurrentAuthUser = async (pathname: string): Promise => { - console.log('checkCurrentAuthUser', pathname); const bearerToken: SigninResponse | undefined = await fetchCurrentSession(pathname); if (bearerToken && bearerToken.token) { - console.log('checkCurrentAuthUser token', bearerToken); updateUserSession(null, bearerToken.token); } }; const signIn = async (email: string, password: string): Promise => { - const bearerToken: SigninResponse | undefined = await ApiConfig.signin(email, password); + const bearerToken: SigninResponse | undefined = await ApiConfig.login(email, password); if (bearerToken && bearerToken.token) { const currentUser: User = { email diff --git a/client/src/layout/PrivateLayout/index.tsx b/client/src/layout/PrivateLayout/index.tsx index a89c4b2..9048d41 100644 --- a/client/src/layout/PrivateLayout/index.tsx +++ b/client/src/layout/PrivateLayout/index.tsx @@ -8,7 +8,6 @@ import Footer from '../../components/Footer'; * */ function Layout() { - console.log('Layout'); return ( <>
diff --git a/client/src/routes/index.tsx b/client/src/routes/index.tsx index 25dfd5e..bf5cd89 100644 --- a/client/src/routes/index.tsx +++ b/client/src/routes/index.tsx @@ -1,9 +1,7 @@ -import React from 'react'; import { Navigate, RouteObject } from 'react-router-dom'; import getStoredPath from '../utils/PathUtils'; import Home from '../views/Home'; import About from '../views/About'; -import NotFound from '../views/NotFound'; const BrowserRoutes: RouteObject[] = [ { @@ -15,7 +13,13 @@ const BrowserRoutes: RouteObject[] = [ { path: '/login', element: ( - + + ) + }, + { + path: '/register', + element: ( + ) }, { @@ -29,12 +33,6 @@ const BrowserRoutes: RouteObject[] = [ element: ( ) - }, - { - path: '/404', - element: ( - - ) } ]; diff --git a/client/src/styles/custom.scss b/client/src/styles/custom.scss index 25f135c..00f8158 100644 --- a/client/src/styles/custom.scss +++ b/client/src/styles/custom.scss @@ -1,10 +1,11 @@ -$theme-colors: ( - 'info': tomato, - 'danger': teal -); +//$theme-colors: ( +// 'info': tomato, +// 'danger': teal, +// 'primary': green, +//); @import '~bootstrap/scss/bootstrap'; .bg-body-secondary { background-color: red; -} \ No newline at end of file +} diff --git a/client/src/views/Home/index.tsx b/client/src/views/Home/index.tsx index 15aeed1..4b1f73e 100644 --- a/client/src/views/Home/index.tsx +++ b/client/src/views/Home/index.tsx @@ -4,8 +4,6 @@ import React from 'react'; * */ function Home() { - console.log('This is home!'); - return (

This is home!

); diff --git a/client/src/views/Landing/index.tsx b/client/src/views/Landing/index.tsx index 6cc17f2..207b7c8 100644 --- a/client/src/views/Landing/index.tsx +++ b/client/src/views/Landing/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useCallback, useContext, useEffect } from 'react'; import { Button } from 'react-bootstrap'; import './styles.scss'; import { useNavigate } from 'react-router-dom'; @@ -12,14 +12,18 @@ function Landing() { const navigate = useNavigate(); const handleLogin = () => { - console.log('Landing signed', signed); + console.log('Landing handleLogin signed', signed); if (signed) { - navigate('/home'); + goTo('/home'); } else { - navigate('/signin'); + goTo('/login'); } }; + const goTo = useCallback((page: string) => { + navigate(page); + }, []); + useEffect(() => { checkCurrentAuthUser(window.location.pathname); }, []); @@ -29,9 +33,17 @@ function Landing() {

This is landing page

+ ); diff --git a/client/src/views/Login/index.tsx b/client/src/views/Login/index.tsx index fb91988..7222265 100644 --- a/client/src/views/Login/index.tsx +++ b/client/src/views/Login/index.tsx @@ -1,13 +1,14 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useState } from 'react'; import { Alert, Button, Col, Form } from 'react-bootstrap'; import AuthContext from '../../context/AuthContext'; -import { redirect } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; /** * Created the Login component. */ function Login() { const { signIn } = useContext(AuthContext); + const navigate = useNavigate(); const [validated, setValidated] = useState(true); const [formInvalid, setFormInvalid] = useState(false); @@ -18,18 +19,19 @@ function Login() { const form = event.currentTarget; if (form.checkValidity() === false) { - console.log('something is invalid!'); setFormInvalid(true); return; } setFormInvalid(false); - console.log(`email=${form.email.value}, password=${form.password.value}`); await signIn(form.email.value, form.password.value); - console.log('finished!? login component!?'); - redirect("/home"); + goTo("/home"); }; + const goTo = useCallback((page: string) => { + navigate(page); + }, []); + useEffect(() => {}, [formInvalid]); return ( @@ -56,11 +58,30 @@ function Login() { /> - + + + + {formInvalid ? ( Something is wrong! Check your email and password! diff --git a/client/src/views/NotFound/index.tsx b/client/src/views/NotFound/index.tsx index 2951c55..5315c0e 100644 --- a/client/src/views/NotFound/index.tsx +++ b/client/src/views/NotFound/index.tsx @@ -1,11 +1,28 @@ -import React from 'react'; +import React, { useCallback } from 'react'; +import { Button } from 'react-bootstrap'; +import { useNavigate } from 'react-router-dom'; /** * */ function NotFound() { + const navigate = useNavigate(); + + const goTo = useCallback((page: string) => { + navigate(page); + }, []); + return ( -

Not found!

+ <> +

Not found!

+ + ); } diff --git a/client/src/views/Register/index.tsx b/client/src/views/Register/index.tsx new file mode 100644 index 0000000..89b542d --- /dev/null +++ b/client/src/views/Register/index.tsx @@ -0,0 +1,94 @@ +import React, { useCallback, useContext, useEffect, useState } from 'react'; +import { Alert, Button, Col, Form } from 'react-bootstrap'; +import AuthContext from '../../context/AuthContext'; +import { useNavigate } from 'react-router-dom'; + +/** + * Created the Login component. + */ +function Login() { + const { signIn } = useContext(AuthContext); + const navigate = useNavigate(); + const [validated, setValidated] = useState(true); + const [formInvalid, setFormInvalid] = useState(false); + + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + event.stopPropagation(); + setValidated(true); + + const form = event.currentTarget; + if (form.checkValidity() === false) { + setFormInvalid(true); + return; + } + + setFormInvalid(false); + await signIn(form.email.value, form.password.value); + goTo("/home"); + }; + + const goTo = useCallback((page: string) => { + navigate(page); + }, []); + + useEffect(() => {}, [formInvalid]); + + return ( + <> +

This is register page

+
+ + Email address + + + + + Password + + + + +
+ + + + + + {formInvalid ? ( + + Something is wrong! Check your email and password! + + ) : null} + + ); +} + +export default Login;