Merge pull request #16 from IgorDuino/dev

registration
IgorDuino · Jul 22, 2024 · c9576d0 · c9576d0
2 parents e4e289e + 68f34d6
commit c9576d0
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 15 deletions.
diff --git a/frontend/src/app/auth/page.tsx b/frontend/src/app/auth/page.tsx
@@ -61,12 +61,6 @@ export default function LoginForm() {
             <div className="grid gap-2">
               <div className="flex items-center">
                 <Label htmlFor="password">Password</Label>
-                <Link
-                  href="#"
-                  className="ml-auto inline-block text-sm underline"
-                >
-                  Forgot your password?
-                </Link>
               </div>
               <Input
                 id="password"
@@ -79,19 +73,12 @@ export default function LoginForm() {
             {error && <p className="text-sm text-red-500">{error}</p>}
             <Button
               type="submit"
-              variant="secondary"
+              variant="action"
               className="w-full"
               disabled={loading}
             >
               {loading ? "Loading..." : "Log In"}
             </Button>
-            <Button variant="action" className="w-full" disabled={loading}>
-              {loading ? "Loading..." : "Sign Up"}
-            </Button>
-            <hr />
-            <Button variant="outline" className="w-full">
-              Login with Google
-            </Button>
           </form>
         </CardContent>
       </Card>

diff --git a/frontend/src/app/auth/registration/page.tsx b/frontend/src/app/auth/registration/page.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { registeration } from "@/lib/api/api";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function RegistrationForm() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [password2, setPassword2] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const response = await registeration(username, password, password2);
+      if (response.status == 204) {
+        router.push("/auth");
+      } else {
+        setError(`Error: ${await response.text()}`);
+      }
+    } catch (error) {
+      setError(error as string);
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container py-24 lg:py-32">
+      <Card className="mx-auto max-w-sm">
+        <CardHeader>
+          <CardTitle className="text-2xl">Registration</CardTitle>
+          <CardDescription>
+            Enter your name and come up with a password
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="grid gap-4">
+            <div className="grid gap-2">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <div className="flex items-center">
+                <Label htmlFor="password">Password</Label>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="grid gap-2">
+              <div className="flex items-center">
+                <Label htmlFor="password">Password repeat</Label>
+              </div>
+              <Input
+                id="password"
+                type="password"
+                value={password2}
+                onChange={(e) => setPassword2(e.target.value)}
+                required
+              />
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+            <Button variant="action" className="w-full" disabled={loading}>
+              {loading ? "Loading..." : "Sign Up"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/src/components/elements/header.tsx b/frontend/src/components/elements/header.tsx
@@ -102,7 +102,7 @@ export default function Header() {
               <Link href="/auth">Login</Link>
             </Button>
             <Button variant="action" asChild>
-              <Link href="/auth">Sign Up</Link>
+              <Link href="/auth/registration">Sign Up</Link>
             </Button>
           </>
         )}

diff --git a/frontend/src/lib/api/api.ts b/frontend/src/lib/api/api.ts
@@ -47,6 +47,19 @@ export const login = async (username: string, password: string): Promise<string>
     return response.key;
 };
 
+export const registeration = async (username: string, password1: string, password2: string) => {
+    const url = '/auth/registration/';
+    const headers: HeadersInit = {
+        'Content-Type': 'application/json',
+    };
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+        method: 'POST',
+        headers: headers,
+        body: JSON.stringify({ username, password1, password2 }),
+    });
+    return response;
+}
+
 export const fetchMeetings = async (participant=false): Promise<Meeting[]> => {
     const url = participant ? '/meetings/?participant' : '/meetings/';
     return apiRequest<Meeting[]>(url, 'GET');