From da2f4dba600ad58f0868535673262927469f33f6 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Wed, 22 Nov 2023 16:01:08 +0100
Subject: [PATCH] feat: implement back navigation on some of the auth flows,
 closes RX-13

---
 apps/client/src/pages/auth/backup-otp/page.tsx   | 14 +++++++++++---
 .../src/pages/auth/forgot-password/page.tsx      | 16 +++++++++++++---
 apps/client/src/pages/auth/verify-otp/page.tsx   |  2 +-
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/pages/auth/backup-otp/page.tsx b/apps/client/src/pages/auth/backup-otp/page.tsx
index bcc4ab59..1eff1d44 100644
--- 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
index 3f503320..a69adb46 100644
--- 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,6 +17,7 @@ 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";
@@ -23,6 +25,7 @@ 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
index 12bbf311..f6fa9c20 100644
--- 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">