mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style registration form

Browse Source
This commit is contained in:
m5r 2021-09-25 21:15:16 +08:00
parent 60b5c74ed6
commit 767c2e3966
7 changed files with 61 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/auth/components/auth-form.tsx
View File

@ -71,14 +71,14 @@ export function AuthForm<S extends z.ZodType<any, any>>({
className="form"
{...props}
>
{children}
{formError ? (
<div role="alert" className="mt-8 sm:mx-auto sm:w-full sm:max-w-sm">
<div role="alert" className="mb-8 sm:mx-auto sm:w-full sm:max-w-sm">
<Alert title="Oops, there was an issue" message={formError} variant="error" />
</div>
) : null}
{children}
<button
type="submit"
disabled={ctx.formState.isSubmitting}

2
app/auth/components/labeled-text-field.tsx
View File

@ -54,7 +54,7 @@ export const LabeledTextField = forwardRef<HTMLInputElement, LabeledTextFieldPro
</div>
{error ? (
<div role="alert" style={{ color: "red" }}>
<div role="alert" className="text-red-600">
{error}
</div>
) : null}

44
app/auth/components/signup-form.tsx
View File

@ -1,44 +0,0 @@
import { useMutation } from "blitz";
import { LabeledTextField } from "../../core/components/labeled-text-field";
import { Form, FORM_ERROR } from "../../core/components/form";
import signup from "../../auth/mutations/signup";
import { Signup } from "../validations";
type SignupFormProps = {
onSuccess?: () => void;
};
export const SignupForm = (props: SignupFormProps) => {
const [signupMutation] = useMutation(signup);
return (
<div>
<h1>Create an Account</h1>
<Form
submitText="Create Account"
schema={Signup}
initialValues={{ email: "", password: "" }}
onSubmit={async (values) => {
try {
await signupMutation(values);
props.onSuccess?.();
} catch (error: any) {
if (error.code === "P2002" && error.meta?.target?.includes("email")) {
// This error comes from Prisma
return { email: "This email is already being used" };
} else {
return { [FORM_ERROR]: error.toString() };
}
}
}}
>
<LabeledTextField name="email" label="Email" placeholder="Email" />
<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
</Form>
</div>
);
};
export default SignupForm;

3
app/auth/mutations/signup.ts
View File

@ -4,11 +4,12 @@ import db, { GlobalRole, MembershipRole } from "../../../db";
import { Signup } from "../validations";
import { computeEncryptionKey } from "../../../db/_encryption";
export default resolver.pipe(resolver.zod(Signup), async ({ email, password }, ctx) => {
export default resolver.pipe(resolver.zod(Signup), async ({ email, password, name }, ctx) => {
const hashedPassword = await SecurePassword.hash(password.trim());
const encryptionKey = computeEncryptionKey(email.toLowerCase().trim()).toString("hex");
const user = await db.user.create({
data: {
name: name.trim(),
email: email.toLowerCase().trim(),
hashedPassword,
role: GlobalRole.CUSTOMER,

54
app/auth/pages/sign-up.tsx Normal file
View File

@ -0,0 +1,54 @@
import type { BlitzPage } from "blitz";
import { useRouter, Routes, useMutation, Link } from "blitz";
import BaseLayout from "../../core/layouts/base-layout";
import { AuthForm as Form, FORM_ERROR } from "../components/auth-form";
import { LabeledTextField } from "../components/labeled-text-field";
import signup from "../mutations/signup";
import { Signup } from "../validations";
const SignUp: BlitzPage = () => {
const router = useRouter();
const [signupMutation] = useMutation(signup);
return (
<Form
texts={{
title: "Create your account",
subtitle: (
<Link href={Routes.SignIn()}>
<a className="font-medium text-primary-600 hover:text-primary-500 focus:outline-none focus:underline transition ease-in-out duration-150">
Already have an account?
</a>
</Link>
),
submit: "Sign up",
}}
schema={Signup}
initialValues={{ email: "", password: "" }}
onSubmit={async (values) => {
try {
await signupMutation(values);
router.push(Routes.StepOne());
} catch (error: any) {
if (error.code === "P2002" && error.meta?.target?.includes("email")) {
// This error comes from Prisma
return { email: "This email is already being used" };
} else {
return { [FORM_ERROR]: error.toString() };
}
}
}}
>
<LabeledTextField name="name" label="Name" placeholder="Name" type="text" />
<LabeledTextField name="email" label="Email" placeholder="Email" type="email" />
<LabeledTextField name="password" label="Password" placeholder="Password" type="password" />
</Form>
);
};
SignUp.redirectAuthenticatedTo = Routes.StepOne();
SignUp.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>;
export default SignUp;

21
app/auth/pages/signup.tsx
View File

@ -1,21 +0,0 @@
import type { BlitzPage } from "blitz";
import { useRouter, Routes } from "blitz";
import BaseLayout from "../../core/layouts/base-layout";
import { SignupForm } from "../components/signup-form";
const SignUp: BlitzPage = () => {
const router = useRouter();
return (
<div>
<SignupForm onSuccess={() => router.push(Routes.StepOne())} />
</div>
);
};
SignUp.redirectAuthenticatedTo = Routes.StepOne();
SignUp.getLayout = (page) => <BaseLayout title="Sign Up">{page}</BaseLayout>;
export default SignUp;

1
app/auth/validations.ts
View File

@ -3,6 +3,7 @@ import { z } from "zod";
export const password = z.string().min(10).max(100);
export const Signup = z.object({
name: z.string(),
email: z.string().email(),
password,
});