Added Ts.ED

frontend/src/routes/index.tsx

@@ -0,0 +1,21 @@
+import { Route, Routes } from "@solidjs/router";
+import { Component, lazy } from "solid-js";
+
+const Home = lazy(() => import("./views/home/Home"));
+const AuthLayout = lazy(() => import("./views/auth/AuthLayout"));
+const Login = lazy(() => import("./views/auth/Login"));
+const Register = lazy(() => import("./views/auth/Register"));
+
+const AppRouter: Component = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />}></Route>
+      <Route path="/auth" element={<AuthLayout />}>
+        <Route path="/login" element={<Login />}></Route>
+        <Route path="/register" element={<Register />}></Route>
+      </Route>
+    </Routes>
+  );
+};
+
+export default AppRouter;

frontend/src/routes/views/MainLayout.tsx

@@ -0,0 +1,13 @@
+interface MainViewProps {
+    // add props here
+}
+
+function MainView(props: MainViewProps) {
+    return (
+        <div>
+            <h2>MainView</h2>
+        </div>
+    )
+}
+
+export default MainView;

frontend/src/routes/views/auth/AuthLayout.tsx

@@ -0,0 +1,16 @@
+import type { Component } from "solid-js";
+import { Outlet } from "@solidjs/router";
+
+const AuthLayout: Component = () => {
+  return (
+    <div>
+      <header>Head</header>
+      <div>
+        <Outlet />
+      </div>
+      <footer>Footer</footer>
+    </div>
+  );
+}
+
+export default AuthLayout;

frontend/src/routes/views/auth/Login.tsx

@@ -0,0 +1,39 @@
+import { Component, Show } from "solid-js";
+import useLogin from "../../../hooks/auth/login.hook";
+const { handleLogin, handleInput, loading, form } = useLogin();
+const Login: Component = () => {
+  return (
+    <div>
+      <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;

frontend/src/routes/views/auth/Register.tsx

@@ -0,0 +1,10 @@
+import type { Component } from "solid-js";
+const Register: Component = () => {
+    return (
+        <div>
+            <h2>Register</h2>
+        </div>
+    )
+}
+
+export default Register;

frontend/src/routes/views/home/Home.tsx

@@ -0,0 +1,11 @@
+import type { Component } from "solid-js";
+
+const Home: Component = () => {
+    return (
+        <div>
+            <h2>Home</h2>
+        </div>
+    )
+}
+
+export default Home;