fix: issue where error is displayed after resetting password

2anki · Mar 17, 2024 · f2f3881 · f2f3881
1 parent bc21347
commit f2f3881
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 60 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -24,6 +24,7 @@ const SearchPage = lazy(() => import('./pages/SearchPage'));
 const LoginPage = lazy(() => import('./pages/LoginPage'));
 const NewPasswordPage = lazy(() => import('./pages/NewPasswordPage'));
 const DownloadsPage = lazy(() => import('./pages/DownloadsPage'));
+const ForgotPasswordPage = lazy(() => import('./pages/ForgotPasswordPage'));
 
 function App() {
   const [cookies, setCookie] = useCookies(['token']);
@@ -76,6 +77,10 @@ function App() {
                 path="/login"
                 element={<LoginPage setErrorMessage={handledError} />}
               />
+              <Route
+                path="/forgot"
+                element={<ForgotPasswordPage setErrorMessage={handledError} />}
+              />
               <Route
                 path="/users/r/:id"
                 element={<NewPasswordPage setErrorMessage={handledError} />}

diff --git a/src/components/forms/ForgotPasswordForm/ForgotPassword.tsx b/src/components/forms/ForgotPasswordForm/ForgotPassword.tsx
@@ -0,0 +1,23 @@
+interface ForgotPasswordProp {
+  didReset: boolean;
+  loading: boolean;
+}
+
+export function ForgotPassword({ didReset, loading }: ForgotPasswordProp) {
+  if (didReset) {
+    return <p>You should receive an email if your account exists.</p>;
+  }
+
+  return <div className="field">
+    <div className="control" style={{ width: '100%' }}>
+      <button
+        type="submit"
+        className="button is-link is-medium"
+        style={{ width: '100%' }}
+        disabled={loading}
+      >
+        Reset my password
+      </button>
+    </div>
+  </div>;
+}
diff --git a/src/components/forms/ForgotPasswordForm.tsx → ...ForgotPasswordForm/ForgotPasswordForm.tsx b/src/components/forms/ForgotPasswordForm.tsx → ...ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -1,12 +1,9 @@
-import styled from 'styled-components';
 import { SyntheticEvent, useState } from 'react';
-import Backend from '../../lib/backend';
-import { ErrorHandlerType } from '../errors/helpers/getErrorMessage';
 
-const FormContainer = styled.div`
-  max-width: 720px;
-  margin: 0 auto;
-`;
+import Backend from '../../../lib/backend';
+import { ErrorHandlerType } from '../../errors/helpers/getErrorMessage';
+import { ForgotPassword } from './ForgotPassword';
+import { FormContainer } from './styled';
 
 interface ForgotPasswordProps {
   setError: ErrorHandlerType;
@@ -19,7 +16,6 @@ function ForgotPasswordForm({ setError }: ForgotPasswordProps) {
 
   const handleSubmit = async (event: SyntheticEvent) => {
     event.preventDefault();
-    setError(null);
     setLoading(true);
     setDidReset(false);
 
@@ -61,23 +57,7 @@ function ForgotPasswordForm({ setError }: ForgotPasswordProps) {
                     />
                   </label>
                 </div>
-                {!didReset && (
-                  <div className="field">
-                    <div className="control" style={{ width: '100%' }}>
-                      <button
-                        type="submit"
-                        className="button is-link is-medium"
-                        style={{ width: '100%' }}
-                        disabled={loading}
-                      >
-                        Reset my password
-                      </button>
-                    </div>
-                  </div>
-                )}
-                {didReset && (
-                  <p>You should receive an email if your account exists.</p>
-                )}
+                <ForgotPassword didReset={didReset} loading={loading} />
               </form>
             </div>
           </div>

diff --git a/src/components/forms/ForgotPasswordForm/styled.tsx b/src/components/forms/ForgotPasswordForm/styled.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const FormContainer = styled.div`
+    max-width: 720px;
+    margin: 0 auto;
+`;
+
diff --git a/src/components/forms/LoginForm/index.tsx b/src/components/forms/LoginForm/index.tsx
@@ -5,11 +5,10 @@ import { useHandleLoginSubmit } from './helpers/useHandleLoginSubmit';
 import { FormContainer, SubmitButton } from './styled';
 
 interface LoginFormProps {
-  onForgotPassword: () => void;
   onError: ErrorHandlerType;
 }
 
-function LoginForm({ onForgotPassword, onError }: LoginFormProps) {
+function LoginForm({ onError }: LoginFormProps) {
   const { email, password, loading, onSubmit, setEmail, setPassword } =
     useHandleLoginSubmit(onError);
 
@@ -60,21 +59,9 @@ function LoginForm({ onForgotPassword, onError }: LoginFormProps) {
                   </label>
                 </div>
 
-                <div
-                  tabIndex={-9}
-                  role="button"
-                  className="field"
-                  onClick={() => onForgotPassword()}
-                  onKeyDown={(event) => {
-                    if (event.key === 'F9') {
-                      onForgotPassword();
-                    }
-                  }}
-                >
-                  <a rel="noreferrer" href="#forgot">
-                    I forgot my password
-                  </a>
-                </div>
+                <a rel="noreferrer" href="/forgot">
+                  I forgot my password
+                </a>
 
                 <div className="field">
                   <div className="control">

diff --git a/src/components/forms/NewPasswordForm.tsx b/src/components/forms/NewPasswordForm.tsx
@@ -4,8 +4,8 @@ import Backend from '../../lib/backend';
 import { ErrorHandlerType } from '../errors/helpers/getErrorMessage';
 
 const FormContainer = styled.div`
-  max-width: 720px;
-  margin: 0 auto;
+    max-width: 720px;
+    margin: 0 auto;
 `;
 
 interface Props {
@@ -22,7 +22,6 @@ function NewPasswordForm({ setErrorMessage }: Props) {
 
   const handleSubmit = async (event: SyntheticEvent) => {
     event.preventDefault();
-    setErrorMessage('');
     setLoading(true);
 
     try {

diff --git a/src/components/forms/RegisterForm.tsx b/src/components/forms/RegisterForm.tsx
@@ -5,8 +5,8 @@ import Backend from '../../lib/backend';
 import { ErrorHandlerType } from '../errors/helpers/getErrorMessage';
 
 const FormContainer = styled.div`
-  max-width: 720px;
-  margin: 0 auto;
+    max-width: 720px;
+    margin: 0 auto;
 `;
 
 interface Props {
@@ -31,7 +31,6 @@ function RegisterForm({ setErrorMessage }: Props) {
 
   const handleSubmit = async (event: SyntheticEvent) => {
     event.preventDefault();
-    setErrorMessage('');
     setLoading(true);
 
     try {

diff --git a/src/components/shared/canShowNavbar.ts b/src/components/shared/canShowNavbar.ts
@@ -1,5 +1,7 @@
 const isLoginPage = (path: string) => path.includes('/login');
+const isForgotPasswordPage = (path: string) => path.includes('/forgot');
+
 export const isSimplePage = () => window.location.pathname.endsWith('simple');
 
 export const canShowNavbar = (path: string) =>
-  !isLoginPage(path) && !isSimplePage();
+  !isLoginPage(path) && !isSimplePage() && !isForgotPasswordPage(path);
diff --git a/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx b/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx
@@ -0,0 +1,24 @@
+import ForgotPasswordForm from '../../components/forms/ForgotPasswordForm/ForgotPasswordForm';
+import NavButtonCTA from '../../components/buttons/NavButtonCTA';
+import { Container } from '../../components/styled';
+import TopSection from './TopSection';
+import { ErrorHandlerType } from '../../components/errors/helpers/getErrorMessage';
+
+interface Props {
+  setErrorMessage: ErrorHandlerType;
+}
+
+export function ForgotPasswordPage({ setErrorMessage }: Props) {
+  const onClickRegister = () => {
+    window.location.href = '/register';
+  };
+  return (
+    <Container>
+      <TopSection onClick={onClickRegister}>
+        Don&apos;t have an account?
+        <NavButtonCTA href="/register">Register</NavButtonCTA>
+      </TopSection>
+      <ForgotPasswordForm setError={setErrorMessage} />
+    </Container>
+  );
+}
diff --git a/src/pages/ForgotPasswordPage/TopSection.tsx b/src/pages/ForgotPasswordPage/TopSection.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const TopSection = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  grid-gap: 1rem;
+  padding: 1rem;
+`;
+
+export default TopSection;
diff --git a/src/pages/ForgotPasswordPage/index.tsx b/src/pages/ForgotPasswordPage/index.tsx
@@ -0,0 +1,3 @@
+import { ForgotPasswordPage } from './ForgotPasswordPage';
+
+export default ForgotPasswordPage;
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
@@ -1,6 +1,4 @@
-import { useState } from 'react';
 import LoginForm from '../../components/forms/LoginForm';
-import ForgotPasswordForm from '../../components/forms/ForgotPasswordForm';
 import NavButtonCTA from '../../components/buttons/NavButtonCTA';
 import { Container } from '../../components/styled';
 import TopSection from './TopSection';
@@ -11,24 +9,16 @@ interface Props {
 }
 
 export function LoginPage({ setErrorMessage }: Props) {
-  const [isForgot, setIsForgot] = useState(window.location.hash === '#forgot');
   const onClickRegister = () => {
     window.location.href = '/register';
   };
-  const login = (
-    <LoginForm
-      onForgotPassword={() => setIsForgot(true)}
-      onError={setErrorMessage}
-    />
-  );
   return (
     <Container>
       <TopSection onClick={onClickRegister}>
         Don&apos;t have an account?
         <NavButtonCTA href="/register">Register</NavButtonCTA>
       </TopSection>
-      {!isForgot && login}
-      {isForgot && <ForgotPasswordForm setError={setErrorMessage} />}
+      <LoginForm onError={setErrorMessage} />
     </Container>
   );
 }