merged "AuthSubmitButton" with the "SubmitButton" + updated the other pages that needed this change

This commit is contained in:
daniel31x13
2023-10-23 01:20:08 -04:00
parent b3295e136d
commit ec4bfa6ba9
6 changed files with 217 additions and 234 deletions
+46 -41
View File
@@ -3,7 +3,7 @@ import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Link from "next/link";
import { useState } from "react";
import { FormEvent, useState } from "react";
import { toast } from "react-hot-toast";
interface FormData {
@@ -17,7 +17,9 @@ export default function Forgot() {
email: "",
});
async function loginUser() {
async function sendConfirmation(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
if (form.email !== "") {
setSubmitLoader(true);
@@ -40,49 +42,52 @@ export default function Forgot() {
return (
<CenteredForm>
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-center text-black dark:text-white font-bold">
Password Recovery
</p>
<div>
<p className="text-md text-black dark:text-white">
Enter your Email so we can send you a link to recover your account.
Make sure to change your password in the profile settings
afterwards.
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
You wont get logged in if you haven&apos;t created an account yet.
</p>
</div>
<div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Email
<form onSubmit={sendConfirmation}>
<div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
<p className="text-2xl text-center text-black dark:text-white font-bold">
Password Recovery
</p>
<div>
<p className="text-md text-black dark:text-white">
Enter your Email so we can send you a link to recover your
account. Make sure to change your password in the profile settings
afterwards.
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
You wont get logged in if you haven&apos;t created an account yet.
</p>
</div>
<div>
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
Email
</p>
<TextInput
type="email"
placeholder="johnny@example.com"
value={form.email}
className="bg-white"
onChange={(e) => setForm({ ...form, email: e.target.value })}
<TextInput
autoFocus
type="email"
placeholder="johnny@example.com"
value={form.email}
className="bg-white"
onChange={(e) => setForm({ ...form, email: e.target.value })}
/>
</div>
<SubmitButton
type="submit"
label="Send Login Link"
className="mt-2 w-full text-center"
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<Link
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Go back
</Link>
</div>
</div>
<SubmitButton
onClick={loginUser}
label="Send Login Link"
className="mt-2 w-full text-center"
loading={submitLoader}
/>
<div className="flex items-baseline gap-1 justify-center">
<Link
href={"/login"}
className="block text-black dark:text-white font-bold"
>
Go back
</Link>
</div>
</div>
</form>
</CenteredForm>
);
}