Added Ts.ED

frontend/src/App.tsx

@@ -0,0 +1,8 @@
+import type { Component } from "solid-js";
+import AppRouter from "./routes";
+
+const App: Component = () => {
+  return <AppRouter />;
+};
+
+export default App;

frontend/src/graphql/client.ts

@@ -0,0 +1,5 @@
+import { createClient } from "@urql/core";
+
+const client = createClient({
+    url: ''
+});

frontend/src/graphql/queries/auth.graphql

@@ -0,0 +1,31 @@
+# mutation {
+#   loginAction($arg1: LoginInput!) {
+#     access_token
+#     expires_in
+#     refresh_expires_in
+#     refresh_token
+#     scope
+#     session_state
+#     token_type
+#   }
+# }
+
+query allUsers {
+  user {
+    id
+  }
+}
+
+query getUserByEmail($email: String!) {
+  user(where: { email: { _eq: $email } }) {
+    id,
+    password
+  }
+}
+
+query getUserByUsername($username: String!) {
+  user(where: { username: { _eq: $username } }) {
+    id,
+    password
+  }
+}

frontend/src/hooks/auth/login.hook.ts

@@ -0,0 +1,22 @@
+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;

frontend/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;
+}

frontend/src/index.tsx

@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+
+import "./index.css";
+import App from "./App";
+import { Router } from "@solidjs/router";
+
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById("main-container") as HTMLElement
+);

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;