Skip to content

Commit

Permalink
Updating
Browse files Browse the repository at this point in the history
  • Loading branch information
iamhectorsosa committed Mar 14, 2024
1 parent d986cb9 commit 14c0576
Show file tree
Hide file tree
Showing 9 changed files with 394 additions and 16 deletions.
23 changes: 23 additions & 0 deletions apps/next/app/login/reset-password/new/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { NewResetPasswordForm } from "@/components/user/new-reset-password-form";
import { useSupabaseServer } from "@/modules/utils/server";
import { cookies } from "next/headers";

import { redirect } from "next/navigation";

export default async function Page() {
const supabase = useSupabaseServer({ cookies });

const {
data: { user },
} = await supabase.auth.getUser();

if (!user) {
redirect("/login");
}

return (
<div className="min-h-dvh grid items-center">
<NewResetPasswordForm />
</div>
);
}
23 changes: 23 additions & 0 deletions apps/next/app/login/reset-password/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ResetPasswordForm } from "@/components/user/reset-password-form";
import { useSupabaseServer } from "@/modules/utils/server";
import { cookies } from "next/headers";

import { redirect } from "next/navigation";

export default async function Page() {
const supabase = useSupabaseServer({ cookies });

const {
data: { user },
} = await supabase.auth.getUser();

if (user) {
redirect("/settings");
}

return (
<div className="min-h-dvh grid items-center">
<ResetPasswordForm />
</div>
);
}
8 changes: 4 additions & 4 deletions apps/next/components/user/account-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,16 +165,16 @@ const AccountFormComponent: React.FC<{
</AlertDescription>
</Alert>
)}
<footer className="flex justify-end">
<footer className="flex justify-end space-x-2">
<Button asChild variant="link">
<Link href="/settings/profile">Profile Settings</Link>
</Button>
<Button type="submit" disabled={isPending}>
{isPending && (
<CircleIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Update Settings
</Button>
<Button asChild variant="link">
<Link href="/settings/profile">Profile Settings</Link>
</Button>
</footer>
</form>
</Form>
Expand Down
17 changes: 13 additions & 4 deletions apps/next/components/user/login-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
Expand Down Expand Up @@ -128,6 +129,14 @@ const LoginFormComponent: React.FC<{
<FormControl>
<Input type="password" placeholder="Password" {...field} />
</FormControl>
<FormDescription className="pt-1">
<Link
className="hover:underline underline-offset-4"
href="/login/reset-password"
>
Forgot password?
</Link>
</FormDescription>
<FormMessage />
</FormItem>
)}
Expand All @@ -141,16 +150,16 @@ const LoginFormComponent: React.FC<{
</AlertDescription>
</Alert>
)}
<footer className="flex justify-end">
<footer className="flex justify-end space-x-2">
<Button asChild variant="link">
<Link href="/register">Create new account</Link>
</Button>
<Button type="submit" disabled={isPending}>
{isPending && (
<CircleIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Sign in
</Button>
<Button asChild variant="link">
<Link href="/register">Create new account</Link>
</Button>
</footer>
</form>
</Form>
Expand Down
156 changes: 156 additions & 0 deletions apps/next/components/user/new-reset-password-form.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
"use client";

import * as React from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { CircleIcon, CrossCircledIcon } from "@radix-ui/react-icons";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useRouter } from "next/navigation";
import { useUpdateUser } from "@/modules/user/auth";
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

export const NewResetPasswordForm: React.FC = () => {
const router = useRouter();

// #region useUpdateUser
const {
mutate: updateUser,
isPending,
isError,
error,
} = useUpdateUser({
onSuccess: () => {
router.push("/settings");
},
onError: (error) => {
if (error instanceof Error) {
console.error(error.message);
}
},
});
// #endregion useUpdateUser

return (
<NewResetPasswordFormComponent
updateUser={updateUser}
isPending={isPending}
isError={isError}
errorMessage={error?.message}
/>
);
};

const FormSchema = z.object({
password: z.string().min(5, { message: "Must be 5 or more characters long" }),
});

const NewResetPasswordFormComponent: React.FC<{
updateUser: ({ password }: { password: string }) => void;
isPending: boolean;
isError: boolean;
errorMessage?: string;
}> = ({ updateUser, isPending, isError, errorMessage }) => {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
password: "",
},
});

return (
<div className="space-y-6">
<header className="space-y-2">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/login">Login</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/login/reset-password">Reset Password</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href="/login/reset-password/new">New Password</Link>
</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<h2 className="font-semibold text-4xl">New Password</h2>
<p>Please fill out the form below</p>
</header>
<Form {...form}>
<form
onSubmit={form.handleSubmit(({ password }) => {
updateUser({ password });
})}
className="space-y-6"
>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input type="password" placeholder="Password" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{isError && (
<Alert variant="destructive">
<CrossCircledIcon className="h-4 w-4" />
<AlertTitle>Something went wrong!</AlertTitle>
<AlertDescription>
{errorMessage ?? "Unknown error"}
</AlertDescription>
</Alert>
)}
<footer className="flex justify-end space-x-2">
<Button asChild variant="link">
<Link href="/login">Back to Login</Link>
</Button>
<Button type="submit" disabled={isPending}>
{isPending && (
<CircleIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Set new password
</Button>
</footer>
</form>
</Form>
</div>
);
};
8 changes: 4 additions & 4 deletions apps/next/components/user/profile-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -255,16 +255,16 @@ const ProfileFormComponent: React.FC<{
</AlertDescription>
</Alert>
)}
<footer className="flex justify-end">
<footer className="flex justify-end space-x-2">
<Button asChild variant="link">
<Link href="/settings/account">Account Settings</Link>
</Button>
<Button type="submit" disabled={isPending}>
{isPending && (
<CircleIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Update Settings
</Button>
<Button asChild variant="link">
<Link href="/settings/account">Account Settings</Link>
</Button>
</footer>
</form>
</Form>
Expand Down
8 changes: 4 additions & 4 deletions apps/next/components/user/register-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -144,16 +144,16 @@ const RegisterFormComponent: React.FC<{
</AlertDescription>
</Alert>
)}
<footer className="flex justify-end">
<footer className="flex justify-end space-x-2">
<Button asChild variant="link">
<Link href="/login">I already have an account</Link>
</Button>
<Button type="submit" disabled={isPending}>
{isPending && (
<CircleIcon className="mr-2 h-4 w-4 animate-spin" />
)}
Create account
</Button>
<Button asChild variant="link">
<Link href="/login">I already have an account</Link>
</Button>
</footer>
</form>
</Form>
Expand Down
Loading

0 comments on commit 14c0576

Please sign in to comment.