-
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.
Merge pull request #35 from nathanvale/27-on-xl-desktop-look-at-cente…
…ring-the-auth-ui-shell-like-medium-approach 27-on-xl-desktop-look-at-centering-the-auth-ui-shell-like-medium-approach
- Loading branch information
Showing
5 changed files
with
65 additions
and
177 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { ThemeSwitch } from '~/routes/resources+/theme/index.tsx' | ||
|
|
||
| export interface AuthShellProps { | ||
| children: React.ReactNode | ||
| title: string | ||
| } | ||
|
|
||
| export function AuthShell({ children, title }: AuthShellProps) { | ||
| return ( | ||
| <div className="relative flex h-screen w-screen items-center justify-center"> | ||
| <div className="flex w-full md:w-auto lg:max-w-7xl"> | ||
| <div className="container relative flex h-screen flex-col pt-32 sm:grid md:items-center md:justify-center md:px-32 md:pt-0 md:shadow-lg lg:h-[800px] lg:grid-cols-2 lg:px-0"> | ||
| <ThemeSwitch className="absolute right-4 top-4 md:right-8 md:top-8" /> | ||
| <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex"> | ||
| <div className="absolute inset-0 bg-surface-02dp" /> | ||
| <div className="relative z-20 flex items-center text-lg font-medium"> | ||
| Bookit | ||
| </div> | ||
| <div className="relative z-20 mt-auto"> | ||
| <blockquote className="space-y-2"> | ||
| <p className="text-lg"> | ||
| The bookit app is amazing, it has completely changed my | ||
| business! | ||
| </p> | ||
| <footer className="text-sm">Nathan Vale</footer> | ||
| </blockquote> | ||
| </div> | ||
| </div> | ||
| <div className="w-full lg:p-8"> | ||
| <div className="mx-auto flex w-full flex-col justify-center space-y-9 sm:w-[350px]"> | ||
| <div className="mb-2 flex flex-col space-y-2 text-center md:mb-4"> | ||
| <h1 className="text-4xl font-black tracking-tight">{title}</h1> | ||
| </div> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
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,141 +1,7 @@ | ||
| import React from 'react' | ||
| import { parse, useForm } from '@conform-to/react' | ||
| import type { ActionArgs } from '@remix-run/node' | ||
| import { json } from '@remix-run/node' | ||
| import { Form, useActionData } from '@remix-run/react' | ||
| import { Input } from '~/components/ui/input.tsx' | ||
| import { FormField } from '~/components/form/form-field.tsx' | ||
| import { FormItem } from '~/components/form/form-item.tsx' | ||
| import { FormLabel } from '~/components/form/form-label.tsx' | ||
| import { FormControl } from '~/components/form/form-control.tsx' | ||
| import { FormDescription } from '~/components/form/form-description.tsx' | ||
| import { FormMessage } from '~/components/form/form-message.tsx' | ||
| import { Checkbox } from '~/components/ui/checkbox.tsx' | ||
|
|
||
| interface SignupForm { | ||
| email: string | ||
| password: string | ||
| confirmPassword: string | ||
| } | ||
|
|
||
| function parseFormData(formData: FormData) { | ||
| return parse<SignupForm>(formData, { | ||
| resolve({ email, password, confirmPassword }) { | ||
| const error: Record<string, string> = {} | ||
|
|
||
| if (!email) { | ||
| error.email = 'Email is required' | ||
| } else if (!email.includes('@')) { | ||
| error.email = 'Email is invalid' | ||
| } | ||
|
|
||
| if (!password) { | ||
| error.password = 'Password is required' | ||
| } | ||
|
|
||
| if (!confirmPassword) { | ||
| error.confirmPassword = 'Confirm password is required' | ||
| } else if (confirmPassword !== password) { | ||
| error.confirmPassword = 'Password does not match' | ||
| } | ||
|
|
||
| if (error.email || error.password || error.confirmPassword) { | ||
| return { error } | ||
| } | ||
|
|
||
| // Return the value only if no error | ||
| return { | ||
| value: { | ||
| email, | ||
| password, | ||
| confirmPassword, | ||
| }, | ||
| } | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| export async function action({ request }: ActionArgs) { | ||
| const formData = await request.formData() | ||
| const submission = parseFormData(formData) | ||
|
|
||
| /** | ||
| * Signup only when the user click on the submit button and no error found | ||
| */ | ||
| if (!submission.value || submission.intent !== 'submit') { | ||
| // Always sends the submission state back to client until the user is signed up | ||
| return json({ | ||
| ...submission, | ||
| payload: { | ||
| // Never send the password back to client | ||
| email: submission.payload.email, | ||
| }, | ||
| }) | ||
| } | ||
|
|
||
| throw new Error('Not implemented') | ||
| } | ||
|
|
||
| export default function Signup() { | ||
| // Last submission returned by the server | ||
| const lastSubmission = useActionData<typeof action>() | ||
| const [form, { email}] = useForm({ | ||
| // Sync the result of last submission | ||
| lastSubmission, | ||
|
|
||
| // Reuse the validation logic on the client | ||
| onValidate({ formData }) { | ||
| return parseFormData(formData) | ||
| }, | ||
| }) | ||
|
|
||
| export default function AuthShell() { | ||
| return ( | ||
| <Form method="post" {...form.props}> | ||
| <FormField field={email}> | ||
| <FormItem> | ||
| <FormLabel>Email</FormLabel> | ||
| <FormControl> | ||
| <Input /> | ||
| </FormControl> | ||
| <FormDescription>This is your public display name</FormDescription> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| </FormField> | ||
| <div className="items-top flex space-x-2"> | ||
| <Checkbox id="terms1" /> | ||
| <div className="grid gap-1.5 leading-none"> | ||
| <label | ||
| htmlFor="terms1" | ||
| className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" | ||
| > | ||
| Accept terms and conditions | ||
| </label> | ||
| <p className="text-sm text-muted-foreground"> | ||
| You agree to our Terms of Service and Privacy Policy. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* <TextField | ||
| label="Email" | ||
| message="This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days." | ||
| placeholder="Password" | ||
| config={email} | ||
| /> | ||
| <TextField | ||
| label="Password" | ||
| placeholder="Password" | ||
| type="password" | ||
| config={password} | ||
| /> | ||
| <TextField | ||
| label="Confirm password" | ||
| message="Shh!!" | ||
| placeholder="Confirm password" | ||
| type="password" | ||
| config={confirmPassword} | ||
| /> */} | ||
| <button type="submit">Signup</button> | ||
| </Form> | ||
| <div className="flex"> | ||
| <div className="flex h-px max-w-screen-xl bg-surface-03dp">hmm</div> | ||
| </div> | ||
| ) | ||
| } |
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