Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 00:32:35 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-22 16:01:08 +01:00
parent bc5b4cb9ad
commit da2f4dba60
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/client/src/pages/auth/backup-otp/page.tsx
View File

@ -1,5 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { ArrowLeft } from "@phosphor-icons/react";
import { twoFactorBackupSchema } from "@reactive-resume/dto"; import { twoFactorBackupSchema } from "@reactive-resume/dto";
import { usePasswordToggle } from "@reactive-resume/hooks"; import { usePasswordToggle } from "@reactive-resume/hooks";
import { import {
@ -85,9 +86,16 @@ export const BackupOtpPage = () => {
)} )}
/> />
<Button type="submit" disabled={loading} className="mt-4 w-full"> <div className="mt-4 flex items-center gap-x-2">
{t`Sign in`} <Button variant="link" className="px-5" onClick={() => navigate(-1)}>
</Button> <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>
</Form> </Form>
</div> </div>

16
apps/client/src/pages/auth/forgot-password/page.tsx
View File

@ -1,5 +1,6 @@
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { ArrowLeft } from "@phosphor-icons/react";
import { forgotPasswordSchema } from "@reactive-resume/dto"; import { forgotPasswordSchema } from "@reactive-resume/dto";
import { import {
Alert, Alert,
@ -16,6 +17,7 @@ import {
import { useState } from "react"; import { useState } from "react";
import { Helmet } from "react-helmet-async"; import { Helmet } from "react-helmet-async";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { z } from "zod"; import { z } from "zod";
import { useForgotPassword } from "@/client/services/auth"; import { useForgotPassword } from "@/client/services/auth";
@ -23,6 +25,7 @@ import { useForgotPassword } from "@/client/services/auth";
type FormValues = z.infer<typeof forgotPasswordSchema>; type FormValues = z.infer<typeof forgotPasswordSchema>;
export const ForgotPasswordPage = () => { export const ForgotPasswordPage = () => {
const navigate = useNavigate();
const [submitted, setSubmitted] = useState<boolean>(false); const [submitted, setSubmitted] = useState<boolean>(false);
const { forgotPassword, loading } = useForgotPassword(); const { forgotPassword, loading } = useForgotPassword();
@ -85,9 +88,16 @@ export const ForgotPasswordPage = () => {
)} )}
/> />
<Button type="submit" disabled={loading} className="mt-4 w-full"> <div className="mt-4 flex items-center gap-x-2">
{t`Send Email`} <Button variant="link" className="px-5" onClick={() => navigate(-1)}>
</Button> <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>
</Form> </Form>
</div> </div>

2
apps/client/src/pages/auth/verify-otp/page.tsx
View File

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