From e123177835a9edb68aa6cb0c8ea8fed5e5786aa2 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Wed, 15 Nov 2023 13:55:04 +0700
Subject: [PATCH] feat: user must logged in
---
src/App.tsx | 25 +++++++++++++++++++------
src/api/Login.ts | 1 -
src/components/Login.tsx | 12 ++++++------
src/components/NotFound.tsx | 17 +++++++++++++++++
src/components/Register.tsx | 20 ++++++++++----------
src/utils/LocalStorage.ts | 2 +-
src/utils/Login.ts | 3 +--
7 files changed, 54 insertions(+), 26 deletions(-)
create mode 100644 src/components/NotFound.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 3e1b317..ad85457 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,18 +2,31 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Login from './components/Login'
import Navbar from './components/Navbar'
import Register from './components/Register'
+import NotFound from './components/NotFound'
import Logout from './components/Logout'
+import { isLoggedIn } from './utils/LocalStorage'
function App() {
return (
<BrowserRouter>
- <Navbar/>
- <Routes>
- <Route path='/Login' element={<Login/>}/>
- <Route path='/Register' element={<Register/>}/>
- <Route path='/Logout' element={<Logout/>}/>
- </Routes>
+ {isLoggedIn() ?
+ <>
+ <Navbar/>
+ <Routes>
+ <Route path='/Logout' element={<Logout/>}/>
+ <Route path='*' element={<NotFound/>}/>
+ </Routes>
+ </>
+ :
+ <>
+ <Routes>
+ <Route path='/Login' element={<Login/>}/>
+ <Route path='/Register' element={<Register/>}/>
+ <Route path='*' element={<Login/>}/>
+ </Routes>
+ </>
+ }
</BrowserRouter>
)
}
diff --git a/src/api/Login.ts b/src/api/Login.ts
index c14986c..89da61f 100644
--- a/src/api/Login.ts
+++ b/src/api/Login.ts
@@ -47,7 +47,6 @@ export async function login(username : string, password : string) {
const data = {username : username,
password : password};
const response = await axios.post<string>(API_URL, data);
- console.log("api response", response);
return response;
} catch(err) {
alert(err);
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index f434a7d..1d26c84 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -12,7 +12,7 @@ import {
Link,
FormErrorMessage,
} from '@chakra-ui/react'
-import { validateConfirmPassword, validateEmail, validateLogin, validateRegister, validateUsername } from '../utils/Login'
+import { validateLogin, validateUsername } from '../utils/Login'
import React, {useState} from 'react'
import { useNavigate } from 'react-router-dom';
import { setUser } from '../utils/LocalStorage';
@@ -23,8 +23,8 @@ type formType = {
};
export default function Login() {
- const [formData, setFormData] = useState<formType>({username : "q",
- password : "q"});
+ const [formData, setFormData] = useState<formType>({username : "",
+ password : ""});
const [usernameValid, setUsernameValid] = useState(true);
const [passwordValid, setPasswordValid] = useState(true);
const navigate = useNavigate();
@@ -32,11 +32,11 @@ export default function Login() {
function handleChange (event : React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
- };
+ }
function revalidateUsername() {
validateUsername(formData.username).then((available) => setUsernameValid(!available));
- };
+ }
function handleSubmit(event : React.FormEvent<HTMLFormElement>) {
revalidateUsername();
@@ -54,7 +54,7 @@ export default function Login() {
}
event.preventDefault();
- };
+ }
return (
<Flex
diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
new file mode 100644
index 0000000..3db845e
--- /dev/null
+++ b/src/components/NotFound.tsx
@@ -0,0 +1,17 @@
+import { Container, Text } from '@chakra-ui/react'
+
+export default function NotFound() {
+ return (
+ <Container
+ sx={{ width: '100vw', height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+ >
+ <Container>
+ <Text variant="h1" textAlign={'center'}>
+ 404 Not Found
+ </Text>
+ </Container>
+ </Container>
+ )
+}
+
+
\ No newline at end of file
diff --git a/src/components/Register.tsx b/src/components/Register.tsx
index 4d101c3..3f9b92e 100644
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@@ -26,11 +26,11 @@ type formType = {
};
export default function Register() {
- const [formData, setFormData] = useState<formType>({username : "q",
- name : "q",
- email : "qwe@gmail.com",
- password : "q",
- confirmPassword : "q"});
+ const [formData, setFormData] = useState<formType>({username : "",
+ name : "",
+ email : "",
+ password : "",
+ confirmPassword : ""});
const [usernameValid, setUsernameValid] = useState(true);
const [emailValid, setEmailValid] = useState(true);
const [passwordValid, setPasswordValid] = useState(true);
@@ -39,18 +39,18 @@ export default function Register() {
function handleChange (event : React.ChangeEvent<HTMLInputElement>) {
const { name, value } = event.target;
setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
- };
+ }
function revalidateUsername() {
validateUsername(formData.username).then((available) => setUsernameValid(available));
- };
+ }
function revalidateEmail() {
validateEmail(formData.email).then((available) => setEmailValid(available));
- };
+ }
function revalidatePassword() {
const valid = validateConfirmPassword(formData.password, formData.confirmPassword);
setPasswordValid(valid);
- };
+ }
function handleSubmit(event : React.FormEvent<HTMLFormElement>) {
revalidateUsername();
@@ -68,7 +68,7 @@ export default function Register() {
}
event.preventDefault();
- };
+ }
return (
<Flex
diff --git a/src/utils/LocalStorage.ts b/src/utils/LocalStorage.ts
index 83e1910..a82db20 100644
--- a/src/utils/LocalStorage.ts
+++ b/src/utils/LocalStorage.ts
@@ -1,5 +1,6 @@
export function setUser(username : string) {
+ // TODO : async issue
localStorage.setItem('username', username);
}
@@ -14,6 +15,5 @@ export function getUser() {
export function isLoggedIn() {
const loggedIn = (getUser() !== null);
- console.log('isLoggedIn', loggedIn);
return loggedIn;
}
diff --git a/src/utils/Login.ts b/src/utils/Login.ts
index 5f944f9..9a84b4e 100644
--- a/src/utils/Login.ts
+++ b/src/utils/Login.ts
@@ -25,7 +25,6 @@ export async function validateRegister(username : string, name : string, email :
export async function validateLogin(username : string, password : string) {
const response = await login(username, password);
- console.log("util response", response);
- const success = (response.data === "success");
+ const success = (response.data === "success");
return success;
}
--
GitLab