feat: signin

app/components/Header.tsx

@@ -85,7 +85,7 @@ const Header = ({ user, route }: Props) => {
             {user ? (
               <div className="dropdown dropdown-end">
                 <div tabIndex={0} className="btn btn-ghost rounded-full p-0">
-                  <div className="rounded-full w-10 h-10 m-1 inline-flex justify-center items-center bg-white text-3xl">
+                  <div className="rounded-full w-10 h-10 m-1 inline-flex justify-center items-center bg-primary-content text-primary text-3xl">
                     {user.icon ?? user.username[0]}
                   </div>
                 </div>

app/routes/login.tsx

@@ -1,6 +1,6 @@
 import type { ActionFunction, LinksFunction, MetaFunction } from "remix";
 import { useActionData, json, Link, useSearchParams, Form } from "remix";
-import { login, createUserSession, register } from "~/utils/session.server";
+import { login, createUserSession } from "~/utils/session.server";
 import Header from "../components/Header";
 
 export const links: LinksFunction = () => {
@@ -104,7 +104,7 @@ export default function Login() {
                   type="text"
                   id="username-input"
                   name="username"
-                  className="input"
+                  className="input input-bordered"
                   defaultValue={actionData?.fields?.username}
                   aria-invalid={Boolean(actionData?.fieldErrors?.username)}
                   aria-describedby={
@@ -143,7 +143,7 @@ export default function Login() {
                 <input
                   id="password-input"
                   name="password"
-                  className="input"
+                  className="input input-bordered"
                   defaultValue={actionData?.fields?.password}
                   type="password"
                   aria-invalid={

app/routes/signin.tsx

@@ -1,7 +1,8 @@
 import type { ActionFunction, LinksFunction, MetaFunction } from "remix";
 import { useActionData, json, Link, useSearchParams, Form } from "remix";
 import { db } from "~/utils/db.server";
-import { login, createUserSession, register } from "~/utils/session.server";
+import { createUserSession, register } from "~/utils/session.server";
+import Header from "../components/Header";
 
 export const links: LinksFunction = () => {
   return [];
@@ -9,8 +10,8 @@ export const links: LinksFunction = () => {
 
 export const meta: MetaFunction = () => {
   return {
-    title: "Explit | Login",
+    title: "Explit | Sign in",
-    description: "Login to track and split your expenses!",
+    description: "Sign in to track and split your expenses!",
   };
 };
 
@@ -26,6 +27,18 @@ function validatePassword(password: unknown) {
   }
 }
 
+function validateConfirmPassword(confirmPassword: unknown, password: string) {
+  if (typeof confirmPassword !== "string" || confirmPassword !== password) {
+    return `Passwords must match`;
+  }
+}
+
+function validateIcon(icon: unknown) {
+  if (typeof icon !== "string" || icon.length > 2) {
+    return `Icons must be a single character, e.g. "A" or "😎"`;
+  }
+}
+
 function validateTeamId(teamId: unknown) {
   if (typeof teamId !== "string" || teamId.length < 1) {
     return "You must indicate an arbitrary team ID";
@@ -37,11 +50,14 @@ type ActionData = {
   fieldErrors?: {
     username: string | undefined;
     password: string | undefined;
+    teamId: string | undefined;
+    confirmPassword: string | undefined;
+    icon: string | undefined;
   };
   fields?: {
-    loginType: string;
     username: string;
     password: string;
+    confirmPassword: string;
     teamId?: string;
     icon?: string;
   };
@@ -51,47 +67,37 @@ const badRequest = (data: ActionData) => json(data, { status: 400 });
 
 export const action: ActionFunction = async ({ request }) => {
   const form = await request.formData();
-  const loginType = form.get("loginType");
   const username = form.get("username");
   const password = form.get("password");
-  const icon = form.get("icon");
+  const confirmPassword = form.get("confirmPassword");
+  const icon =
+    form.get("icon") ??
+    (typeof username === "string" ? username[0] : undefined);
   const teamId = form.get("teamId");
   const redirectTo = form.get("redirectTo") || "/expenses";
   if (
-    typeof loginType !== "string" ||
     typeof username !== "string" ||
     typeof password !== "string" ||
-    (loginType === "register" &&
+    typeof confirmPassword !== "string" ||
-      (typeof icon !== "string" ||
     typeof teamId !== "string" ||
-        typeof redirectTo !== "string"))
+    typeof redirectTo !== "string"
   ) {
     return badRequest({
       formError: `Form not submitted correctly.`,
     });
   }
 
-  const fields = { loginType, username, password, teamId };
+  const fields = { username, password, confirmPassword, teamId };
   const fieldErrors = {
     username: validateUsername(username),
     password: validatePassword(password),
-    teamId: loginType === "register" && validateTeamId(teamId),
+    confirmPassword: validateConfirmPassword(confirmPassword, password),
+    icon: validateIcon(icon),
+    teamId: validateTeamId(teamId),
   };
   if (Object.values(fieldErrors).some(Boolean))
     return badRequest({ fieldErrors, fields });
 
-  switch (loginType) {
-    case "login": {
-      const user = await login({ username, password });
-      if (!user) {
-        return badRequest({
-          fields,
-          formError: `Username/Password combination is incorrect`,
-        });
-      }
-      return createUserSession(user.id, redirectTo);
-    }
-    case "register": {
   const userExists = await db.user.findFirst({
     where: { username },
   });
@@ -110,14 +116,6 @@ export const action: ActionFunction = async ({ request }) => {
     });
   }
   return createUserSession(user.id, redirectTo);
-    }
-    default: {
-      return badRequest({
-        fields,
-        formError: `Login type invalid`,
-      });
-    }
-  }
 };
 
 export default function Login() {
@@ -125,11 +123,15 @@ export default function Login() {
   const [searchParams] = useSearchParams();
 
   return (
-    <div className="container">
+    <>
-      <div className="content" data-light="">
+      <Header />
-        <h1>Login</h1>
+      <div className="container mx-auto min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="card bg-base-200 w-full shadow-lg max-w-lg">
+          <div className="card-body w-full">
+            <h1 className="card-title">Sign In</h1>
             <Form
               method="post"
+              className="mt-5"
               aria-describedby={
                 actionData?.formError ? "form-error-message" : undefined
               }
@@ -139,129 +141,276 @@ export default function Login() {
                 name="redirectTo"
                 value={searchParams.get("redirectTo") ?? undefined}
               />
-          <fieldset>
+              <div className="form-control mb-3">
-            <legend className="sr-only">Login or Register?</legend>
+                <label htmlFor="username-input" className="label">
-            <label>
+                  <span className="label-text">Username</span>
-              <input
-                type="radio"
-                name="loginType"
-                value="login"
-                defaultChecked={
-                  !actionData?.fields?.loginType ||
-                  actionData?.fields?.loginType === "login"
-                }
-              />{" "}
-              Login
                 </label>
-            <label>
-              <input
-                type="radio"
-                name="loginType"
-                value="register"
-                defaultChecked={actionData?.fields?.loginType === "register"}
-              />{" "}
-              Register
-            </label>
-          </fieldset>
-          <div>
-            <label htmlFor="username-input">Username</label>
                 <input
                   type="text"
                   id="username-input"
                   name="username"
+                  className={`input input-bordered${
+                    Boolean(actionData?.fieldErrors?.username)
+                      ? " input-error"
+                      : ""
+                  }`}
                   defaultValue={actionData?.fields?.username}
                   aria-invalid={Boolean(actionData?.fieldErrors?.username)}
                   aria-describedby={
-                actionData?.fieldErrors?.username ? "username-error" : undefined
+                    actionData?.fieldErrors?.username
+                      ? "username-error"
+                      : undefined
                   }
                 />
-            {actionData?.fieldErrors?.username ? (
+                {actionData?.fieldErrors?.username && (
-              <p
+                  <div className="alert alert-error mt-2" role="alert">
-                className="form-validation-error"
+                    <div className="flex-1">
-                role="alert"
+                      <svg
-                id="username-error"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-6 h-6 mx-2 stroke-current"
                       >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        ></path>
+                      </svg>
+                      <label id="username-error">
                         {actionData?.fieldErrors.username}
-              </p>
+                      </label>
-            ) : null}
                     </div>
-          <div>
+                  </div>
-            <label htmlFor="username-input">Team ID</label>
+                )}
+              </div>
+              <div className="form-control mb-3">
+                <label htmlFor="icon-input" className="label">
+                  <span className="label-text">Icon</span>
+                </label>
                 <input
                   type="text"
-              id="team-id-input"
-              name="teamId"
-              defaultValue={actionData?.fields?.teamId}
-              aria-hidden={actionData?.fields?.loginType === "login"}
-              aria-invalid={Boolean(actionData?.fieldErrors?.teamId)}
-              aria-describedby={
-                actionData?.fieldErrors?.teamId ? "teamId-error" : undefined
-              }
-            />
-            {actionData?.fieldErrors?.teamId ? (
-              <p
-                className="form-validation-error"
-                role="alert"
-                id="teamId-error"
-              >
-                {actionData?.fieldErrors.teamId}
-              </p>
-            ) : null}
-          </div>
-          <div>
-            <label htmlFor="username-input">Icon (letter or emoji)</label>
-            <input
-              type="text"
-              maxLength={1}
-              aria-hidden={actionData?.fields?.loginType === "login"}
                   id="icon-input"
                   name="icon"
+                  className={`input input-bordered${
+                    Boolean(actionData?.fieldErrors?.icon)
+                      ? " input-warning"
+                      : ""
+                  }`}
                   defaultValue={actionData?.fields?.icon}
+                  aria-invalid={Boolean(actionData?.fieldErrors?.icon)}
+                  aria-describedby={
+                    actionData?.fieldErrors?.icon ? "icon-error" : undefined
+                  }
                 />
+                <label className="label">
+                  <span className="label-text-alt">
+                    Icon defaults to inital letter of username, can be a single
+                    character or emoji
+                  </span>
+                </label>
+                {actionData?.fieldErrors?.icon && (
+                  <div className="alert alert-error mt-2" role="alert">
+                    <div className="flex-1">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-6 h-6 mx-2 stroke-current"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        ></path>
+                      </svg>
+                      <label id="icon-error">
+                        {actionData?.fieldErrors.icon}
+                      </label>
                     </div>
-          <div>
+                  </div>
-            <label htmlFor="password-input">Password</label>
+                )}
+              </div>
+              <div className="form-control mb-3">
+                <label htmlFor="password-input" className="label">
+                  <span className="label-text">Password</span>
+                </label>
                 <input
                   id="password-input"
                   name="password"
+                  className={`input input-bordered${
+                    Boolean(actionData?.fieldErrors?.password)
+                      ? " input-error"
+                      : ""
+                  }`}
                   defaultValue={actionData?.fields?.password}
                   type="password"
                   aria-invalid={
                     Boolean(actionData?.fieldErrors?.password) || undefined
                   }
                   aria-describedby={
-                actionData?.fieldErrors?.password ? "password-error" : undefined
+                    actionData?.fieldErrors?.password
+                      ? "password-error"
+                      : undefined
                   }
                 />
-            {actionData?.fieldErrors?.password ? (
+                {actionData?.fieldErrors?.password && (
-              <p
+                  <div className="alert alert-error mt-2" role="alert">
-                className="form-validation-error"
+                    <div className="flex-1">
-                role="alert"
+                      <svg
-                id="password-error"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-6 h-6 mx-2 stroke-current"
                       >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        ></path>
+                      </svg>
+                      <label id="password-error">
                         {actionData?.fieldErrors.password}
-              </p>
+                      </label>
-            ) : null}
                     </div>
-          <div id="form-error-message">
+                  </div>
-            {actionData?.formError ? (
+                )}
-              <p className="form-validation-error" role="alert">
+              </div>
+              <div className="form-control mb-3">
+                <label htmlFor="confirmPassword-input" className="label">
+                  <span className="label-text">Confirm password</span>
+                </label>
+                <input
+                  id="confirmPassword-input"
+                  name="confirmPassword"
+                  className={`input input-bordered${
+                    Boolean(actionData?.fieldErrors?.confirmPassword)
+                      ? " input-error"
+                      : ""
+                  }`}
+                  defaultValue={actionData?.fields?.confirmPassword}
+                  type="password"
+                  aria-invalid={
+                    Boolean(actionData?.fieldErrors?.confirmPassword) ||
+                    undefined
+                  }
+                  aria-describedby={
+                    actionData?.fieldErrors?.confirmPassword
+                      ? "confirmPassword-error"
+                      : undefined
+                  }
+                />
+                {actionData?.fieldErrors?.confirmPassword && (
+                  <div className="alert alert-error mt-2" role="alert">
+                    <div className="flex-1">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-6 h-6 mx-2 stroke-current"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        ></path>
+                      </svg>
+                      <label id="confirmPassword-error">
+                        {actionData?.fieldErrors.confirmPassword}
+                      </label>
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="form-control mb-3">
+                <label htmlFor="teamId-input" className="label">
+                  <span className="label-text">Team</span>
+                </label>
+                <input
+                  type="text"
+                  id="teamId-input"
+                  name="teamId"
+                  className={`input input-bordered${
+                    Boolean(actionData?.fieldErrors?.teamId)
+                      ? " input-error"
+                      : ""
+                  }`}
+                  defaultValue={actionData?.fields?.teamId}
+                  aria-invalid={Boolean(actionData?.fieldErrors?.teamId)}
+                  aria-describedby={
+                    actionData?.fieldErrors?.teamId ? "teamid-error" : undefined
+                  }
+                />
+                {actionData?.fieldErrors?.teamId && (
+                  <div className="alert alert-error mt-2" role="alert">
+                    <div className="flex-1">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="w-6 h-6 mx-2 stroke-current"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        ></path>
+                      </svg>
+                      <label id="teamid-error">
+                        {actionData?.fieldErrors.teamId}
+                      </label>
+                    </div>
+                  </div>
+                )}
+              </div>
+              {actionData?.formError && (
+                <div className="alert alert-error mt-5" role="alert">
+                  <div className="flex-1">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      className="w-6 h-6 mx-2 stroke-current"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                      ></path>
+                    </svg>
+                    <label id="form-error-message">
                       {actionData?.formError}
-              </p>
+                    </label>
-            ) : null}
                   </div>
-          <button type="submit" className="button">
+                </div>
-            Submit
+              )}
+              <div className="text-center max-w-xs mx-auto mt-10">
+                <button type="submit" className="btn btn-primary btn-block">
+                  Sign in
                 </button>
+              </div>
             </Form>
           </div>
-      <div className="links">
+        </div>
-        <ul>
+      </div>
+      <ul className="menu px-3 menu-horizontal rounded-box max-w-xs mx-auto flex items-center justify-evenly">
         <li>
-            <Link to="/">Home</Link>
+          <Link to="/" className="btn btn-outline btn-accent">
+            Home
+          </Link>
+        </li>
+        <li>
+          <Link to="/login" className="btn btn-outline btn-accent">
+            Login
+          </Link>
         </li>
       </ul>
-      </div>
+    </>
-    </div>
   );
 }