File size: 4,536 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
import React from "react";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { Button, Group, Paper, Stack, TextInput, Text, Anchor, PasswordInput } from "@mantine/core";
import { toast } from "react-hot-toast";
import Layout from "src/layout/Layout";
import { supabase } from "src/lib/api/supabase";
function ResetPassword() {
const [loading, setLoading] = React.useState(false);
const [password, setPassword] = React.useState("");
const [password2, setPassword2] = React.useState("");
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
setLoading(true);
if (password !== password2) throw new Error("Passwords do not match");
const { error } = await supabase.auth.updateUser({ password });
if (error) throw new Error(error.message);
toast.success("Successfully updated password!");
setTimeout(() => window.location.assign("/sign-in"), 2000);
} catch (error) {
if (error instanceof Error) toast.error(error.message);
} finally {
setLoading(false);
}
};
return (
<Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
<Text size="lg" w={500} mb="lg">
Create New Password
</Text>
<form onSubmit={onSubmit}>
<Stack>
<PasswordInput
value={password}
onChange={e => setPassword(e.target.value)}
required
label="New Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
<PasswordInput
value={password2}
onChange={e => setPassword2(e.target.value)}
required
label="Validate Password"
radius="sm"
placeholder="∗∗∗∗∗∗∗∗∗∗∗"
style={{ color: "black" }}
/>
</Stack>
<Group justify="apart" mt="xl">
<Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
Reset Password
</Button>
</Group>
</form>
</Paper>
);
}
const ForgotPassword = () => {
const { query } = useRouter();
const [loading, setLoading] = React.useState(false);
const [email, setEmail] = React.useState("");
const [success, setSuccess] = React.useState(false);
const isPasswordReset = query?.type === "recovery" && !query?.error;
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
try {
e.preventDefault();
setLoading(true);
const { error } = await supabase.auth.resetPasswordForEmail(email);
if (error) throw new Error(error.message);
setSuccess(true);
} catch (error) {
if (error instanceof Error) toast.error(error.message);
console.error(error);
} finally {
setLoading(false);
}
};
return (
<Layout>
<Head>
<title>Reset Password - JSON Crack</title>
<meta name="robots" content="noindex,nofollow" />
</Head>
{isPasswordReset ? (
<ResetPassword />
) : (
<Paper mx="auto" mt={70} maw={400} p="lg" withBorder>
<Text size="lg" w={500} c="dark">
Reset Password
</Text>
<Paper pt="lg">
{success ? (
<Text>We've sent an email to you, please check your inbox.</Text>
) : (
<form onSubmit={onSubmit}>
<Stack>
<TextInput
type="email"
value={email}
onChange={e => setEmail(e.target.value)}
required
label="Email"
placeholder="hello@herowand.com"
radius="sm"
style={{ color: "black" }}
/>
</Stack>
<Group justify="apart" mt="xl">
<Button color="dark" type="submit" radius="sm" loading={loading} fullWidth>
Reset Password
</Button>
</Group>
<Stack mt="lg" align="center">
<Anchor component={Link} prefetch={false} href="/sign-in" c="dark" size="xs">
Don't have an account? Sign Up
</Anchor>
</Stack>
</form>
)}
</Paper>
</Paper>
)}
</Layout>
);
};
export default ForgotPassword;
|