feat: implement back navigation on some of the auth flows, closes RX-13

AmruthPillai · Nov 22, 2023 · da2f4db · da2f4db
1 parent bc5b4cb
commit da2f4db
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/apps/client/src/pages/auth/backup-otp/page.tsx b/apps/client/src/pages/auth/backup-otp/page.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
+import { ArrowLeft } from "@phosphor-icons/react";
 import { twoFactorBackupSchema } from "@reactive-resume/dto";
 import { usePasswordToggle } from "@reactive-resume/hooks";
 import {
@@ -85,9 +86,16 @@ export const BackupOtpPage = () => {
               )}
             />
 
-            <Button type="submit" disabled={loading} className="mt-4 w-full">
-              {t`Sign in`}
-            </Button>
+            <div className="mt-4 flex items-center gap-x-2">
+              <Button variant="link" className="px-5" onClick={() => navigate(-1)}>
+                <ArrowLeft size={14} className="mr-2" />
+                <span>{t`Back`}</span>
+              </Button>
+
+              <Button type="submit" disabled={loading} className="flex-1">
+                {t`Sign in`}
+              </Button>
+            </div>
           </form>
         </Form>
       </div>

diff --git a/apps/client/src/pages/auth/forgot-password/page.tsx b/apps/client/src/pages/auth/forgot-password/page.tsx
@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { t } from "@lingui/macro";
+import { ArrowLeft } from "@phosphor-icons/react";
 import { forgotPasswordSchema } from "@reactive-resume/dto";
 import {
   Alert,
@@ -16,13 +17,15 @@ import {
 import { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 import { z } from "zod";
 
 import { useForgotPassword } from "@/client/services/auth";
 
 type FormValues = z.infer<typeof forgotPasswordSchema>;
 
 export const ForgotPasswordPage = () => {
+  const navigate = useNavigate();
   const [submitted, setSubmitted] = useState<boolean>(false);
   const { forgotPassword, loading } = useForgotPassword();
 
@@ -85,9 +88,16 @@ export const ForgotPasswordPage = () => {
               )}
             />
 
-            <Button type="submit" disabled={loading} className="mt-4 w-full">
-              {t`Send Email`}
-            </Button>
+            <div className="mt-4 flex items-center gap-x-2">
+              <Button variant="link" className="px-5" onClick={() => navigate(-1)}>
+                <ArrowLeft size={14} className="mr-2" />
+                <span>{t`Back`}</span>
+              </Button>
+
+              <Button type="submit" disabled={loading} className="w-full">
+                {t`Send Email`}
+              </Button>
+            </div>
           </form>
         </Form>
       </div>

diff --git a/apps/client/src/pages/auth/verify-otp/page.tsx b/apps/client/src/pages/auth/verify-otp/page.tsx
@@ -56,7 +56,7 @@ export const VerifyOtpPage = () => {
       <div className="space-y-1.5">
         <h2 className="text-2xl font-semibold tracking-tight">{t`Two-Factor Authentication`}</h2>
         <h6>
-          <span className="opacity-75">
+          <span className="leading-relaxed opacity-60">
             {t`Enter the one-time password provided by your authenticator app below.`}
           </span>
           <Button asChild variant="link" className="px-1.5">