feat: add router and login (#1)

app/package.json

@@ -27,6 +27,7 @@
     "vite-plugin-solid": "^2.8.2"
   },
   "dependencies": {
+    "@solidjs/router": "^0.13.3",
     "solid-js": "^1.8.11"
   }
 }

app/src/index.tsx

@@ -1,6 +1,7 @@
 import { render } from 'solid-js/web';
+import { Router, Route } from '@solidjs/router';
 
-import { TodoList } from './todo-list';
+import { Login } from './pages/login';
 
 const root = document.getElementById('root');
 
@@ -10,4 +11,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
-render(() => <TodoList />, root!);
+render(
+  () => (
+    <Router>
+      <Route path="/login" component={Login} />
+    </Router>
+  ),
+  document.getElementById('root')!,
+)

app/src/pages/login.test.tsx

@@ -0,0 +1,39 @@
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+
+import { render, fireEvent, waitFor } from '@solidjs/testing-library';
+import { isInDocument, hasStyle } from 'solid-dom-testing';
+
+import { Login } from './login';
+
+const test = suite<ReturnType<typeof render>>('<Login />');
+
+test.before.each((context) => {
+  const returnValue = render(() => <Login />);
+  Object.getOwnPropertyNames(returnValue).forEach((name) => {
+    // @ts-expect-error
+    context[name] = returnValue[name];
+  });
+});
+
+test.after.each(({ unmount }) => unmount());
+
+// test target: it will render an username input and a password input
+test('it will render an username input and a password input', ({
+  getByPlaceholderText,
+}) => {
+  assert.ok(isInDocument(getByPlaceholderText('Username')));
+  assert.ok(isInDocument(getByPlaceholderText('******************')));
+});
+
+// test target: it will render an Sign In button
+test('it will render an Sign In button', ({ getByText }) => {
+  assert.ok(isInDocument(getByText('Sign In')));
+});
+
+// test target: it will render an Forgot Password link
+test('it will render an Forgot Password link', ({ getByText }) => {
+  assert.ok(isInDocument(getByText('Forgot Password?')));
+});
+
+test.run();

app/src/pages/login.tsx

@@ -0,0 +1,50 @@
+// this component is a simple login page
+
+export const Login = () => {
+  return (
+    <div class="bg-gray-100 h-screen flex items-center justify-center">
+      <div class="bg-white p-8 rounded shadow-md w-96">
+        <h1 class="text-2xl font-bold mb-6">Login</h1>
+        <form>
+          <div class="mb-4">
+            <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+              Username
+            </label>
+            <input
+              class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              id="username"
+              type="email"
+              placeholder="Username"
+            />
+          </div>
+          <div class="mb-6">
+            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+              Password
+            </label>
+            <input
+              class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
+              id="password"
+              type="password"
+              placeholder="******************"
+            />
+            <p class="text-red-500 text-xs italic">Please choose a password.</p>
+          </div>
+          <div class="flex items-center justify-between">
+            <button
+              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              type="button"
+            >
+              Sign In
+            </button>
+            <a
+              class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
+              href="#"
+            >
+              Forgot Password?
+            </a>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}