generated from clerk/t3-turbo-and-clerk
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Diego Romero <[email protected]…
…b.com>
- Loading branch information
Showing
13 changed files
with
313 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 85 additions & 38 deletions
123
apps/nextjs/src/components/RegisterForm/RegisterForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,94 @@ | ||
| import styles from "./RegisterForm.module.css"; | ||
| import { useRouter } from "next/router"; | ||
| import { z } from "zod"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { useSignUp } from "@clerk/nextjs"; | ||
| import { useState } from "react"; | ||
|
|
||
| const signUpFormValidator = z.object({ | ||
| email: z.string().email(), | ||
| password: z.string().min(8, "Password must be at least 8 characters"), | ||
| }); | ||
|
|
||
| export type SignUpFormSchema = Zod.infer<typeof signUpFormValidator>; | ||
|
|
||
| function RegisterForm() { | ||
| const router = useRouter(); | ||
|
|
||
| const { register, handleSubmit, setError, formState } = | ||
| useForm<SignUpFormSchema>({ | ||
| resolver: zodResolver(signUpFormValidator), | ||
| mode: "onBlur", | ||
| }); | ||
| const { signUp, setActive } = useSignUp(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| const onSubmit = handleSubmit(async (vals) => { | ||
| if (!signUp) return; | ||
| setIsLoading(true); | ||
|
|
||
| try { | ||
| const result = await signUp.create({ | ||
| emailAddress: vals.email, | ||
| password: vals.password, | ||
| }); | ||
|
|
||
| if (result?.status === "missing_requirements") { | ||
| alert("mising"); | ||
| } | ||
|
|
||
| if (result?.status === "complete") { | ||
| setActive({ session: result.createdSessionId }); | ||
| router.push("/"); | ||
| } | ||
| } catch (err) { | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| setError("root", { message: err.errors[0].message }); | ||
| } | ||
| setIsLoading(false); | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <form action="" method="post"> | ||
| <div className={styles.container}> | ||
| <h1>Sign Up</h1> | ||
| <hr /> | ||
|
|
||
| <label htmlFor="email">Email</label> | ||
| <input type="text" placeholder="Enter Email" name="email" required /> | ||
|
|
||
| <label htmlFor="psw">Password</label> | ||
| <input | ||
| type="password" | ||
| placeholder="Enter Password" | ||
| name="psw" | ||
| required | ||
| /> | ||
|
|
||
| <label htmlFor="psw-repeat"> Repeat Password </label> | ||
| <input | ||
| type="password" | ||
| placeholder="Repeat Password" | ||
| name="psw-repeat" | ||
| required | ||
| /> | ||
| <div className={styles.buttonDiv}> | ||
| <button | ||
| type="button" | ||
| className={styles.cancelbtn} | ||
| onClick={() => router.back()} | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button type="submit" className={styles.signupbtn}> | ||
| Sign Up | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <main className={styles.container}> | ||
| <h1>Sign Up</h1> | ||
| <hr /> | ||
| {formState.errors.root && ( | ||
| <p className={styles.errorMsg}>{formState.errors.root?.message}</p> | ||
| )} | ||
|
|
||
| <form onSubmit={onSubmit}> | ||
| <label htmlFor="email">Email</label> | ||
| <input | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| required | ||
| {...register("email")} | ||
| /> | ||
| <label htmlFor="psw">Password</label> | ||
| <input | ||
| type="password" | ||
| placeholder="Enter Password" | ||
| required | ||
| {...register("password")} | ||
| /> | ||
| {/* <div className={styles.buttonDiv}> */} | ||
| <button | ||
| type={"submit"} | ||
| className={styles.signupbtn} | ||
| disabled={isLoading} | ||
| > | ||
| Sign Up | ||
| </button> | ||
| {/* <button onClick={() => router.push(`/login`)}> Cancel </button> | ||
| </div> */} | ||
| </form> | ||
| </> | ||
|
|
||
| <p> | ||
| have an account? <a onClick={() => router.push(`/login`)}>Log in</a> | ||
| </p> | ||
| </main> | ||
| ); | ||
| } | ||
| export default RegisterForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,74 @@ | ||
| import styles from "./LoginContent.module.css"; | ||
| import { useRouter } from "next/router"; | ||
| import { z } from "zod"; | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { useSignIn } from "@clerk/nextjs"; | ||
| import { useState } from "react"; | ||
|
|
||
| const signInFormValidator = z.object({ | ||
| email: z.string().email(), | ||
| password: z.string().min(1, "Password cannot be empty"), | ||
| }); | ||
|
|
||
| export type SignInFormSchema = Zod.infer<typeof signInFormValidator>; | ||
| function LoginContent() { | ||
| const router = useRouter(); | ||
| const { register, handleSubmit, setError, formState } = | ||
| useForm<SignInFormSchema>({ | ||
| resolver: zodResolver(signInFormValidator), | ||
| mode: "onBlur", | ||
| }); | ||
| const { signIn, setActive } = useSignIn(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| const onSubmit = handleSubmit(async (vals) => { | ||
| if (!signIn) return; | ||
| setIsLoading(true); | ||
|
|
||
| try { | ||
| const result = await signIn.create({ | ||
| identifier: vals.email, | ||
| password: vals.password, | ||
| }); | ||
|
|
||
| if (result?.status === "complete") { | ||
| setIsLoading(false); | ||
| setActive({ session: result.createdSessionId }); | ||
| } | ||
| } catch (err) { | ||
| setIsLoading(false); | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| setError("root", { message: err.errors[0].message }); | ||
| } | ||
| }); | ||
| return ( | ||
| <> | ||
| <main className={styles.container}> | ||
| <h1> Sign In</h1> | ||
| <form action="" method="post"> | ||
| <h1>Sign In</h1> | ||
| {formState.errors.root && ( | ||
| <p className={styles.errorMsg}>{formState.errors.root?.message}</p> | ||
| )} | ||
|
|
||
| <form onSubmit={onSubmit}> | ||
| <label htmlFor="email">Email</label> | ||
| <input | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| name="email" | ||
| required | ||
| {...register("email")} | ||
| /> | ||
| <label htmlFor="psw">Password</label> | ||
| <input | ||
| type="password" | ||
| placeholder="Enter Password" | ||
| name="psw" | ||
| required | ||
| {...register("password")} | ||
| /> | ||
| <button disabled={isLoading}>Sign In</button> | ||
| </form> | ||
| <button>Sign In</button> | ||
|
|
||
| <p> | ||
| Dont have an account?{" "} | ||
| <a onClick={() => router.push(`/register`)}>Register</a> | ||
|
|
||
52 changes: 52 additions & 0 deletions
52
apps/nextjs/src/components/ordersContent/OrdersContent.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| .container { | ||
| margin: 15%; | ||
| margin-top: 5%; | ||
| } | ||
| .container h1 { | ||
| font-size: x-large; | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 20px; | ||
| } | ||
| .orderItem { | ||
| border: 3px solid black; | ||
| border-radius: 10px; | ||
| height: 100px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding-left: 2rem; | ||
| padding-right: 2rem; | ||
| margin-bottom: 10px; | ||
| } | ||
| .orderId { | ||
| display: flex; | ||
| align-items: center; | ||
| font-weight: bold; | ||
| } | ||
| .itemName { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .clientName { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .quantity { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .price { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .deleteBtn { | ||
| margin-top: 25px; | ||
| margin-bottom: 25px; | ||
| background-color: rgb(51, 49, 49); | ||
| color: white; | ||
| border-radius: 5px; | ||
| width: 100px; | ||
| } | ||
| .deleteBtn:active { | ||
| background-color: gray; | ||
| } |
Oops, something went wrong.