s1

2024-07-30 20:59:12 +05:30
parent f65b67b2a5
commit 9c7a9882ed
6 changed files with 72 additions and 22 deletions
--- a/app/routes/sign-in.tsx
+++ b/app/routes/sign-in.tsx
@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { FormEvent } from 'react';
+
+export default function SignIn() {
+    const [userName, setUserName] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault(); // Prevent the default form submission
+
+        const data = {
+            userName,
+            password,
+        };
+        try {
+            const response = await fetch('https://iimtt-api.s38.siliconpin.com/api/sign-in', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+
+            const result = await response.json();
+            console.log('Success:', result);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+
+    return (
+        <section className="h-screen flex items-center justify-center">
+            <div className="container mx-auto px-4 max-w-xl">
+                <form onSubmit={handleSubmit} className="flex flex-col space-y-4 border-[1px] border-[#CFCFCF] rounded-[10px] shadow-lg py-10 px-6 ">
+                    <div className="flex flex-col space-y-2">
+                        <label htmlFor="userName">User Name:</label>
+                        <input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="text" name="userName" id="userName" value={userName} onChange={(e) => setUserName(e.target.value)} />
+                    </div>
+                    <div className="flex flex-col space-y-2">
+                        <label htmlFor="password">Password:</label>
+                        <input className="focus:outline-none border-[1px] focus:border-[#EF7A0C] p-2 rounded-[8px]" type="password" name="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
+                    </div>
+                    <label htmlFor="remember"><input type="checkbox" name="remember" id="remember" /> Remember Password</label>
+                    <br />
+                    <button className="bg-[#000] text-[#FFF] py-2.5 rounded-[8px]" type="submit" >Sign In</button>
+                </form>
+            </div>
+        </section>
+    );
+}