{/* First images column */}
-
-
-
-
-
-
-
+ {!isSmallerThan800 ? (
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
{/* Title, subtitle, and CTA button column */}
- Connect
with your
roots
+ Connect
with your
roots
The intelligent artefact digitisation platform.
@@ -39,13 +61,15 @@ function Homepage() {
{/* Second images column */}
-
-
-
-
-
-
-
+ {!isSmallerThan800 && (
+
+
+
+
+
+
+
+ )}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
new file mode 100644
index 0000000..ed6e5e1
--- /dev/null
+++ b/src/pages/Login.jsx
@@ -0,0 +1,118 @@
+import { 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'
+import server, { JSONResponse } from '../networking'
+import ToastWizard from '../components/toastWizard'
+import { useDispatch } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { fetchSession } from '../slices/AuthState'
+
+function Login() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const [usernameOrEmail, setUsernameOrEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [loginLoading, setLoginLoading] = useState(false);
+
+ const handleLogin = async () => {
+ if (!usernameOrEmail || usernameOrEmail == "" || !password || password == "") {
+ ToastWizard.standard("error", "All fields are required.")
+ return;
+ }
+
+ setLoginLoading(true);
+
+ const ambiguousErrorToast = () => {
+ ToastWizard.standard("error", "Login failed.", "Something went wrong. Please try again.");
+ }
+
+ server.post('/auth/login', {
+ usernameOrEmail: usernameOrEmail,
+ password: password
+ })
+ .then(res => {
+ if (res.data instanceof JSONResponse) {
+ if (res.data.isErrorStatus()) {
+ console.log("Error response in login request:", res.data.fullMessage());
+ if (res.data.userErrorType()) {
+ ToastWizard.standard("error", "Login failed.", res.data.message);
+ } else {
+ ambiguousErrorToast();
+ }
+ }
+
+ // Success case
+ dispatch(fetchSession());
+ navigate("/sampleProtected");
+ ToastWizard.standard("success", "Login successful.", "Welcome back to ArchAIve!")
+ } else {
+ console.log("Unexpected response in login request:", res.data);
+ ambiguousErrorToast();
+ }
+
+ setLoginLoading(false);
+ })
+ .catch(err => {
+ if (err.response && err.response.data instanceof JSONResponse) {
+ console.log("Error response in login request:", err.response.data.fullMessage());
+ if (err.response.data.userErrorType()) {
+ ToastWizard.standard("error", "Login failed.", err.response.data.message);
+ } else {
+ ambiguousErrorToast();
+ }
+ } else {
+ console.log("Unexpected error in login request:", err);
+ ambiguousErrorToast();
+ }
+ setLoginLoading(false);
+ })
+ }
+
+ return (
+
+
+
+
+ 47 Hill Street - the opening of the Singapore Chinese Chamber of Commerce and Industry building in 1964.
+
+
+
+
+
+ Welcome back to ArchAIve!
+ {/* Please login to continue. */}
+
+
+
+ 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" />
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Login
\ No newline at end of file
diff --git a/src/pages/SampleProtected.jsx b/src/pages/SampleProtected.jsx
new file mode 100644
index 0000000..03a67a4
--- /dev/null
+++ b/src/pages/SampleProtected.jsx
@@ -0,0 +1,47 @@
+import { Button, Text } from "@chakra-ui/react"
+import { useDispatch } from "react-redux"
+import { logout } from "../slices/AuthState";
+import ToastWizard from "../components/toastWizard";
+import { useNavigate } from "react-router-dom";
+
+function SampleProtected() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+
+ const handleLogout = () => {
+ // ToastWizard.standard("success", "Logout successful.", "See you soon!");
+
+ const logoutPromise = new Promise((resolve, reject) => {
+ dispatch(logout(true, (msg) => {
+ if (typeof msg === 'string') {
+ reject(msg);
+ } else {
+ navigate('/auth/login');
+ resolve(msg);
+ }
+ }));
+ })
+
+ ToastWizard.promiseBased(
+ logoutPromise,
+ "Logged out successfully.",
+ "You have been logged out.",
+ "Logout failed.",
+ "Something went wrong while logging out. Please try again.",
+ "Logging out...",
+ "Connecting to server...",
+ handleLogout,
+ "Retry",
+ ['error']
+ )
+ }
+
+ return (
+
+ SampleProtected
+
+
+ )
+}
+
+export default SampleProtected
\ No newline at end of file
diff --git a/src/slices/AuthState.js b/src/slices/AuthState.js
new file mode 100644
index 0000000..42a30cc
--- /dev/null
+++ b/src/slices/AuthState.js
@@ -0,0 +1,136 @@
+import { createSlice } from '@reduxjs/toolkit';
+import server, { JSONResponse } from '../networking';
+
+const initialState = {
+ accountID: null,
+ username: null,
+ superuser: null,
+ loaded: false,
+ error: null,
+ disableSessionCheck: false,
+}
+
+const authSlice = createSlice({
+ name: 'auth',
+ initialState,
+ reducers: {
+ setAccountID: (state, action) => {
+ state.accountID = action.payload;
+ },
+ setUsername: (state, action) => {
+ state.username = action.payload;
+ },
+ setSuperuser: (state, action) => {
+ state.superuser = action.payload;
+ },
+ setLoaded: (state, action) => {
+ state.loaded = action.payload;
+ },
+ setError: (state, action) => {
+ state.error = action.payload;
+ },
+ setDisableSessionCheck: (state, action) => {
+ state.disableSessionCheck = action.payload;
+ },
+ stateLogout: (state) => {
+ state.accountID = null;
+ state.username = null;
+ state.superuser = null;
+ state.error = null;
+ }
+ },
+});
+
+export const retrieveSession = async () => {
+ try {
+ const response = await server.get('/auth/session');
+ if (response.data instanceof JSONResponse) {
+ if (response.data.isErrorStatus()) {
+ return response.data.fullMessage();
+ }
+
+ // Success
+ return {
+ accountID: response.data.raw.accID || null,
+ username: response.data.raw.username || null,
+ sessionStart: response.data.raw.sessionStart || null,
+ superuser: response.data.raw.superuser || null
+ }
+ } else {
+ throw new Error("Unexpected response format; response:", response.data);
+ }
+ } catch (err) {
+ var errorMessage = err || "Could not resolve an error message.";
+ if (err.response && err.response.data && err.response.data instanceof JSONResponse) {
+ errorMessage = err.response.data.fullMessage();
+ } else if (err.response && err.response.data && typeof err.response.data === 'string') {
+ errorMessage = err.response.data;
+ } else if (typeof err === 'string') {
+ errorMessage = err;
+ } else if (err.message && typeof err.message === 'string') {
+ errorMessage = err.message;
+ }
+ console.log("Error in fetching session:", errorMessage);
+ return errorMessage;
+ }
+}
+
+export const { setAccountID, setUsername, setSuperuser, setLoaded, setError, setDisableSessionCheck, stateLogout } = authSlice.actions;
+
+export const fetchSession = (handler=null) => async (dispatch) => {
+ // console.log('Fetching session...');
+ dispatch(setLoaded(false));
+ const response = await retrieveSession();
+ if (response.accountID && response.username && response.superuser !== undefined) {
+ dispatch(setAccountID(response.accountID));
+ dispatch(setUsername(response.username));
+ dispatch(setSuperuser(response.superuser));
+ } else {
+ dispatch(setError(response));
+ }
+ dispatch(setLoaded(true));
+
+ if (handler) {
+ handler(response);
+ }
+};
+
+export const logout = (disableSessionCheck=false, handler=null) => async (dispatch) => {
+ try {
+ const response = await server.get('/auth/logout');
+ if (response.data instanceof JSONResponse) {
+ if (response.data.isErrorStatus()) {
+ throw new Error({ response: { data: response.data }});
+ }
+
+ // Success
+ if (disableSessionCheck) {
+ dispatch(setDisableSessionCheck(true));
+ }
+ dispatch(stateLogout());
+
+ if (handler) {
+ handler(response.data);
+ }
+ } else {
+ throw new Error("Unexpected response format; response:", response.data);
+ }
+ } catch (err) {
+ var errorMessage = err || "Could not resolve an error message.";
+ if (err.response && err.response.data && err.response.data instanceof JSONResponse) {
+ errorMessage = err.response.data.fullMessage();
+ } else if (err.response && err.response.data && typeof err.response.data === 'string') {
+ errorMessage = err.response.data;
+ } else if (err.message && typeof err.message === 'string') {
+ errorMessage = err.message;
+ } else if (typeof err === 'string') {
+ errorMessage = err;
+ }
+ console.log("ASLOGOUT ERROR:", errorMessage);
+ if (handler) {
+ handler(errorMessage);
+ }
+ }
+}
+
+export default authSlice.reducer;
\ No newline at end of file