import { Box, Button, Container, Divider, FormControl, FormHelperText, Input, Sheet, Snackbar, Typography, } from '@mui/joy' import React from 'react' import { useNavigate } from 'react-router-dom' import Logo from '../../Logo' import { login, signUp } from '../../utils/Fetcher' const SignupView = () => { const [username, setUsername] = React.useState('') const [password, setPassword] = React.useState('') const Navigate = useNavigate() const [displayName, setDisplayName] = React.useState('') const [email, setEmail] = React.useState('') const [usernameError, setUsernameError] = React.useState('') const [passwordError, setPasswordError] = React.useState('') const [emailError, setEmailError] = React.useState('') const [displayNameError, setDisplayNameError] = React.useState('') const [error, setError] = React.useState(null) const [snackbarOpen, setSnackbarOpen] = React.useState(false) const [snackbarMessage, setSnackbarMessage] = React.useState('') const handleLogin = (username, password) => { login(username, password).then(response => { if (response.status === 200) { response.json().then(res => { localStorage.setItem('ca_token', res.token) localStorage.setItem('ca_expiration', res.expire) setTimeout(() => { // TODO: not sure if there is a race condition here // but on first sign up it renavigates to login. Navigate('/my/chores') }, 500) }) } else { console.log('Login failed', response) // Navigate('/login') } }) } const handleSignUpValidation = () => { // Reset errors before validation setUsernameError(null) setPasswordError(null) setDisplayNameError(null) setEmailError(null) let isValid = true if (!username.trim()) { setUsernameError('Username is required') isValid = false } if (username.length < 4) { setUsernameError('Username must be at least 4 characters') isValid = false } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailError('Invalid email address') isValid = false } if (password.length < 8) { setPasswordError('Password must be at least 8 characters') isValid = false } if (!displayName.trim()) { setDisplayNameError('Display name is required') isValid = false } // display name should only contain letters and spaces and numbers: if (!/^[a-zA-Z0-9 ]+$/.test(displayName)) { setDisplayNameError('Display name can only contain letters and numbers') isValid = false } // username should only contain letters , numbers , dot and dash: if (!/^[a-zA-Z0-9.-]+$/.test(username)) { setUsernameError( 'Username can only contain letters, numbers, dot and dash', ) isValid = false } return isValid } const handleSubmit = async e => { e.preventDefault() if (!handleSignUpValidation()) { return } signUp(username, password, displayName, email).then(response => { if (response.status === 201) { handleLogin(username, password) } else { console.log('Signup failed') response.json().then(res => { setError(res.error) } ) } }) } return ( Done tick Create an account to get started! Username { setUsernameError(null) setUsername(e.target.value.trim()) }} /> {usernameError} {/* Error message display */} Email { setEmailError(null) setEmail(e.target.value.trim()) }} /> {emailError} Password: { setPasswordError(null) setPassword(e.target.value) }} /> {passwordError} Display Name: { setDisplayNameError(null) setDisplayName(e.target.value) }} /> {displayNameError} or setError(null)} autoHideDuration={5000} message={error} > {error} ) } export default SignupView