@setoelkahfi / tower-of-bazel
Code Commits Issues Pulls Sessions CI/CD
feature/share-libs
feature/share-libs main
tsx 158 lines 4.34 KB
Raw
1 "use client";
2
3 import { useLogger } from "@/lib/logger";
4 import { TAURI_ACCOUNT_REGISTER } from "@/lib/tauri-handler";
5 import { AccountRegisterResponse } from "@/models/account";
6 import { TauriResponse } from "@/models/shared";
7 import { invoke } from "@tauri-apps/api/tauri";
8 import { useState } from "react";
9 import * as Form from "@radix-ui/react-form";
10 import { Button } from "@/components/button";
11
12 type SignupFormPayload = {
13 name: string,
14 email: string,
15 password: string
16 }
17
18 export enum State {
19 LOADING,
20 LOADED,
21 ERROR,
22 SUCCESS
23 }
24
25 export enum SignupState {
26 ERROR,
27 SUCCESS
28 }
29
30 export function SignupForm({ registerCallback }: { registerCallback: (state: SignupState) => void }) {
31 const log = useLogger("Register/Form");
32 const [name, setName] = useState("");
33 const [email, setEmail] = useState("");
34 const [password, setPassword] = useState("");
35 const [state, setState] = useState(State.LOADED);
36
37 const register = async () => {
38 setState(State.LOADING);
39 try {
40 const payload: SignupFormPayload = {
41 name,
42 email,
43 password
44 };
45 log.debug("payload", payload);
46 const response = await invoke<AccountRegisterResponse>(TAURI_ACCOUNT_REGISTER, payload);
47 log.debug("response", response);
48 if (response.status === TauriResponse.ERROR) {
49 log.error("Register failed", response);
50 setState(State.ERROR);
51 return;
52 }
53 setState(State.SUCCESS);
54 // Call the callback to update the parent state
55 registerCallback(SignupState.SUCCESS);
56 } catch (error) {
57 log.error("Register failed", error);
58 setState(State.ERROR);
59 }
60 };
61
62 const buttonText = state === State.LOADING ? "Registering..." : "Register";
63
64 return (
65 <Form.Root
66 className="FormRoot"
67 onSubmit={(event) => {
68 event.preventDefault();
69 }}
70 >
71 <Form.Field className="FormField my-6" name="name">
72 <div
73 style={{
74 display: "flex",
75 alignItems: "baseline",
76 justifyContent: "space-between",
77 }}
78 >
79 <Form.Label className="FormLabel">Name</Form.Label>
80 <Form.Message className="FormMessage" match="valueMissing">
81 Please enter your name
82 </Form.Message>
83 <Form.Message className="FormMessage" match="typeMismatch">
84 Please provide a valid name
85 </Form.Message>
86 </div>
87 <Form.Control asChild>
88 <input
89 className="Input"
90 type="text"
91 value={name}
92 onChange={(e) => setName(e.currentTarget.value)}
93 required
94 />
95 </Form.Control>
96 </Form.Field>
97 <Form.Field className="FormField" name="email">
98 <div
99 style={{
100 display: "flex",
101 alignItems: "baseline",
102 justifyContent: "space-between",
103 }}
104 >
105 <Form.Label className="FormLabel">Email</Form.Label>
106 <Form.Message className="FormMessage" match="valueMissing">
107 Please enter your email
108 </Form.Message>
109 <Form.Message className="FormMessage" match="typeMismatch">
110 Please provide a valid email
111 </Form.Message>
112 </div>
113 <Form.Control asChild>
114 <input
115 className="Input"
116 type="email"
117 value={email}
118 onChange={(e) => setEmail(e.currentTarget.value)}
119 required
120 />
121 </Form.Control>
122 </Form.Field>
123 <Form.Field className="FormField my-6" name="password">
124 <div
125 style={{
126 display: "flex",
127 alignItems: "baseline",
128 justifyContent: "space-between",
129 }}
130 >
131 <Form.Label className="FormLabel">Password</Form.Label>
132 <Form.Message className="FormMessage" match="valueMissing">
133 Please enter your email
134 </Form.Message>
135 <Form.Message className="FormMessage" match="typeMismatch">
136 Please provide a valid email
137 </Form.Message>
138 </div>
139 <Form.Control asChild>
140 <input
141 className="Input"
142 type="password"
143 value={password}
144 onChange={(e) => {
145 setPassword(e.currentTarget.value);
146 }}
147 required
148 />
149 </Form.Control>
150 </Form.Field>
151 <Form.Field className="FormField my-6" name="button">
152 <Button onClick={register} variant={"outline"} size={"lg"}>
153 {buttonText}
154 </Button>
155 </Form.Field>
156 </Form.Root>
157 )
158 }