From 74205b505813f5066c72ec2fd0f9a0dbc2346c48 Mon Sep 17 00:00:00 2001 From: Prakhar Trivedi Date: Fri, 11 Jul 2025 16:47:38 +0800 Subject: [PATCH 1/5] made sizing of image responsive in login toaster changed to overlay toasts in default implementation --- src/components/ui/toaster.jsx | 1 + src/pages/Login.jsx | 15 +++++++-------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.jsx index f9aec7c..e68f1c7 100644 --- a/src/components/ui/toaster.jsx +++ b/src/components/ui/toaster.jsx @@ -12,6 +12,7 @@ import { export const toaster = createToaster({ placement: 'bottom-end', pauseOnPageIdle: true, + overlap: true }) const toastColors = { diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index ed6e5e1..f0eb7dc 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,4 +1,4 @@ -import { Button, Field, Fieldset, Flex, For, Image, Input, NativeSelect, Spacer, Stack, Text, VStack } from '@chakra-ui/react' +import { Box, Button, Field, Fieldset, Flex, For, Image, Input, NativeSelect, Spacer, Stack, Text, VStack } from '@chakra-ui/react' import { PasswordInput } from "../components/ui/password-input" import { useState } from 'react' import sccciBuildingImage from '../assets/sccciBuildingOpening1964.png' @@ -74,7 +74,7 @@ function Login() { - + 47 Hill Street - the opening of the Singapore Chinese Chamber of Commerce and Industry building in 1964. @@ -82,7 +82,6 @@ function Login() { Welcome back to ArchAIve! - {/* Please login to continue. */} @@ -94,17 +93,17 @@ function Login() { - Username or Email - setUsernameOrEmail(e.target.value)} name="name" placeholder='e.g johndoe' /> + Username or Email + setUsernameOrEmail(e.target.value)} name="name" placeholder='e.g johndoe' /> - Password - setPassword(e.target.value)} placeholder="Enter password" /> + Password + setPassword(e.target.value)} placeholder="Enter password" /> - From db5e432346cb35ba361a9493f4aaa11bf2319189 Mon Sep 17 00:00:00 2001 From: Prakhar Trivedi Date: Fri, 11 Jul 2025 17:09:18 +0800 Subject: [PATCH 2/5] image removed and button expands on smaller screens --- src/assets/logo.svg | 1 + src/assets/logoVisual.svg | 1 + src/pages/Login.jsx | 25 ++++++++++++++++--------- 3 files changed, 18 insertions(+), 9 deletions(-) create mode 100644 src/assets/logo.svg create mode 100644 src/assets/logoVisual.svg diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..0ef4d69 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/logoVisual.svg b/src/assets/logoVisual.svg new file mode 100644 index 0000000..cea5c24 --- /dev/null +++ b/src/assets/logoVisual.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index f0eb7dc..277f995 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -1,7 +1,8 @@ -import { Box, Button, Field, Fieldset, Flex, For, Image, Input, NativeSelect, Spacer, Stack, Text, VStack } from '@chakra-ui/react' +import { Box, Button, Field, Fieldset, Flex, For, Image, Input, NativeSelect, Spacer, Stack, Text, useMediaQuery, VStack } from '@chakra-ui/react' import { PasswordInput } from "../components/ui/password-input" import { useState } from 'react' import sccciBuildingImage from '../assets/sccciBuildingOpening1964.png' +import logoVisual from '../assets/logoVisual.svg' import server, { JSONResponse } from '../networking' import ToastWizard from '../components/toastWizard' import { useDispatch } from 'react-redux' @@ -11,6 +12,7 @@ import { fetchSession } from '../slices/AuthState' function Login() { const dispatch = useDispatch(); const navigate = useNavigate(); + const [isSmallerThan800] = useMediaQuery("(max-width: 800px)"); const [usernameOrEmail, setUsernameOrEmail] = useState(''); const [password, setPassword] = useState(''); @@ -71,17 +73,22 @@ function Login() { } return ( - + - - - 47 Hill Street - the opening of the Singapore Chinese Chamber of Commerce and Industry building in 1964. - + {!isSmallerThan800 && <> - + + + 47 Hill Street - the opening of the Singapore Chinese Chamber of Commerce and Industry building in 1964. + + + + } - Welcome back to ArchAIve! + + + Welcome back to ArchAIve! @@ -103,7 +110,7 @@ function Login() { - From 867fdddb3cd64dd4c8538001a1ed2f85fd6512bb Mon Sep 17 00:00:00 2001 From: Prakhar Trivedi Date: Fri, 11 Jul 2025 18:02:38 +0800 Subject: [PATCH 3/5] completed login page responsiveness looks a bit dry but will improve later on if time permits --- src/pages/Login.jsx | 62 +++++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 277f995..798d320 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -85,36 +85,38 @@ function Login() { } - - - - Welcome back to ArchAIve! - - - - Please login to continue - - Access to ArchAIve is restricted to SCCCI staff. Unauthorised access is prohibited. - - - - - - Username or Email - setUsernameOrEmail(e.target.value)} name="name" placeholder='e.g johndoe' /> - - - - Password - setPassword(e.target.value)} placeholder="Enter password" /> - - - - - - + + + + + Welcome back to ArchAIve! + + + + Please login to continue + + Access to ArchAIve is restricted to SCCCI staff. Unauthorised access is prohibited. + + + + + + Username or Email + setUsernameOrEmail(e.target.value)} name="name" placeholder='e.g johndoe' /> + + + + Password + setPassword(e.target.value)} placeholder="Enter password" /> + + + + + + + From f5d52f73d72594adc4371b3742b155630565c439 Mon Sep 17 00:00:00 2001 From: Prakhar Trivedi Date: Fri, 11 Jul 2025 18:04:14 +0800 Subject: [PATCH 4/5] made login flex justify content center --- src/pages/Login.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 798d320..943d76d 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -73,7 +73,7 @@ function Login() { } return ( - + {!isSmallerThan800 && <> From e32f28a0d1802b41ac172609132935d685437377 Mon Sep 17 00:00:00 2001 From: Prakhar Trivedi Date: Fri, 11 Jul 2025 18:07:29 +0800 Subject: [PATCH 5/5] login button auto-disables when no inputs provided --- src/pages/Login.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 943d76d..4a397d2 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -18,6 +18,8 @@ function Login() { const [password, setPassword] = useState(''); const [loginLoading, setLoginLoading] = useState(false); + const loginDisabled = usernameOrEmail == "" || password == ""; + const handleLogin = async () => { if (!usernameOrEmail || usernameOrEmail == "" || !password || password == "") { ToastWizard.standard("error", "All fields are required.") @@ -111,7 +113,7 @@ function Login() { -