modamo.xyz
this repo has no description
1"use client";
2
3import { useState } from "react";
4
5const LoginForm = () => {
6 const [handle, setHandle] = useState("");
7 const [isLoading, setIsLoading] = useState(false);
8
9 const handleSubmit = async (event: Event) => {
10 event.preventDefault();
11
12 setIsLoading(true);
13
14 try {
15 const response = await fetch("/oauth/login", {
16 body: JSON.stringify({ handle }),
17 headers: { "Content-Type": "application/json" },
18 method: "POST"
19 });
20 const json = await response.json();
21
22 if(!response.ok){
23 throw new Error(json.error || "Login failed")
24 }
25
26 window.location.href = json.redirectURL;
27 } catch (error) {
28 } finally {
29 setIsLoading(false);
30 }
31 };
32
33 return (
34 <form
35 className="bg-amber-100 flex flex-col h-fit items-center justify-center p-4 rounded-2xl w-1/3"
36 onSubmit={handleSubmit}
37 >
38 <div className="flex flex-col p-4 rounded-2xl w-full">
39 <label
40 className="text-emerald-900"
41 htmlFor="handle"
42 >
43 Handle
44 </label>
45 <input
46 className="bg-emerald-900 px-4 py-2 rounded-lg"
47 id="handle"
48 onChange={(event) => setHandle(event.currentTarget.value)}
49 placeholder="alice.blacksky.app"
50 type="text"
51 value={handle}
52 />
53 </div>
54 <button
55 className="hover:bg-emerald-800 bg-emerald-900 cursor-pointer px-4 py-2 rounded-lg"
56 disabled={!handle || isLoading}
57 >
58 {isLoading ? "Logging in ..." : "Log into the Atmosphere"}
59 </button>
60 </form>
61 );
62};
63
64export default LoginForm;