-
Notifications
You must be signed in to change notification settings - Fork 3
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 #22 from Developer-DAO/registration
Registration
- Loading branch information
Showing
15 changed files
with
3,397 additions
and
100 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,162 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
|
|
||
| import { useAccount, useConnect, useDisconnect } from 'wagmi' | ||
| import { cn } from "@/lib/utils" | ||
| import { Icons } from "@/components/ui/icons" | ||
| import { Button } from "@/components/ui/button" | ||
| import { Input } from "@/components/ui/input" | ||
| import { Label } from "@/components/ui/label" | ||
| import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card" | ||
| import { WalletButton } from "@/components/wallet-buttons" | ||
| import { SubmitButton } from "@/components/form-submit-button"; | ||
| import { registerUser } from "../authbfe"; | ||
| import { useFormState, useFormStatus } from "react-dom"; | ||
|
|
||
| interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {} | ||
| interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> { } | ||
|
|
||
| export function UserAuthForm({ className, ...props }: UserAuthFormProps) { | ||
| const [isLoading, setIsLoading] = React.useState<boolean>(false) | ||
|
|
||
| async function onSubmit(event: React.SyntheticEvent) { | ||
| event.preventDefault() | ||
| setIsLoading(true) | ||
| export default function UserRegForm({ className, ...props }: UserAuthFormProps) { | ||
|
|
||
| setTimeout(() => { | ||
| setIsLoading(false) | ||
| }, 3000) | ||
| } | ||
| const account = useAccount() | ||
| const { connectors, connect, status, error } = useConnect() | ||
| const { disconnect } = useDisconnect() | ||
|
|
||
| return ( | ||
| <div className={cn("grid gap-6", className)} {...props}> | ||
| <Button variant="outline" type="button" disabled={isLoading} className="p-2"> | ||
| {isLoading ? ( | ||
| <Icons.spinner className="mr-2 h-6 w-6 animate-spin" /> | ||
| ) : ( | ||
| <Icons.ethereum className="mr-2 h-6 w-6" /> | ||
| )}{" "} | ||
| Wallet | ||
| </Button> | ||
| const [state, formAction] = useFormState(registerUser, null); | ||
|
|
||
| <div className="relative"> | ||
| <div className="relative flex justify-center text-xs uppercase"> | ||
| <span className="bg-background px-2 text-neutral-500"> | ||
| And continue with | ||
| </span> | ||
| </div> | ||
| </div> | ||
| const walletButtons = connectors.map((connector) => | ||
| connector.name.toLowerCase() === "injected" ? null : ( | ||
| <WalletButton | ||
| connector={connector} | ||
| isLoading={status === 'pending'} | ||
| connect={connect} | ||
| key={connector.uid} | ||
| /> | ||
| ) | ||
| ); | ||
|
|
||
| <form onSubmit={onSubmit}> | ||
| <div className="grid gap-2"> | ||
| <div className="grid gap-1"> | ||
| <Label className="sr-only" htmlFor="email"> | ||
| </Label> | ||
| <Input | ||
| id="email" | ||
| placeholder="name@example.com" | ||
| type="email" | ||
| autoCapitalize="none" | ||
| autoComplete="email" | ||
| autoCorrect="off" | ||
| disabled={isLoading} | ||
| /> | ||
| return ( | ||
| <> | ||
| {!state ? ( | ||
| <div className={cn("grid gap-6", className)} {...props}> | ||
| {account.status === 'connected' ? ( | ||
| <HoverCard> | ||
| <HoverCardTrigger asChild> | ||
| <Button variant="destructive" onClick={() => disconnect()}>Disconnect</Button> | ||
| </HoverCardTrigger> | ||
| <HoverCardContent className="w-80"> | ||
| <div className="flex justify-between space-x-4"> | ||
| <div className="space-y-1"> | ||
| <h4 className="text-sm font-semibold">connected as</h4> | ||
| <div className="text-xs"> | ||
| {JSON.stringify(account.addresses[0].replaceAll(account.addresses[0].slice(8, 36), '...'))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </HoverCardContent> | ||
| </HoverCard> | ||
| ) : ( | ||
| <div className="grid gap-1"> | ||
| {walletButtons} | ||
| </div> | ||
| )} | ||
| <div className="relative"> | ||
| <div className="relative flex justify-center text-xs uppercase"> | ||
| <span className="bg-background px-2 text-neutral-500"> | ||
| And continue with | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <Button disabled={isLoading}> | ||
| {isLoading && ( | ||
| <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> | ||
| )} | ||
| Sign In with Email | ||
| </Button> | ||
| </div> | ||
| </form> | ||
|
|
||
|
|
||
| </div> | ||
| <form action={formAction}> | ||
| <input type="hidden" name="wallet" id="wallet" value={account.addresses?.[0]} /> | ||
| <div className="grid gap-2"> | ||
| <div className="grid gap-1"> | ||
| <Label className="sr-only" htmlFor="email"> | ||
| </Label> | ||
| <Input | ||
| id="email" | ||
| name="email" | ||
| placeholder="name@example.com" | ||
| type="email" | ||
| autoCapitalize="none" | ||
| autoComplete="email" | ||
| autoCorrect="off" | ||
| /> | ||
| </div> | ||
| <div className="grid gap-1"> | ||
| <Label className="sr-only" htmlFor="password"> | ||
| Password | ||
| </Label> | ||
| <Input | ||
| id="password" | ||
| name="password" | ||
| placeholder="******" | ||
| type="password" | ||
| autoCapitalize="none" | ||
| autoComplete="email" | ||
| autoCorrect="off" | ||
| /> | ||
| </div> | ||
| <SubmitButton /> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ) : (<> | ||
| {state.success ? (<> | ||
| <div className="relative items-center w-full py-12 mx-auto max-w-7xl"> | ||
| <div className="flex w-full mx-auto"> | ||
| <div className="relative inline-flex items-center m-auto align-middle"> | ||
| <div className="relative max-w-6xl p-6 overflow-hidden bg-white rounded-3xl"> | ||
| <div className="relative max-w-lg"> | ||
| <div><p className="text-2xl font-medium tracking-tight text-black sm:text-4xl"> | ||
| Welcome on board! | ||
| </p> | ||
| <p className="max-w-xl mt-4 text-base tracking-tight text-neutral-600"> | ||
| Check your email for a confirmation link. If you don't see it, check your spam folder please. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start"> | ||
| <a href="/authentication/login" className="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full inline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black"> | ||
| Login → | ||
| </a> | ||
| <a href="/contact" className="inline-flex items-center justify-center text-sm font-semibold text-black duration-200 hover:text-blue-500 focus:outline-none focus-visible:outline-gray-600"> | ||
| Contact us → | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </>) : (<> | ||
| <div className="relative items-center w-full py-12 mx-auto max-w-7xl"> | ||
| <div className="flex w-full mx-auto"> | ||
| <div className="relative inline-flex items-center m-auto align-middle"> | ||
| <div className="relative max-w-6xl p-6 overflow-hidden bg-white rounded-3xl"> | ||
| <div className="relative max-w-lg"> | ||
| <div><p className="text-2xl font-medium tracking-tight text-red-500 sm:text-4xl"> | ||
| This is an Error | ||
| </p> | ||
| <p className="max-w-xl mt-4 text-base tracking-tight text-neutral-600"> | ||
| We failed to register you. Are you already registered? Please contact us if the problem persists. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-col items-center justify-center gap-3 mt-10 lg:flex-row lg:justify-start"> | ||
| <a href="/authentication/reset" className="items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full inline-flex hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto focus-visible:outline-black text-sm focus-visible:ring-black"> | ||
| Reset password → | ||
| </a> | ||
| <a href="/contact" className="inline-flex items-center justify-center text-sm font-semibold text-black duration-200 hover:text-blue-500 focus:outline-none focus-visible:outline-gray-600"> | ||
| Contact us → | ||
| </a> | ||
| </div> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| "use server" | ||
| export async function registerUser(prevState: any, formData: FormData) { | ||
|
|
||
| const rawFormData = { | ||
| email: formData.get('email'), | ||
| wallet: formData.get('wallet'), | ||
| password: formData.get('password'), | ||
| } | ||
|
|
||
| //console.log(rawFormData); | ||
|
|
||
| const response = await fetch('http://0.0.0.0:3000/api/register', { | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| body: JSON.stringify(rawFormData), | ||
| }) | ||
| const result = await response; | ||
| if (result.status === 200) { | ||
| return { message: `Registered user ${rawFormData.email}`, success: true }; | ||
| } | ||
| else { | ||
|
|
||
| return { message: `Error: ${result.statusText}`, success: false }; | ||
| } | ||
| } |
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
Oops, something went wrong.