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() {
/>
-