Login page

src/lib/component/Icons.ts

@@ -7,6 +7,8 @@ import FaBrandsLinkedin from 'svelte-icons-pack/fa/FaBrandsLinkedin';
 import FaSolidUser from 'svelte-icons-pack/fa/FaSolidUser';
 import FaBars from 'svelte-icons-pack/fa/FaSolidBars';
 import FaTimes from 'svelte-icons-pack/fa/FaSolidTimes';
+import IoEye from 'svelte-icons-pack/io/IoEye';
+import IoEyeOff from 'svelte-icons-pack/io/IoEyeOff';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -17,7 +19,9 @@ const Icons = {
   Linkedin: FaBrandsLinkedin,
   User: FaSolidUser,
   Bars: FaBars,
-  Times: FaTimes
+  Times: FaTimes,
+  Visible: IoEye,
+  Hidden: IoEyeOff
 };
 
 export default Icons;

src/lib/component/VariableVisibilityInput.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  import Icons from './Icons';
+
+  export let iconColor: string | undefined = 'quaternary54';
+
+  let visible = false;
+  $: type = visible ? 'text' : 'password';
+  $: icon = visible ? Icons.Hidden : Icons.Visible;
+</script>
+
+<div class="grid">
+  <input {type} {...$$restProps} class="col-start-1 col-end-3 row-start-1 {$$props.class}" />
+  <button
+    type="button"
+    class="{'fill-' + iconColor} z-40 col-start-2 col-end-3 row-start-1 m-4"
+    on:click={() => (visible = !visible)}
+  >
+    <Icon src={icon} size="1.5em"/>
+  </button>
+</div>

src/lib/layout/MemberButton.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <a
-  href="/#"
+  href="/login"
   class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-tertiary60"
 >
   <p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>

src/lib/layout/Navbar.svelte

@@ -1,5 +1,5 @@
 <nav
-  class="fixed hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
+  class="hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
   aria-label="Navigation Bar"
 >
   <div class="flex w-full justify-start">

src/routes/+layout.svelte

@@ -9,7 +9,7 @@
 
 <Sidebar />
 <Navbar />
-<main class="bg-ni-primary flex-grow">
+<main class="bg-ni-primary relative flex-grow">
   <BackgroundHexagon position="right" />
   <slot />
 </main>

src/routes/login/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import VariableVisibilityInput from '@/lib/component/VariableVisibilityInput.svelte';
+
   let email = '';
   let password = '';
   let message = '';
@@ -18,14 +20,33 @@
   }
 </script>
 
-<form on:submit={submitLogin}>
-  <input type="text" name="email" placeholder="email" bind:value={email} />
-  <br />
-  <input type="password" name="password" placeholder="password" bind:value={password} />
-  <br />
-  <button type="submit">Login</button>
-  <br />
-  <p>{message}</p>
-  <br />
-  <button><a href="/profile">Profile</a></button>
-</form>
+<section
+  class="absolute mx-auto flex h-full w-full min-w-[40%] flex-col items-center justify-center font-raleway text-base font-[700] sm:text-base lg:text-lg xl:text-xl 2xl:text-2xl"
+>
+  <form on:submit={submitLogin}>
+    <div class="mb-4 grid justify-center rounded-[15px] bg-secondary pl-8 px-10 py-10">
+      <h1 class="self-start text-lightRed">Área Membro</h1>
+        <input
+          type="text"
+          name="email"
+          placeholder="email"
+          bind:value={email}
+          class="ml-4 my-6 rounded-[15px] bg-lightRed p-4 text-quaternary54 placeholder-quaternary54 drop-shadow-lg placeholder:capitalize"
+        />
+        <br />
+        <VariableVisibilityInput
+          name="password"
+          placeholder="password"
+          bind:value={password} iconColor="red"
+          class="ml-4 rounded-[15px] bg-lightRed p-4 text-quaternary54 placeholder-quaternary54 drop-shadow-lg placeholder:capitalize"
+        />
+        <br />
+    </div>
+    <button type="submit" class="my-4 w-full rounded-[15px] bg-white p-4 text-primary"
+      >Iniciar Sessão</button
+    >
+    <br />
+    <p>{message}</p>
+    <br />
+  </form>
+</section>

tailwind.config.cjs

@@ -2,6 +2,9 @@ const primaryColor = '#872020FF';
 const secondaryColor = '#B33636FF';
 const tertiaryColor = '#C04343FF';
 const tertiary60Color = '#C0434399';
+const quaternaryColor = '#411315FF';
+const quaternary54Color = '#4113158A';
+const lightRedColor = '#FFE9E9FF';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -12,7 +15,10 @@ module.exports = {
         primary: primaryColor,
         secondary: secondaryColor,
         tertiary: tertiaryColor,
-        tertiary60: tertiary60Color
+        tertiary60: tertiary60Color,
+        quaternary: quaternaryColor,
+        quaternary54: quaternary54Color,
+        lightRed: lightRedColor
       },
 
       fontFamily: {