-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: forgot paassword * feat: update client
- Loading branch information
1 parent
9495682
commit d1cbe68
Showing
8 changed files
with
327 additions
and
42 deletions.
There are no files selected for viewing
Submodule fest-web-client
updated
from fc6200 to 7a95f1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| /* eslint-disable camelcase */ | ||
| /* eslint-disable @typescript-eslint/ban-ts-comment */ | ||
| 'use client'; | ||
| import Modal from 'react-modal'; | ||
|
|
||
| import styles from './resetpass.module.css'; | ||
| import toast from 'react-hot-toast'; | ||
| import { useRouter, useSearchParams } from 'next/navigation'; | ||
| import { useState } from 'react'; | ||
| import { UserApi } from '../../../fest-web-client/client/src'; | ||
| import { apiConfig } from '@/utils/ApiConfig'; | ||
| import ReCAPTCHA from 'react-google-recaptcha'; | ||
| import { RECAPTCHA_SITE_KEY } from '@/config/config'; | ||
|
|
||
| const ForgotPasswordPage: React.FC = () => { | ||
| const [password, setPassword] = useState(''); | ||
| const [confirmPassword, setConfirmPassword] = useState(''); | ||
| const [recaptchaToken, setRecaptchaToken] = useState<string>(''); | ||
|
|
||
| const router = useRouter(); | ||
|
|
||
| const searchParams = useSearchParams(); | ||
|
|
||
| const handleResetPassword = () => { | ||
| if (recaptchaToken == '') { | ||
| toast.error('Please verify the captcha'); | ||
| return; | ||
| } | ||
|
|
||
| if (!password || password.length < 8) { | ||
| toast.error('Password must be atleast 8 characters long'); | ||
| return; | ||
| } | ||
| if (password !== confirmPassword) { | ||
| toast.error('Passwords do not match'); | ||
| return; | ||
| } | ||
|
|
||
| const code = searchParams.get('code'); | ||
| const email = searchParams.get('email'); | ||
|
|
||
| const userApi = new UserApi(apiConfig); | ||
|
|
||
| if (code && email) { | ||
| userApi | ||
| .changePassword({ | ||
| // @ts-ignore-next-line | ||
| user_code: code, | ||
| user_email: email, | ||
| user_password: password, | ||
| user_recaptcha_code: recaptchaToken, | ||
| }) | ||
| .then(res => { | ||
| // @ts-ignore-next-line | ||
| toast.success(res.message); | ||
| router.push('/login'); | ||
| }) | ||
| .catch(err => { | ||
| toast.error(err.message); | ||
| }); | ||
| } else { | ||
| toast.error('Invalid code or email'); | ||
| } | ||
| }; | ||
|
|
||
| const handleCaptchaSubmission = (token: string | null) => { | ||
| if (token) { | ||
| setRecaptchaToken(token); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={styles.forgotPasswordPage}> | ||
| <Modal | ||
| isOpen={true} | ||
| ariaHideApp={false} | ||
| className="w-[50%] h-[50%] bg-[#1d1c1c] rounded-xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" | ||
| > | ||
| <div className={styles.resetFormContainer}> | ||
| <div className={styles.formFields}> | ||
| <div className={styles.formField}> | ||
| <div className={styles.formLabel}>New Password*</div> | ||
| <input | ||
| className={styles.formInput} | ||
| type="password" | ||
| onChange={e => { | ||
| setPassword(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
| <div className={styles.formField}> | ||
| <div className={styles.formLabel}>Confirm Password*</div> | ||
| <input | ||
| className={styles.formInput} | ||
| type="password" | ||
| onChange={e => { | ||
| setConfirmPassword(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={ | ||
| styles.recaptchaContainer + ' flex items-center justify-center' | ||
| } | ||
| > | ||
| <ReCAPTCHA | ||
| sitekey={RECAPTCHA_SITE_KEY} | ||
| onChange={handleCaptchaSubmission} | ||
| theme={'dark'} | ||
| /> | ||
| </div> | ||
| <button className={styles.registerButton} onClick={handleResetPassword}> | ||
| Reset Password | ||
| </button> | ||
| </div> | ||
| </Modal> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ForgotPasswordPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| .forgotPasswordPage { | ||
| background-color: #000000; | ||
| background-image: radial-gradient(#3391e880 2%, transparent 0%); | ||
| width: calc(100vw); | ||
| height: calc(100vh); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .formFields { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .formField { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| margin-bottom: 8%; | ||
| } | ||
|
|
||
| .formField:last-child { | ||
| margin-bottom: 3%; | ||
| } | ||
|
|
||
| .formLabel { | ||
| font-size: 1rem; | ||
| margin-bottom: 0.5rem; | ||
| color: #e4e4e4; | ||
| } | ||
|
|
||
| .formInput { | ||
| background: #230d0e; | ||
| border: none; | ||
| border-left: 1rem solid #56d1da80; | ||
| border-right: 1rem solid #56d1da80; | ||
| height: 2.5rem; | ||
| width: 100%; | ||
| width: 100%; | ||
| color: #a3a4a3; | ||
| padding: 0rem 1rem; | ||
| } | ||
|
|
||
| .resetFormContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| color: #242424; | ||
| font-family: "Space Grotesk", sans-serif; | ||
| padding: 2.5rem; | ||
| border: 1px solid #56d1da80; | ||
| margin: 1px; | ||
| } | ||
|
|
||
| .registerButton { | ||
| font-family: "Space Grotesk"; | ||
| background-color: transparent; | ||
| border: none; | ||
| /* background: url("../../assets/button-bg.svg"); */ | ||
| background-size: 100% 100%; | ||
| position: relative; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| margin-top: 1rem; | ||
| color: #4aff1c; | ||
| font-size: 1.1rem; | ||
| padding: 0.8rem 0.8rem; | ||
| font-weight: 600; | ||
| border: 2px solid #56d1da80; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| @media screen and (max-width: 600px) { | ||
| .resetFormContainer { | ||
| margin: 1.5rem; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: 400px) { | ||
| .resetFormContainer { | ||
| padding: 1rem; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.