Fix: activate, reset password and checkout pages not working properly

aelassas · Jan 6, 2025 · 2ca6cf0 · 2ca6cf0
1 parent a8ed7e5
commit 2ca6cf0
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 55 deletions.
diff --git a/frontend/src/assets/css/activate.css b/frontend/src/assets/css/activate.css
@@ -4,8 +4,9 @@ div.activate {
   flex-direction: row;
   flex: 1 0 auto;
   justify-content: center;
-  margin: 45px 0;
+  padding-top: 120px;
   transform: translate3d(0, 0, 0);
+  min-height: 100vh;
 }
 
 div.activate h1.activate-form-title {
@@ -17,10 +18,11 @@ div.resend {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 45px 0;
+  padding-top: 120px;
   transform: translate3d(0, 0, 0);
   flex: 1 0 auto;
   padding-bottom: 40px;
+  min-height: 100vh;
 }
 
 .activate-form h1,

diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
@@ -13,6 +13,11 @@ div.checkout .map {
   height: 340px;
 }
 
+div.checkout .payment-radio-disabled>*,
+div.checkout .payment-radio-disabled span.payment-info {
+  color: #919191 !important;
+}
+
 @media only screen and (width <=960px) {
   div.checkout {
     flex: 0 1 auto;

diff --git a/frontend/src/assets/css/reset-password.css b/frontend/src/assets/css/reset-password.css
@@ -5,28 +5,25 @@ div.reset-password {
   flex-direction: column;
   align-items: center;
   padding-bottom: 40px;
+
+  padding-top: 120px;
+  transform: translate3d(0, 0, 0);
+  min-height: 100vh;
 }
 
 div.reset-password h1.reset-password-form-title {
   text-align: center;
   margin-top: 0;
 }
 
-div.resend {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 40px;
-}
-
 .reset-password-form h1 {
   text-align: center;
   color: #232323;
 }
 
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   .reset-password-form {
     margin-top: 40px;
     width: 330px;
@@ -37,7 +34,7 @@ div.resend {
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
+@media only screen and (width >=960px) {
   .reset-password-form {
     margin-top: 40px;
     width: 450px;

diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx
@@ -16,13 +16,17 @@ import { strings as cpStrings } from '@/lang/change-password'
 import { strings as rpStrings } from '@/lang/reset-password'
 import { strings as mStrings } from '@/lang/master'
 import { strings } from '@/lang/activate'
+import { useUserContext, UserContextType } from '@/context/UserContext'
 import NoMatch from './NoMatch'
 import * as helper from '@/common/helper'
+import Footer from '@/components/Footer'
 
 import '@/assets/css/activate.css'
 
 const Activate = () => {
   const navigate = useNavigate()
+
+  const { setUser, setUserLoaded } = useUserContext() as UserContextType
   const [userId, setUserId] = useState('')
   const [email, setEmail] = useState('')
   const [token, setToken] = useState('')
@@ -74,6 +78,10 @@ const Activate = () => {
         const signInResult = await UserService.signin({ email, password })
 
         if (signInResult.status === 200) {
+          const user = await UserService.getUser(signInResult.data._id)
+          setUser(user)
+          setUserLoaded(true)
+
           const _status = await UserService.deleteTokens(userId)
 
           if (_status === 200) {
@@ -217,6 +225,8 @@ const Activate = () => {
         </div>
       )}
       {noMatch && <NoMatch hideHeader />}
+
+      {(resend || visible) && <Footer />}
     </Layout>
   )
 }

diff --git a/frontend/src/pages/Checkout.tsx b/frontend/src/pages/Checkout.tsx
@@ -827,6 +827,8 @@ const Checkout = () => {
                               <FormControlLabel
                                 value="payLater"
                                 control={<Radio />}
+                                disabled={!!clientSecret}
+                                className={clientSecret ? 'payment-radio-disabled' : ''}
                                 label={(
                                   <span className="payment-button">
                                     <span>{strings.PAY_LATER}</span>
@@ -837,6 +839,8 @@ const Checkout = () => {
                               <FormControlLabel
                                 value="payOnline"
                                 control={<Radio />}
+                                disabled={!!clientSecret}
+                                className={clientSecret ? 'payment-radio-disabled' : ''}
                                 label={(
                                   <span className="payment-button">
                                     <span>{strings.PAY_ONLINE}</span>

diff --git a/frontend/src/pages/ResetPassword.tsx b/frontend/src/pages/ResetPassword.tsx
@@ -14,14 +14,18 @@ import Layout from '@/components/Layout'
 import { strings as commonStrings } from '@/lang/common'
 import { strings as cpStrings } from '@/lang/change-password'
 import { strings as rpStrings } from '@/lang/reset-password'
+import { useUserContext, UserContextType } from '@/context/UserContext'
+import * as helper from '@/common/helper'
 import Error from './Error'
 import NoMatch from './NoMatch'
-import * as helper from '@/common/helper'
+import Footer from '@/components/Footer'
 
 import '@/assets/css/reset-password.css'
 
 const ResetPassword = () => {
   const navigate = useNavigate()
+
+  const { setUser, setUserLoaded } = useUserContext() as UserContextType
   const [userId, setUserId] = useState('')
   const [email, setEmail] = useState('')
   const [token, setToken] = useState('')
@@ -73,6 +77,10 @@ const ResetPassword = () => {
         const signInResult = await UserService.signin({ email, password })
 
         if (signInResult.status === 200) {
+          const user = await UserService.getUser(signInResult.data._id)
+          setUser(user)
+          setUserLoaded(true)
+
           const _status = await UserService.deleteTokens(userId)
 
           if (_status === 200) {
@@ -133,49 +141,53 @@ const ResetPassword = () => {
   return (
     <Layout onLoad={onLoad} strict={false}>
       {visible && (
-        <div className="reset-password">
-          <Paper className="reset-password-form" elevation={10}>
-            <h1>{rpStrings.RESET_PASSWORD_HEADING}</h1>
-            <form onSubmit={handleSubmit}>
-              <FormControl fullWidth margin="dense">
-                <InputLabel className="required" error={passwordError}>
-                  {cpStrings.NEW_PASSWORD}
-                </InputLabel>
-                <Input id="password-new" onChange={handleNewPasswordChange} type="password" value={password} error={passwordError} required />
-                <FormHelperText error={passwordError}>{(passwordError && cpStrings.NEW_PASSWORD_ERROR) || ''}</FormHelperText>
-              </FormControl>
-              <FormControl fullWidth margin="dense" error={confirmPasswordError}>
-                <InputLabel error={confirmPasswordError} className="required">
-                  {commonStrings.CONFIRM_PASSWORD}
-                </InputLabel>
-                <Input
-                  id="password-confirm"
-                  onChange={handleConfirmPasswordChange}
-                  onKeyDown={handleConfirmPasswordKeyDown}
-                  error={confirmPasswordError || passwordLengthError}
-                  type="password"
-                  value={confirmPassword}
-                  required
-                />
-                <FormHelperText error={confirmPasswordError || passwordLengthError}>
-                  {
-                    (confirmPasswordError && commonStrings.PASSWORDS_DONT_MATCH)
-                    || (passwordLengthError && commonStrings.PASSWORD_ERROR)
-                    || ''
-                  }
-                </FormHelperText>
-              </FormControl>
-              <div className="buttons">
-                <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" variant="contained" disableElevation>
-                  {commonStrings.UPDATE}
-                </Button>
-                <Button variant="outlined" color="primary" className="btn-margin-bottom" onClick={() => navigate('/')}>
-                  {commonStrings.CANCEL}
-                </Button>
-              </div>
-            </form>
-          </Paper>
-        </div>
+        <>
+          <div className="reset-password">
+            <Paper className="reset-password-form" elevation={10}>
+              <h1>{rpStrings.RESET_PASSWORD_HEADING}</h1>
+              <form onSubmit={handleSubmit}>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel className="required" error={passwordError}>
+                    {cpStrings.NEW_PASSWORD}
+                  </InputLabel>
+                  <Input id="password-new" onChange={handleNewPasswordChange} type="password" value={password} error={passwordError} required />
+                  <FormHelperText error={passwordError}>{(passwordError && cpStrings.NEW_PASSWORD_ERROR) || ''}</FormHelperText>
+                </FormControl>
+                <FormControl fullWidth margin="dense" error={confirmPasswordError}>
+                  <InputLabel error={confirmPasswordError} className="required">
+                    {commonStrings.CONFIRM_PASSWORD}
+                  </InputLabel>
+                  <Input
+                    id="password-confirm"
+                    onChange={handleConfirmPasswordChange}
+                    onKeyDown={handleConfirmPasswordKeyDown}
+                    error={confirmPasswordError || passwordLengthError}
+                    type="password"
+                    value={confirmPassword}
+                    required
+                  />
+                  <FormHelperText error={confirmPasswordError || passwordLengthError}>
+                    {
+                      (confirmPasswordError && commonStrings.PASSWORDS_DONT_MATCH)
+                      || (passwordLengthError && commonStrings.PASSWORD_ERROR)
+                      || ''
+                    }
+                  </FormHelperText>
+                </FormControl>
+                <div className="buttons">
+                  <Button type="submit" className="btn-primary btn-margin btn-margin-bottom" variant="contained" disableElevation>
+                    {commonStrings.SAVE}
+                  </Button>
+                  <Button variant="outlined" color="primary" className="btn-margin-bottom" onClick={() => navigate('/')}>
+                    {commonStrings.CANCEL}
+                  </Button>
+                </div>
+              </form>
+            </Paper>
+          </div>
+
+          <Footer />
+        </>
       )}
       {error && <Error />}
       {noMatch && <NoMatch hideHeader />}