move to Donetick Org, First commit frontend

src/views/Authorization/ForgotPasswordView.jsx

@@ -0,0 +1,227 @@
+// create boilerplate for ResetPasswordView:
+import {
+  Box,
+  Button,
+  Container,
+  FormControl,
+  FormHelperText,
+  Input,
+  Sheet,
+  Snackbar,
+  Typography,
+} from '@mui/joy'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { API_URL } from './../../Config'
+
+const ForgotPasswordView = () => {
+  const navigate = useNavigate()
+  // const [showLoginSnackbar, setShowLoginSnackbar] = useState(false)
+  // const [snackbarMessage, setSnackbarMessage] = useState('')
+  const [resetStatusOk, setResetStatusOk] = useState(null)
+  const [email, setEmail] = useState('')
+  const [emailError, setEmailError] = useState(null)
+
+  const validateEmail = email => {
+    return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)
+  }
+
+  const handleSubmit = async () => {
+    if (!email) {
+      return setEmailError('Email is required')
+    }
+
+    // validate email:
+    if (validateEmail(email)) {
+      setEmailError('Please enter a valid email address')
+      return
+    }
+
+    if (emailError) {
+      return
+    }
+
+    try {
+      const response = await fetch(`${API_URL}/auth/reset`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email: email }),
+      })
+
+      if (response.ok) {
+        setResetStatusOk(true)
+        //  wait 3 seconds and then redirect to login:
+      } else {
+        setResetStatusOk(false)
+      }
+    } catch (error) {
+      setResetStatusOk(false)
+    }
+  }
+
+  const handleEmailChange = e => {
+    setEmail(e.target.value)
+    if (validateEmail(e.target.value)) {
+      setEmailError('Please enter a valid email address')
+    } else {
+      setEmailError(null)
+    }
+  }
+
+  return (
+    <Container
+      component='main'
+      maxWidth='xs'
+
+      // make content center in the middle of the page:
+    >
+      <Box
+        sx={{
+          marginTop: 4,
+          display: 'flex',
+          flexDirection: 'column',
+
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <Sheet
+          component='form'
+          sx={{
+            mt: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: 2,
+            borderRadius: '8px',
+            boxShadow: 'md',
+            minHeight: '70vh',
+            justifyContent: 'space-between',
+            justifyItems: 'center',
+          }}
+        >
+          <Box>
+            <img
+              src='/src/assets/logo.svg'
+              alt='logo'
+              width='128px'
+              height='128px'
+            />
+            {/* <Logo /> */}
+            <Typography level='h2'>
+              Done
+              <span
+                style={{
+                  color: '#06b6d4',
+                }}
+              >
+                tick
+              </span>
+            </Typography>
+          </Box>
+          {/* HERE */}
+          <Box sx={{ textAlign: 'center' }}></Box>
+          {resetStatusOk === null && (
+            <form onSubmit={handleSubmit}>
+              <div className='grid gap-6'>
+                <Typography level='body2' gutterBottom>
+                  Enter your email, and we'll send you a link to get into your
+                  account.
+                </Typography>
+                <FormControl error={emailError !== null}>
+                  <Input
+                    placeholder='Email'
+                    type='email'
+                    variant='soft'
+                    fullWidth
+                    size='lg'
+                    value={email}
+                    onChange={handleEmailChange}
+                    error={emailError !== null}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                        handleSubmit()
+                      }
+                    }}
+                  />
+                  <FormHelperText>{emailError}</FormHelperText>
+                </FormControl>
+                <Box>
+                  <Button
+                    variant='solid'
+                    size='lg'
+                    fullWidth
+                    sx={{
+                      mb: 1,
+                    }}
+                    onClick={handleSubmit}
+                  >
+                    Reset Password
+                  </Button>
+                  <Button
+                    fullWidth
+                    size='lg'
+                    variant='soft'
+                    sx={{
+                      width: '100%',
+                      border: 'moccasin',
+                      borderRadius: '8px',
+                    }}
+                    onClick={() => {
+                      navigate('/login')
+                    }}
+                    color='neutral'
+                  >
+                    Back to Login
+                  </Button>
+                </Box>
+              </div>
+            </form>
+          )}
+          {resetStatusOk != null && (
+            <>
+              <Box mt={-30}>
+                <Typography level='body-md'>
+                  if there is an account associated with the email you entered,
+                  you will receive an email with instructions on how to reset
+                  your
+                </Typography>
+              </Box>
+              <Button
+                variant='soft'
+                size='lg'
+                sx={{ position: 'relative', bottom: '0' }}
+                onClick={() => {
+                  navigate('/login')
+                }}
+                fullWidth
+              >
+                Go to Login
+              </Button>
+            </>
+          )}
+          <Snackbar
+            open={resetStatusOk ? resetStatusOk : resetStatusOk === false}
+            autoHideDuration={5000}
+            onClose={() => {
+              if (resetStatusOk) {
+                navigate('/login')
+              }
+            }}
+          >
+            {resetStatusOk
+              ? 'Reset email sent, check your email'
+              : 'Reset email failed, try again later'}
+          </Snackbar>
+        </Sheet>
+      </Box>
+    </Container>
+  )
+}
+
+export default ForgotPasswordView