Merge pull request #7 from unovil/design-login

Design login

src/app.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: "Trocchi";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("/fonts/Trocchi-Regular.ttf");
+  }
+}

src/routes/login/+page.svelte

@@ -1,31 +1,74 @@
 <script lang="ts">
   import type { ActionData } from "./$types";
-  import {enhance} from "$app/forms";
+  import { enhance } from "$app/forms";
   export let form: ActionData;
+  let isHidden = true;
   console.log(`form is ${form}`);
 
+  const changePasswordVisibility = () => {
+    if (isHidden == true) isHidden = false;
+    else isHidden = true;
+  };
+
   // conditional css, if needed
   /* form?.invalidEmail
   form?.invalidUser
   form?.invalidPass
-  form?.incorrectPass
-  form?.duplicateUser */
+  form?.incorrectPass */
 </script>
 
-{#if form?.error}
-  <p>{form.error}</p>
-{/if}
+<div class="flex h-screen items-center justify-center bg-gray-100">
+  <div
+    class="bg-white rounded-lg p-6 shadow-md text-center font-sans-serif w-80"
+  >
+    <h2
+      class="text-lg font-semi-bold mb-6 flex items-center justify-center font-trocchi text-log-in-green transform scale-150"
+    >
+      <img src="/logo.png" alt="Logo" class="h-8 mr-2" />
+      Roamer
+    </h2>
+
+    {#if form?.error}
+      <p class="text-red-600 overflow-auto break-words mb-2">{form.error}</p>
+    {/if}
+
+    <form method="post" use:enhance>
+      <input
+        type="email"
+        placeholder="Email address"
+        name="email"
+        class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+        class:border-red-500={form?.invalidEmail || form?.invalidUser}
+      />
+      <div class="relative">
+        <input
+          type={isHidden ? "password" : "text"}
+          placeholder="Password"
+          name="password"
+          class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+          id="password"
+          class:border-red-500={form?.incorrectPass || form?.invalidPass}
+        />
 
-<form method="post" use:enhance>
-  <input
-    type="email"
-    placeholder="Email address"
-    name="email"
-  />
-  <br />
-  <input type="password" placeholder="Password" name="password" />
-  <br />
-  <button type="submit">Login</button>
-</form>
+        <button
+          type="button"
+          on:click={changePasswordVisibility}
+          class="absolute inset-y-0 right-0 px-3 py-2 bg-gray-200 text-gray-600 rounded-md"
+          >{isHidden ? "Show" : "Hide"}</button
+        >
+      </div>
+      <button
+        type="submit"
+        class="bg-log-in-green text-white rounded-md px-4 py-2 shadow hover:bg-green-500 transition duration-300 ease-in-out mt-5"
+        >Login</button
+      >
+    </form>
 
-<a href="/register">Not a user yet? Register here.</a>
+    <div class="mt-5">
+      Not a user yet? <a
+        href="/register"
+        class="text-green-500 mt-1 hover:text-log-in-green">Register here.</a
+      >
+    </div>
+  </div>
+</div>

src/routes/register/+page.svelte

@@ -1,30 +1,90 @@
 <script lang="ts">
-  import { enhance } from "$app/forms";
   import type { ActionData } from "./$types";
+  import { enhance } from "$app/forms";
   export let form: ActionData;
+  let isHidden = true;
   console.log(`form is ${form}`);
 
+  const changePasswordVisibility = () => {
+    if (isHidden == true) isHidden = false;
+    else isHidden = true;
+  };
   // used for conditional css, if needed.
   /* form?.invalidEmail
     form?.invalidFirstName
     form?.invalidLastName
-    form?.invalidPass */
+    form?.invalidPass
+    form?.duplicateUser */
 </script>
 
-{#if form?.error}
-  <p>{form.error}</p>
-{/if}
+<div class="flex h-screen items-center justify-center bg-gray-100">
+  <div
+    class="bg-white rounded-lg p-6 shadow-md text-center font-sans-serif w-80"
+  >
+    <h2
+      class="text-lg font-semi-bold mb-6 flex items-center justify-center font-trocchi text-log-in-green transform scale-150"
+    >
+      <img src="/logo.png" alt="Logo" class="h-8 mr-2" />
+      Roamer
+    </h2>
+
+    {#if form?.error}
+      <p class="text-red-600 overflow-auto break-words mb-2">{form.error}</p>
+    {/if}
+
+    <form method="post" use:enhance>
+      <input
+        type="email"
+        placeholder="Email address"
+        name="email"
+        class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+        class:border-red-500={form?.invalidEmail || form?.duplicateUser}
+      />
+
+      <input
+        type="text"
+        placeholder="First Name"
+        name="firstName"
+        class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+        class:border-red-500={form?.invalidFirstName}
+      />
 
-<form method="post" use:enhance>
-  <input type="email" placeholder="Email address" name="email" />
-  <br />
-  <input type="text" placeholder="First name" name="firstName" />
-  <br />
-  <input type="text" placeholder="Last name" name="lastName" />
-  <br />
-  <input type="password" placeholder="Password" name="password"/>
-  <br />
-  <button type="submit">Register</button>
-</form>
+      <input
+        type="text"
+        placeholder="Last Name"
+        name="lastName"
+        class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+        class:border-red-500={form?.invalidLastName}
+      />
 
-<a href="/login">Registered already? Sign in here.</a>
+      <div class="relative">
+        <input
+          type={isHidden ? "password" : "text"}
+          placeholder="Password"
+          name="password"
+          class="block border border-gray-300 rounded-md w-full p-2 mb-2 shadow"
+          class:border-red-500={form?.invalidPass}
+          id="password"
+        />
+        <button
+          type="button"
+          on:click={changePasswordVisibility}
+          class="absolute inset-y-0 right-0 px-3 py-2 bg-gray-200 text-gray-600 rounded-md"
+          >{isHidden ? "Show" : "Hide"}</button
+        >
+      </div>
+      <div class="flex items-center justify-start mb-2"></div>
+      <button
+        type="submit"
+        class="bg-log-in-green text-white rounded-md px-4 py-2 shadow hover:bg-green-500 transition duration-300 ease-in-out"
+        >Register</button
+      >
+    </form>
+    <div class="mt-5">
+      Registered already? <a
+        href="/login"
+        class="text-green-500 mt-1 hover:text-log-in-green">Sign in here.</a
+      >
+    </div>
+  </div>
+</div>

svelte.config.js

@@ -1,11 +1,15 @@
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		preprocess({ postcss: true })
+	],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.

tailwind.config.js

@@ -2,8 +2,14 @@
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'log-in-green': '#478665',
+      },
+      fontFamily: {
+        trocchi: ['"Trocchi"', 'serif']
+      },
+    },
   },
   plugins: [],
-}
-
+}