Fix the Register

frontend/src/hooks/useRegister.ts

@@ -1,23 +1,23 @@
 import { useMutation } from "@tanstack/react-query";
 import { RolesType } from "models/User.ts";
 import useApi from "./useApi.ts";
-import { LoginPath } from "./api/constants.ts";
+import { RegisterPath } from "./api/constants.ts";
 
 interface RegisterRequest {
   username: string;
-  firstname: string;
-  lastname: string;
+  firstName: string;
+  lastName: string;
   role: RolesType;
   password: string;
 }
 
 export default function useRegister() {
   const callApi = useApi();
   return useMutation({
-    mutationFn: ({ username, password, firstname, lastname, role }: RegisterRequest) =>
+    mutationFn: ({ username, password, firstName, lastName, role }: RegisterRequest) =>
       callApi<{ name: string }>({
-        url: LoginPath,
-        body: { username, password, firstname, lastname, role },
+        url: RegisterPath,
+        body: { username, password, firstName, lastName, role },
         method: "POST",
       }),
   });

frontend/src/pages/Auth/Register.tsx

@@ -1,8 +1,33 @@
 import InputWithLabel from "ui/InputWithLabel.tsx";
 import LinkText from "ui/LinkText.tsx";
-import FormSubmitButton from "./components/FormSubmitButton.tsx";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "ui/Button.tsx";
+import useRegister from "hooks/useRegister.ts";
+import Checkbox from "ui/Checkbox.tsx";
+import { Roles } from "models/User.ts";
 
 function Register() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordCheck, setCheckPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [premium, setPremium] = useState(false);
+  const { mutateAsync, isPending } = useRegister();
+  const navigate = useNavigate();
+
+  const onSubmit = async () => {
+    await mutateAsync({
+      username,
+      password,
+      firstName,
+      lastName,
+      role: premium ? Roles.PAID : Roles.FREE,
+    });
+    navigate("/login");
+  };
+
   return (
     <div className="bg-neutral-50 min-h-screen flex flex-col items-center justify-center dark:bg-neutral-900">
       <h1 className="mt-0 mb-16 text-5xl text-white font-bold tracking-tight md:text-5xl xl:text-5xl self-center">
@@ -11,15 +36,62 @@ function Register() {
       <div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
         <form>
           <div className="form-group mb-6">
-            <InputWithLabel label="Email" name="email" type="text" placeholder="Enter Email" />
+            <InputWithLabel
+              label="Username"
+              name="username"
+              type="text"
+              placeholder="Enter Username"
+              value={username}
+              onInput={(e) => setUsername(e.currentTarget.value)}
+            />
+          </div>
+          <div className="form-group mb-6">
+            <InputWithLabel
+              label="Password"
+              type="password"
+              name="password"
+              placeholder="Enter Password"
+              value={password}
+              onInput={(e) => setPassword(e.currentTarget.value)}
+            />
           </div>
           <div className="form-group mb-6">
-            <InputWithLabel label="Password" type="password" name="password" placeholder="Enter Password" />
+            <InputWithLabel
+              label="Repeat Password"
+              type="password"
+              name="repeat_password"
+              placeholder="Enter Password"
+              value={passwordCheck}
+              onInput={(e) => setCheckPassword(e.currentTarget.value)}
+            />
           </div>
           <div className="form-group mb-6">
-            <InputWithLabel label="Repeat Password" type="password" name="password" placeholder="Enter Same Password" />
+            <InputWithLabel
+              label="FirstName"
+              name="firstname"
+              type="text"
+              placeholder="Enter Firstname"
+              value={firstName}
+              onInput={(e) => setFirstName(e.currentTarget.value)}
+            />
+          </div>
+          <div className="form-group mb-6">
+            <InputWithLabel
+              label="LastName"
+              name="lastname"
+              type="text"
+              value={lastName}
+              placeholder="Enter Lastname"
+              onInput={(e) => setLastName(e.currentTarget.value)}
+            />
+          </div>
+          <div>
+            Premium
+            <Checkbox onClick={() => setPremium((value) => !value)} checked={premium} />
           </div>
-          <FormSubmitButton>Register</FormSubmitButton>
+          <Button onClick={onSubmit} disabled={isPending} className="w-full">
+            Register
+          </Button>
           <div className="text-gray-800 mt-6 text-center">
             Already have an account
             <LinkText to="/login">Log In</LinkText>

frontend/src/pages/Conversation/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import useGetUser from "hooks/api/useGetUser.ts";
 import { Roles } from "models/User.ts";
 import Conversations from "./Conversations.tsx";
+import useLogout from "../../../hooks/api/useLogout.ts";
 
 interface NavbarProps {
   id: ConversationId;
@@ -12,12 +13,14 @@ interface NavbarProps {
 function Navbar({ id }: NavbarProps) {
   const navigate = useNavigate();
   const { data } = useGetUser();
+  const logout = useLogout();
 
   return (
     <div className="bg-neutral-50 p-2 h-full flex flex-col items-center dark:bg-neutral-900">
       <Button className="my-4 w-full bg-blue-500 text-white" onClick={() => navigate("/conversation")}>
         New Chat
       </Button>
+      <Button onClick={logout}>Logout</Button>
       {data?.role === Roles.PAID && <Conversations id={id} />}
     </div>
   );