Login form and some login hooks

src/hooks/auth/login.hook.ts

@@ -0,0 +1,21 @@
+import { createSignal } from "solid-js";
+import { createStore } from "solid-js/store";
+
+const useLogin = () => {
+  const [loading, setLoading] = createSignal(false);
+  const [form, setForm] = createStore({
+    username: "",
+    password: "",
+  });
+  const handleInput = (ev: any) => {
+    setForm([ev.currentTarget.name], ev.currentTarget.value);
+  };
+  const handleLogin = (ev: any) => {
+    ev.preventDefault();
+    setLoading(true);
+  };
+
+  return { handleInput, loading, handleLogin, form };
+};
+
+export default useLogin;

src/index.css

@@ -0,0 +1,8 @@
+form {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}

src/routes/views/auth/Login.tsx

@@ -1,10 +1,39 @@
-import type { Component } from "solid-js";
+import { Component, Show } from "solid-js";
+import useLogin from "../../../hooks/auth/login.hook";
+const { handleLogin, handleInput, loading, form } = useLogin();
 const Login: Component = () => {
   return (
     <div>
-            <h2>Login</h2>
+      <form onsubmit={handleLogin}>
+        <div>
+          {/* <label for="name">Username or Email</label> */}
+          <input
+            type="text"
+            name="username"
+            placeholder="Email/Username"
+            value={form.username}
+            onInput={handleInput}
+          />
         </div>
-    )
-}
+        <div>
+          {/* <label for="name">Password</label> */}
+          <input
+            type="password"
+            name="password"
+            placeholder="Password"
+            value={form.password}
+            onInput={handleInput}
+          />
+        </div>
+
+        <button disabled={loading()} type="submit">
+          <Show when={!loading()} fallback="Logging in...">
+            Log In
+          </Show>
+        </button>
+      </form>
+    </div>
+  );
+};
 
 export default Login;