Email verification

package.json

@@ -10,7 +10,6 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
-    "@types/node": "^16.11.20",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "axios": "^0.25.0",
@@ -50,5 +49,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.26"
   }
 }

src/api/auth.ts

@@ -3,16 +3,31 @@ import request from "./request";
 // username = nusnet ID
 export const login = (data: { username: string; password: string }) => {
   // <Token> is the return type of the { data } from the API call
-  return request.post<Token>("/login", data);
+  return request.post<Token>("/user/signin", data);
 };
 
 export const signup = (data: { username: string; password: string }) => {
-  return request.post("/signup", data);
+  return request.post("/user/signup", data);
 };
 
-export const forgetPassword = (data: { email: string}) => {
-  return request.post("/forgetpassword", data);
+export const forgetPassword = (data: {email: string}) => {
+  return request.post("/user/reset_password", data);
 };
+
+export const resetPassword = (data: {password: string,uid:string}) => {
+  return request.post("/user/change_password/" + data.uid, data);
+};
+
+export const confirmEmail = (data:{uid:string}) => {
+  return request.post("/user/verified_account_status/"+data.uid,data)
+}
+
+
+export const sendVerificationEmail = (data:{uid:string}) => {
+  return request.post("/user/signup_confirmation_email/" + data.uid,data)
+}
+
+
 /*
 boiler plate from evoucher front end may use in the future
 export const logout = (data: { refresh_token: string }) =>

src/api/request.ts

@@ -8,6 +8,7 @@ export const REFRESH_TOKEN_ENDPOINT = '/token/refresh'
 const TOKEN_EXPIRED_CODE = 'token_not_valid'
 const NO_AUTHENTICATION_CODE = 'Authentication credentials were not provided.'
 
+// Modify url here
 const API_URL = 'http://127.0.0.1:8000/api'
 
 // Create an Axios instance with custom config

src/api/user.ts

@@ -0,0 +1,8 @@
+import useRequest, { Config } from "./swr";
+
+export const useUser = (config?: Config<User>) =>
+  useRequest<User>({ method: "GET", url: `user/me` }, config);
+
+
+export const useVerifyUser = (config?: Config<VerifiedUser>) =>
+  useRequest<VerifiedUser>({ method: "GET", url: `verify/me` }, config);

src/components/Form/Input.tsx

@@ -1,6 +1,7 @@
 import { useField } from 'formik'
 import { Input as BaseInput, InputProps } from '@chakra-ui/react'
 
+
 type Props = InputProps & {
   name: string
 }

src/constants/routes.ts

@@ -5,5 +5,7 @@ export enum Routes {
   adminHome = '/admin',
   adminLogin = '/admin/login',
   signup = '/signup',
-  forget = '/forgetpassword'
+  forget = '/forgetpassword',
+  verify = '/verify/:uid',
+
 }

src/pages/Public/EmailVerification/index.tsx

@@ -0,0 +1,37 @@
+// 1. external libraries
+import { useParams } from 'react-router-dom'
+import { confirmEmail } from 'api/auth'
+import { useEffect } from 'react'
+
+// 2. utility files
+
+// 3. components
+import Button from '@chakra-ui/react'
+
+// 4. css
+// import styles from ...
+
+const EmailVerification = () => {
+  const id = useParams().uid!
+
+  const handleConfirmEmail = async () => {
+    try {
+      console.log(id)
+      await confirmEmail({
+        uid: id,
+      })
+    } catch {}
+  }
+  useEffect(() => {
+    handleConfirmEmail()
+  }, [])
+
+  return (
+    <div>
+      <h1>Confirm Email</h1>
+      <Button onClick={handleConfirmEmail}>Verify</Button>
+    </div>
+  )
+}
+
+export default EmailVerification

src/pages/Public/UserForgotPassword/index.tsx

@@ -1,9 +1,10 @@
 // 1. external libraries
 import { Formik, Form, Field, FormikHelpers } from 'formik'
+import { useParams } from 'react-router-dom'
 import * as yup from 'yup'
 
 // 2. utility files
-import { forgetPassword } from 'api/auth'
+import { resetPassword } from 'api/auth'
 
 // 3. components
 import { Input } from 'components/Form'
@@ -12,33 +13,35 @@ import { Input } from 'components/Form'
 // import styles from ...
 
 interface Values {
-  email: string
+  password: string
+  confirm_new_password: string
 }
 
 const UserForgotPassword = () => {
-  const initialValues: Values = { email: '' }
+  const id = useParams().uid!
+  const initialValues: Values = { password: '', confirm_new_password: '' }
+
 
   const validationSchema: yup.SchemaOf<Values> = yup.object({
-    email: yup.string().required('Required'),
+    password: yup.string().required('Required'),
+    confirm_new_password: yup.string().oneOf([yup.ref('password'), null], 'Passwords must match'),
   })
 
-  const handleForgetPassword = (values: Values, formikHelpers: FormikHelpers<Values>) => {
+  const handleResetPassword = (values: Values, formikHelpers: FormikHelpers<Values>) => {
     console.log({ values, formikHelpers })
-    forgetPassword({ email: values.email })
-    formikHelpers.setSubmitting(false)  
+    resetPassword({ password: values.password ,uid:id})
+    formikHelpers.setSubmitting(false)
   }
 
   return (
     <div>
-      <h1>Forgot Password</h1>
-      <Formik
-        initialValues={initialValues}
-        onSubmit={handleForgetPassword}
-        validationSchema={validationSchema}
-      >
+      <h1>Reset Password</h1>
+      <Formik initialValues={initialValues} onSubmit={handleResetPassword} validationSchema={validationSchema}>
         <Form>
-          <label htmlFor="email">Email</label>
-          <Input id="email" name="email" placeholder="email" />
+          <label htmlFor="password">New Password</label>
+          <Input id="password" name="password" placeholder="password" />
+          <label htmlFor="confirm_new_password">Confirm New Password</label>
+          <Input id="confirm_new_password" name="confirm_new_password" placeholder="confirm_new_password" />
           <button type="submit">Submit</button>
         </Form>
       </Formik>

src/pages/Public/UserResetPassword/index.tsx

@@ -0,0 +1,45 @@
+// 1. external libraries
+import { Formik, Form, Field, FormikHelpers } from 'formik'
+import * as yup from 'yup'
+
+// 2. utility files
+import { forgetPassword } from 'api/auth'
+
+// 3. components
+import { Input } from 'components/Form'
+
+// 4. css
+// import styles from ...
+
+interface Values {
+  email: string
+}
+
+const UserResetPassword = () => {
+  const initialValues: Values = { email: '' }
+
+  const validationSchema: yup.SchemaOf<Values> = yup.object({
+    email: yup.string().required('Required'),
+  })
+
+  const handleForgetPassword = (values: Values, formikHelpers: FormikHelpers<Values>) => {
+    console.log({ values, formikHelpers })
+    forgetPassword({ email: values.email })
+    formikHelpers.setSubmitting(false)
+  }
+
+  return (
+    <div>
+      <h1>Forgot Password</h1>
+      <Formik initialValues={initialValues} onSubmit={handleForgetPassword} validationSchema={validationSchema}>
+        <Form>
+          <label htmlFor="email">Email</label>
+          <Input id="email" name="email" placeholder="email" />
+          <button type="submit">Submit</button>
+        </Form>
+      </Formik>
+    </div>
+  )
+}
+
+export default UserResetPassword

src/pages/User/Home/index.tsx

@@ -1,5 +1,20 @@
+import { useVerifyUser } from 'api/user'
+
+import MainPage from '../MainPage';
+import SendEmail from '../SendEmail'
+
 const Home = () => {
-  return <p>Home</p>
+    const {data : verifyUser} = useVerifyUser(); 
+    if (verifyUser?.verified == true) {
+      return (
+        <div>
+          <MainPage />
+        </div>
+      )
+    }
+    return <SendEmail/>
+
+
 }
 
 export default Home

src/pages/User/MainPage/index.tsx

@@ -0,0 +1,8 @@
+const MainPage = () =>{
+    return (
+    <h1>MainPage</h1>
+    )
+}
+
+
+export default MainPage;

src/pages/User/SendEmail/index.tsx

@@ -0,0 +1,31 @@
+import { useVerifyUser } from 'api/user'
+import { useEffect } from 'react'
+import { verificationEmail } from 'api/auth'
+
+import Button from '@chakra-ui/react'
+
+const SendEmail = () => {
+  const { data: verifyUser } = useVerifyUser()
+
+  const sendVerificationEmail = async () => {
+    try {
+      console.log(100)
+      await verificationEmail({
+        uid: '100', //verifyUser.uid,
+      })
+    } catch {}
+  }
+
+  useEffect(() => {
+    sendVerificationEmail()
+  }, [])
+
+  return (
+    <div>
+      <h1>Click The Button To Send The Verification Email</h1>
+      <Button onClick={sendVerificationEmail}>Resend</Button>
+    </div>
+  )
+}
+
+export default SendEmail

src/pages/index.tsx

@@ -6,8 +6,9 @@ import { Routes as ROUTES } from 'constants/routes'
 import UserLogin from './Public/UserLogin'
 import UserSignUp from './Public/UserSignUp'
 import UserForgetPassword from './Public/UserForgotPassword'
-import UserHome from './User/Home'
+import Home from './User/Home'
 import AdminHome from './Admin/Home'
+import EmailVerification from './Public/EmailVerification'
 
 const Pages = () => {
   return (
@@ -20,8 +21,12 @@ const Pages = () => {
 
         <Route path={ROUTES.forget} element={<PublicRoute component={UserForgetPassword} />} />
 
+        <Route path={ROUTES.verify} element={<PublicRoute component={EmailVerification} />} />
+
+        <Route path={ROUTES.index} element={<PublicRoute component={Home} />} />
+
         {/* Private routes */}
-        <Route path={ROUTES.index} element={<PrivateRoute component={UserHome} />} />
+        <Route path={ROUTES.index} element={<PrivateRoute component={Home} />} />
 
         {/* Admin routes */}
         <Route path={ROUTES.adminHome} element={<AdminRoute component={AdminHome} />} />

src/types/api.d.ts

@@ -1,6 +1,20 @@
 // Types for APIs go here
 
+import internal from "stream";
+
 interface Token {
   access: string
   refresh: string
 }
+
+interface User {
+  username: string;
+  organisation: string;
+
+}
+
+interface VerifiedUser {
+  username: string;
+  verified: boolean;
+  uid:BigInteger;
+}