-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
128 additions
and
2 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import type { MetaFunction } from '@remix-run/node' | ||
| import * as Lucide from 'lucide-react' | ||
| import { Button } from '#/components/base-ui' | ||
| import { Link } from '#/components/link' | ||
| import { clx } from '#/utils/ui-helper' | ||
|
|
||
| import { SocialLogin } from './__social' | ||
|
|
||
| export const meta: MetaFunction = () => [{ title: 'Create Account - Sosialink' }] | ||
|
|
||
| export default function SignUpPage() { | ||
| return ( | ||
| <main className="mx-auto w-full max-w-md p-6"> | ||
| <div className="mt-7 rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-black"> | ||
| <div className="p-4 sm:p-7"> | ||
| <div className="text-center"> | ||
| <h1 className="block font-bold text-2xl text-gray-800 dark:text-white"> | ||
| Create Account | ||
| </h1> | ||
| <p className="mt-3 text-gray-600 text-sm dark:text-gray-300"> | ||
| Already have an account?{' '} | ||
| <Link | ||
| to="/login" | ||
| className="font-medium text-primary-600 hover:underline focus:outline-none dark:text-primary-500" | ||
| > | ||
| Sign in here | ||
| </Link> | ||
| </p> | ||
| </div> | ||
| <div className="mt-5 lg:mt-7"> | ||
| {/* Form */} | ||
| <form> | ||
| <div className="grid gap-y-4"> | ||
| {/* Form Group */} | ||
| <div> | ||
| <label htmlFor="email" className="sr-only"> | ||
| Email address | ||
| </label> | ||
| <div className="relative flex flex-col gap-1"> | ||
| <label htmlFor="email" className="text-sm dark:text-white"> | ||
| Email Address | ||
| </label> | ||
| <div className="relative flex flex-col"> | ||
| <input | ||
| type="email" | ||
| placeholder="[email protected]" | ||
| className="block w-full rounded-lg border-gray-200 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-gray-600" | ||
| required | ||
| /> | ||
| <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3"> | ||
| <Lucide.AlertCircle className={clx('hidden', 'size-5 text-red-500')} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p className="mt-2 hidden text-red-600 text-xs" id="email-error"> | ||
| Please include a valid email address | ||
| </p> | ||
| </div> | ||
| {/* End Form Group */} | ||
| {/* Form Group */} | ||
| <div> | ||
| <div className="relative flex flex-col gap-1"> | ||
| <label htmlFor="password" className="text-sm dark:text-white"> | ||
| Password | ||
| </label> | ||
| <div className="relative flex flex-col"> | ||
| <input | ||
| type="password" | ||
| placeholder="************" | ||
| className="block w-full rounded-lg border-gray-200 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:ring-gray-600" | ||
| required | ||
| /> | ||
| <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3"> | ||
| <Lucide.AlertCircle className={clx('hidden', 'size-5 text-red-500')} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <p className="mt-2 hidden text-red-600 text-xs" id="password-error"> | ||
| 8+ characters required | ||
| </p> | ||
| </div> | ||
| {/* End Form Group */} | ||
| {/* Checkbox */} | ||
| <div className="flex items-center"> | ||
| <div className="flex"> | ||
| <input | ||
| id="remember-me" | ||
| name="remember-me" | ||
| type="checkbox" | ||
| className="pointer-events-none mt-0.5 shrink-0 rounded border-gray-200 text-primary-600 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-offset-gray-800 dark:checked:border-primary-500 dark:checked:bg-primary-500" | ||
| /> | ||
| </div> | ||
| <div className="inline-flex w-full items-center justify-between"> | ||
| <div className="ms-2.5"> | ||
| <label htmlFor="remember-me" className="text-sm dark:text-white"> | ||
| I accept the{' '} | ||
| <Link | ||
| to="/terms" | ||
| newTab | ||
| className="text-primary-600 hover:underline focus:rounded focus:outline-none focus:ring-2 focus:ring-primary-500 dark:text-primary-500 dark:hover:text-primary-600" | ||
| > | ||
| Terms and Conditions | ||
| </Link> | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/* End Checkbox */} | ||
| <Button type="submit" variant="primary"> | ||
| Continue | ||
| </Button> | ||
| </div> | ||
| </form> | ||
| {/* End Form */} | ||
| <SocialLogin label="Or, signup with" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mt-6 text-center"> | ||
| <Link to="/" className="text-sm hover:underline dark:text-white"> | ||
| Back to homepage | ||
| </Link> | ||
| </div> | ||
| </main> | ||
| ) | ||
| } |