Use auth paths that match existing website

- /account -> /users/edit - /login -> /users/sign_in - /signup -> /users/sign_up - /password -> /users/password - /password/reset -> /users/password/new - /password/set -> /users/password/edit (API update required) - /confirmation/new -> /users/confirmation/new - /confirmation -> /users/confirmation (API update required) See #246.
falling-fruit · Dec 27, 2022 · 57c88bf · 57c88bf
1 parent 52041c5
commit 57c88bf
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 43 deletions.
diff --git a/src/components/auth/AccountPage.js b/src/components/auth/AccountPage.js
@@ -55,7 +55,7 @@ const AccountPage = () => {
   }, [])
 
   if (!isLoading && !isLoggedIn) {
-    return <Redirect to={getPathWithMapState('/login')} />
+    return <Redirect to={getPathWithMapState('/users/sign_in')} />
   }
 
   const handleSubmit = async (values) => {

diff --git a/src/components/auth/ConfirmationPage.js b/src/components/auth/ConfirmationPage.js
@@ -13,15 +13,15 @@ const ConfirmationPage = () => {
 
       if (!token) {
         toast.error("Confirmation token can't be blank", { autoClose: 5000 })
-        history.push('/confirmation/new')
+        history.push('/users/confirmation/new')
       } else {
         try {
           const { email } = await confirmUser(token)
           toast.success('Your email has been confirmed.')
-          history.push({ pathname: '/login', state: { email } })
+          history.push({ pathname: '/users/sign_in', state: { email } })
         } catch (e) {
           toast.error(e.response?.data.error, { autoClose: 5000 })
-          history.push('/confirmation/new')
+          history.push('/users/confirmation/new')
         }
       }
     }

diff --git a/src/components/auth/ConfirmationResendPage.js b/src/components/auth/ConfirmationResendPage.js
@@ -27,7 +27,7 @@ const ConfirmationResendPage = () => {
         'You will receive an email with instructions for how to confirm your email address in a few minutes',
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     } catch (e) {
       toast.error(e.response?.data.error)
       console.error(e.response)
@@ -40,9 +40,11 @@ const ConfirmationResendPage = () => {
       <h1>Resend confirmation instructions</h1>
       <EmailForm onSubmit={handleSubmit} recaptchaRef={recaptchaRef} />
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

diff --git a/src/components/auth/LoginPage.js b/src/components/auth/LoginPage.js
@@ -75,9 +75,11 @@ const LoginPage = () => {
           )}
         </Formik>
         <Column>
-          <Link to="/signup">Sign up</Link>
-          <Link to="/password/reset">Reset your password</Link>
-          <Link to="/confirmation/new">Resend confirmation instructions</Link>
+          <Link to="/users/sign_up">Sign up</Link>
+          <Link to="/users/password/new">Reset your password</Link>
+          <Link to="/users/confirmation/new">
+            Resend confirmation instructions
+          </Link>
         </Column>
       </PageTemplate>
     </PageScrollWrapper>

diff --git a/src/components/auth/PasswordResetPage.js b/src/components/auth/PasswordResetPage.js
@@ -27,7 +27,7 @@ const PasswordResetPage = () => {
         'You will receive an email with instructions on how to reset your password in a few minutes',
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     } catch (e) {
       toast.error('Email not found')
       console.error(e.response)
@@ -40,9 +40,11 @@ const PasswordResetPage = () => {
       <h1>Send password reset instructions</h1>
       <EmailForm onSubmit={handleSubmit} recaptchaRef={recaptchaRef} />
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

diff --git a/src/components/auth/PasswordSetPage.js b/src/components/auth/PasswordSetPage.js
@@ -27,7 +27,7 @@ const PasswordSetPage = () => {
         "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided.",
         { autoClose: 5000 },
       )
-      history.push('/login')
+      history.push('/users/sign_in')
     }
   }, [history])
 
@@ -44,11 +44,11 @@ const PasswordSetPage = () => {
       toast.success('Your password has been changed successfully.', {
         autoClose: 5000,
       })
-      history.push({ pathname: '/login', state: { email } })
+      history.push({ pathname: '/users/sign_in', state: { email } })
     } catch (e) {
       toast.error('Invalid password reset link')
       console.error(e.response)
-      history.push('/login')
+      history.push('/users/sign_in')
     }
   }
 
@@ -91,9 +91,11 @@ const PasswordSetPage = () => {
         )}
       </Formik>
       <Column>
-        <Link to="/login">Login</Link>
-        <Link to="/signup">Sign up</Link>
-        <Link to="/confirmation/new">Resend confirmation instructions</Link>
+        <Link to="/users/sign_in">Login</Link>
+        <Link to="/users/sign_up">Sign up</Link>
+        <Link to="/users/confirmation/new">
+          Resend confirmation instructions
+        </Link>
       </Column>
     </PageTemplate>
   )

diff --git a/src/components/auth/SignupPage.js b/src/components/auth/SignupPage.js
@@ -53,7 +53,7 @@ const SignupPage = () => {
       <PageTemplate>
         <h1>Sign up</h1>
         <LoginNotice>
-          Have an account? <Link to="/login">Login</Link>
+          Have an account? <Link to="/users/sign_in">Login</Link>
         </LoginNotice>
 
         <Formik

diff --git a/src/components/auth/authRoutes.js b/src/components/auth/authRoutes.js
@@ -10,31 +10,31 @@ import SignupPage from './SignupPage'
 
 const pages = [
   {
-    path: '/account',
+    path: '/users/edit',
     component: AccountPage,
   },
   {
-    path: '/login',
+    path: '/users/sign_in',
     component: LoginPage,
   },
   {
-    path: '/signup',
+    path: '/users/sign_up',
     component: SignupPage,
   },
   {
-    path: '/password/reset',
+    path: '/users/password/new',
     component: PasswordResetPage,
   },
   {
-    path: '/password/set',
+    path: '/users/password/edit',
     component: PasswordSetPage,
   },
   {
-    path: '/confirmation/new',
+    path: '/users/confirmation/new',
     component: ConfirmationResendPage,
   },
   {
-    path: '/confirmation',
+    path: '/users/confirmation',
     component: ConfirmationPage,
   },
 ]

diff --git a/src/components/desktop/Header.js b/src/components/desktop/Header.js
@@ -190,7 +190,7 @@ const Header = () => {
     matchPath(useLocation().pathname, {
       path: aboutRoutes.map((route) => route.props.path).flat(),
     }) !== null
-  const isAccountPage = useRouteMatch('/account') !== null
+  const isAccountPage = useRouteMatch('/users/edit') !== null
 
   return (
     <StyledHeader>
@@ -232,7 +232,7 @@ const Header = () => {
                 }
                 isMatch={isAccountPage}
               >
-                <NavLink to="/account" activeClassName="active">
+                <NavLink to="/users/edit" activeClassName="active">
                   {t('My Account')}
                 </NavLink>
                 <ResetButton onClick={handleLogout}>Logout</ResetButton>
@@ -241,12 +241,12 @@ const Header = () => {
           ) : (
             <>
               <li>
-                <NavLink to="/login" activeClassName="active">
+                <NavLink to="/users/sign_in" activeClassName="active">
                   {t('Login')}
                 </NavLink>
               </li>
               <li>
-                <NavLink to="/signup" activeClassName="active">
+                <NavLink to="/users/sign_up" activeClassName="active">
                   <SignupButton>{t('Sign up')}</SignupButton>
                 </NavLink>
               </li>

diff --git a/src/components/mobile/MobileLayout.js b/src/components/mobile/MobileLayout.js
@@ -41,7 +41,7 @@ const MobileLayout = () => {
   ))
 
   if (
-    ['/list', '/settings', '/account'].some((path) =>
+    ['/list', '/settings', '/users/edit'].some((path) =>
       matchPath(pathname, { path, exact: false, strict: false }),
     )
   ) {
@@ -96,7 +96,7 @@ const MobileLayout = () => {
               <Route path="/settings">
                 <SettingsPage />
               </Route>
-              <Route path="/account">
+              <Route path="/users/edit">
                 <AccountPage />
               </Route>
             </Switch>

diff --git a/src/components/mobile/TopBarSwitch.js b/src/components/mobile/TopBarSwitch.js
@@ -13,12 +13,12 @@ const TopBarSwitch = () => {
       <Route
         path={[
           '/settings',
-          '/account',
+          '/users/edit',
           '/about',
-          '/signup',
-          '/login',
-          '/password',
-          '/confirmation',
+          '/users/sign_up',
+          '/users/sign_in',
+          '/users/password',
+          '/users/confirmation',
         ]}
       ></Route>
       <Route

diff --git a/src/components/settings/SettingsPage.js b/src/components/settings/SettingsPage.js
@@ -106,14 +106,19 @@ const SettingsPage = ({ desktop }) => {
             {user ? (
               <>
                 <p>Logged in as {user.name || user.email}</p>
-                <Button secondary onClick={() => history.push('/account')}>
+                <Button secondary onClick={() => history.push('/users/edit')}>
                   View Account
                 </Button>
               </>
             ) : (
               <>
-                <Button onClick={() => history.push('/login')}>Login</Button>
-                <Button secondary onClick={() => history.push('/signup')}>
+                <Button onClick={() => history.push('/users/sign_in')}>
+                  Login
+                </Button>
+                <Button
+                  secondary
+                  onClick={() => history.push('/users/sign_up')}
+                >
                   Sign up
                 </Button>
               </>