Skip to content

Commit

Permalink
feat(block): add register and forgot password block
Browse files Browse the repository at this point in the history
  • Loading branch information
ruru-m07 committed Sep 8, 2024
1 parent 1d11492 commit a236611
Show file tree
Hide file tree
Showing 8 changed files with 356 additions and 1 deletion.
24 changes: 24 additions & 0 deletions apps/www/__registry__/blocks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import { Blocks_registry } from "@/registry/blocks";

import Login1 from "@/components/blocks/login-1";
import Register1 from "@/components/blocks/register-1";
import Forgot1 from "@/components/blocks/forgot-1";

export const blocks_registry: Blocks_registry[] = [
{
Expand All @@ -16,4 +18,26 @@ export const blocks_registry: Blocks_registry[] = [
],
default_export: Login1,
},
{
name: "register-1",
files: ["register-1.tsx"],
dependencies: ["react-hook-form", "@hookform/resolvers", "zod"],
components: ["button", "input", "form"],
type: "block:component",
content: [
'"use client";\n\n/* eslint-disable @next/next/no-img-element */\nimport Image from "next/image";\n\nimport Link from "next/link";\nimport React from "react";\nimport { useForm } from "react-hook-form";\nimport { zodResolver } from "@hookform/resolvers/zod";\nimport { z } from "zod";\nimport { Button } from "ruru-ui/components/button";\nimport { Input, PasswordInput } from "ruru-ui/components/input";\nimport {\n Form,\n FormControl,\n FormField,\n FormLabel,\n FormItem,\n FormMessage,\n} from "ruru-ui/components/form";\n\nconst Register1 = () => {\n const registerSchema = z.object({\n firstName: z\n .string()\n .min(3, { message: "First name must be at least 3 characters long." }),\n lastName: z\n .string()\n .min(3, { message: "Last name must be at least 3 characters long." }),\n email: z.string().email({ message: "Please enter a valid email address." }),\n password: z\n .string()\n .min(8, { message: "Password must be at least 8 characters long." }),\n });\n\n const form = useForm<z.infer<typeof registerSchema>>({\n resolver: zodResolver(registerSchema),\n defaultValues: {\n firstName: "",\n lastName: "",\n email: "",\n password: "",\n },\n });\n\n function onSubmit(values: z.infer<typeof registerSchema>) {\n // Do something with the form values.\n console.log(values);\n }\n\n return (\n <div className="flex items-center justify-center h-screen">\n <div className="flex flex-col items-center w-96 border rounded-md bg-card p-4">\n <div className="grid place-items-center">\n <div className="flex items-center gap-4">\n <img\n className="dark:block hidden"\n src={"https://ruru-ui.vercel.app/logo-white.png"}\n alt="logo"\n height={40}\n width={40}\n />\n <img\n className="dark:hidden block"\n src={"https://ruru-ui.vercel.app/logo-black.png"}\n alt="logo"\n height={40}\n width={40}\n />\n <span className="text-xl">Ruru UI</span>\n </div>\n <span className="text-sm text-muted-foreground mt-4">\n Create an account\n </span>\n </div>\n\n <Form {...form}>\n <form\n onSubmit={form.handleSubmit(onSubmit)}\n className="w-full space-y-2"\n >\n <div className="my-3">\n <div className="flex gap-2">\n <FormField\n control={form.control}\n name="firstName"\n render={({ field }) => (\n <FormItem>\n <FormLabel>First Name</FormLabel>\n <FormControl>\n <Input placeholder="John" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n\n <FormField\n control={form.control}\n name="lastName"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Last Name</FormLabel>\n <FormControl>\n <Input placeholder="doe" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n\n <FormField\n control={form.control}\n name="email"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Email</FormLabel>\n <FormControl>\n <Input placeholder="[email protected]" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n\n <FormField\n control={form.control}\n name="password"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Password</FormLabel>\n <FormControl>\n <PasswordInput placeholder="••••••••" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n\n <div className="py-4 w-full space-y-3">\n <Button type="submit" className="w-full">\n Register\n </Button>\n <Button\n className="w-full"\n variant={"secondary"}\n onClick={() => console.log("Login with Github")}\n >\n Register with Github\n </Button>\n </div>\n\n <Link\n href={"#"}\n className="hover:underline text-xs flex justify-center"\n >\n Already have an account?\n </Link>\n </form>\n </Form>\n </div>\n </div>\n );\n};\n\nexport default Register1;\n',
],
default_export: Register1,
},
{
name: "forgot-1",
files: ["forgot-1.tsx"],
dependencies: ["react-hook-form", "@hookform/resolvers", "zod"],
components: ["button", "input", "form"],
type: "block:component",
content: [
'"use client";\n\n/* eslint-disable @next/next/no-img-element */\nimport Image from "next/image";\n\nimport Link from "next/link";\nimport React from "react";\nimport { useForm } from "react-hook-form";\nimport { zodResolver } from "@hookform/resolvers/zod";\nimport { z } from "zod";\nimport { Button } from "ruru-ui/components/button";\nimport { Input } from "ruru-ui/components/input";\nimport {\n Form,\n FormControl,\n FormField,\n FormLabel,\n FormItem,\n FormMessage,\n} from "ruru-ui/components/form";\n\nconst Forgot1 = (): React.ReactNode => {\n const formSchema = z.object({\n email: z.string().email({ message: "Please enter a valid email address." }),\n });\n\n const form = useForm<z.infer<typeof formSchema>>({\n resolver: zodResolver(formSchema),\n defaultValues: {\n email: "",\n },\n });\n\n function onSubmit(values: z.infer<typeof formSchema>) {\n // Do something with the form values.\n console.log(values);\n }\n\n return (\n <div className="flex items-center justify-center h-screen">\n <div className="flex flex-col items-center w-96 border rounded-md bg-card p-4">\n <div className="grid place-items-center">\n <div className="flex items-center gap-4">\n <img\n className="dark:block hidden"\n src={"https://ruru-ui.vercel.app/logo-white.png"}\n alt="logo"\n height={40}\n width={40}\n />\n <img\n className="dark:hidden block"\n src={"https://ruru-ui.vercel.app/logo-black.png"}\n alt="logo"\n height={40}\n width={40}\n />\n <span className="text-xl">Ruru UI</span>\n </div>\n <span className="text-sm text-muted-foreground mt-4">\n Forgot your password?\n </span>\n </div>\n\n <Form {...form}>\n <form\n onSubmit={form.handleSubmit(onSubmit)}\n className="w-full space-y-2"\n >\n <div className="my-3">\n <FormField\n control={form.control}\n name="email"\n render={({ field }) => (\n <FormItem>\n <FormLabel>Email</FormLabel>\n <FormControl>\n <Input placeholder="[email protected]" {...field} />\n </FormControl>\n <FormMessage />\n </FormItem>\n )}\n />\n </div>\n\n <div className="py-4 w-full space-y-3">\n <Button type="submit" className="w-full">\n Send reset link\n </Button>\n </div>\n\n <Link\n href={"#"}\n className="hover:underline text-xs flex justify-center"\n >\n Back to login\n </Link>\n </form>\n </Form>\n </div>\n </div>\n );\n};\n\nexport default Forgot1;\n',
],
default_export: Forgot1,
},
];
2 changes: 1 addition & 1 deletion apps/www/app/(home)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,7 @@ const Terminal = ({ data }: { data: string }) => {
Terminal
</h4>
</div>
<div className="my-2 w-2 h-2 rounded-full bg-green-800" />
<div className="my-2 w-2 h-2 rounded-full bg-green-600/45" />
</div>
<pre className="px-4 py-2 text-muted-foreground text-xs whitespace-pre-wrap bg-secondary/40">
{data}
Expand Down
105 changes: 105 additions & 0 deletions apps/www/components/blocks/forgot-1.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
"use client";

/* eslint-disable @next/next/no-img-element */
import Image from "next/image";

import Link from "next/link";
import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "ruru-ui/components/button";
import { Input } from "ruru-ui/components/input";
import {
Form,
FormControl,
FormField,
FormLabel,
FormItem,
FormMessage,
} from "ruru-ui/components/form";

const Forgot1 = (): React.ReactNode => {
const formSchema = z.object({
email: z.string().email({ message: "Please enter a valid email address." }),
});

const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
},
});

function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
console.log(values);
}

return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center w-96 border rounded-md bg-card p-4">
<div className="grid place-items-center">
<div className="flex items-center gap-4">
<img
className="dark:block hidden"
src={"https://ruru-ui.vercel.app/logo-white.png"}
alt="logo"
height={40}
width={40}
/>
<img
className="dark:hidden block"
src={"https://ruru-ui.vercel.app/logo-black.png"}
alt="logo"
height={40}
width={40}
/>
<span className="text-xl">Ruru UI</span>
</div>
<span className="text-sm text-muted-foreground mt-4">
Forgot your password?
</span>
</div>

<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="w-full space-y-2"
>
<div className="my-3">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>

<div className="py-4 w-full space-y-3">
<Button type="submit" className="w-full">
Send reset link
</Button>
</div>

<Link
href={"#"}
className="hover:underline text-xs flex justify-center"
>
Back to login
</Link>
</form>
</Form>
</div>
</div>
);
};

export default Forgot1;
168 changes: 168 additions & 0 deletions apps/www/components/blocks/register-1.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
"use client";

/* eslint-disable @next/next/no-img-element */
import Image from "next/image";

import Link from "next/link";
import React from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "ruru-ui/components/button";
import { Input, PasswordInput } from "ruru-ui/components/input";
import {
Form,
FormControl,
FormField,
FormLabel,
FormItem,
FormMessage,
} from "ruru-ui/components/form";

const Register1 = () => {
const registerSchema = z.object({
firstName: z
.string()
.min(3, { message: "First name must be at least 3 characters long." }),
lastName: z
.string()
.min(3, { message: "Last name must be at least 3 characters long." }),
email: z.string().email({ message: "Please enter a valid email address." }),
password: z
.string()
.min(8, { message: "Password must be at least 8 characters long." }),
});

const form = useForm<z.infer<typeof registerSchema>>({
resolver: zodResolver(registerSchema),
defaultValues: {
firstName: "",
lastName: "",
email: "",
password: "",
},
});

function onSubmit(values: z.infer<typeof registerSchema>) {
// Do something with the form values.
console.log(values);
}

return (
<div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center w-96 border rounded-md bg-card p-4">
<div className="grid place-items-center">
<div className="flex items-center gap-4">
<img
className="dark:block hidden"
src={"https://ruru-ui.vercel.app/logo-white.png"}
alt="logo"
height={40}
width={40}
/>
<img
className="dark:hidden block"
src={"https://ruru-ui.vercel.app/logo-black.png"}
alt="logo"
height={40}
width={40}
/>
<span className="text-xl">Ruru UI</span>
</div>
<span className="text-sm text-muted-foreground mt-4">
Create an account
</span>
</div>

<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="w-full space-y-2"
>
<div className="my-3">
<div className="flex gap-2">
<FormField
control={form.control}
name="firstName"
render={({ field }) => (
<FormItem>
<FormLabel>First Name</FormLabel>
<FormControl>
<Input placeholder="John" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="lastName"
render={({ field }) => (
<FormItem>
<FormLabel>Last Name</FormLabel>
<FormControl>
<Input placeholder="doe" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>

<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="[email protected]" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<PasswordInput placeholder="••••••••" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>

<div className="py-4 w-full space-y-3">
<Button type="submit" className="w-full">
Register
</Button>
<Button
className="w-full"
variant={"secondary"}
onClick={() => console.log("Login with Github")}
>
Register with Github
</Button>
</div>

<Link
href={"#"}
className="hover:underline text-xs flex justify-center"
>
Already have an account?
</Link>
</form>
</Form>
</div>
</div>
);
};

export default Register1;
Loading

0 comments on commit a236611

Please sign in to comment.