Login page

src/lib/component/Icon.svelte

@@ -3,15 +3,16 @@
 
   export let src: string | { a: { viewBox: string }; c: string } | undefined;
   export let href: string | undefined = undefined;
-  export let color: string | undefined;
+  export let color: string | undefined = undefined;
   export let size: string | undefined;
   export let ariaLabel: string | undefined = undefined;
+  export let className: string | undefined = undefined;
 </script>
 
 {#if href}
   <a {href} target="_blank" rel="noreferrer" class="w-min" aria-label={ariaLabel}>
-    <Icon {src} {color} {size} />
+    <Icon {src} {color} {size} {className} />
   </a>
 {:else}
-  <Icon {src} {color} {size} />
+  <Icon {src} {color} {size} {className} />
 {/if}

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,19 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  import Icons from './Icons';
+
+  let visible = false;
+  $: type = visible ? 'text' : 'password';
+  $: icon = visible ? Icons.Hidden : Icons.Visible;
+</script>
+
+<div class="relative">
+  <input {type} {...$$restProps} class="col-start-1 col-end-3 row-start-1 {$$props.class}" />
+  <button
+    type="button"
+    class="absolute inset-y-0 right-0 mr-4"
+    on:click={() => (visible = !visible)}
+  >
+    <Icon src={icon} size="1.5em" className="fill-rose-950/[.54]" />
+  </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-muted-red-400/60"
 >
   <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/layout.stories.ts

@@ -8,7 +8,8 @@ export default {
   title: 'Organisms/Layout',
   component: Layout,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'transparent' }
   },
   decorators: [() => LayoutDecorator]
 };

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-muted-red-500 px-10 py-10 pl-8">
+      <h1 class="self-start text-taupe-100">Área Membro</h1>
+      <input
+        type="text"
+        name="email"
+        placeholder="email"
+        bind:value={email}
+        class="my-6 ml-4 rounded-[15px] bg-taupe-100 p-4 text-sm text-rose-950/[.54] placeholder-rose-950/[.54] drop-shadow-lg placeholder:capitalize sm:text-sm lg:text-base xl:text-lg 2xl:text-xl"
+      />
+      <br />
+      <VariableVisibilityInput
+        name="password"
+        placeholder="password"
+        bind:value={password}
+        class="ml-4 rounded-[15px] bg-taupe-100 p-4 text-sm text-rose-950/[.54] placeholder-rose-950/[.54] drop-shadow-lg placeholder:capitalize sm:text-sm lg:text-base xl:text-lg 2xl:text-xl"
+      />
+      <br />
+    </div>
+    <button type="submit" class="my-4 w-full rounded-[15px] bg-taupe-100 p-4 text-muted-red-700"
+      >Iniciar Sessão</button
+    >
+    <br />
+    <p>{message}</p>
+    <br />
+  </form>
+</section>

src/routes/login/page.stories.ts

@@ -0,0 +1,15 @@
+import Page from './+page.svelte';
+import Layout from '@/+layout.svelte';
+import LayoutDecorator from '$lib/storybook-utils/LayoutDecorator.svelte';
+
+export default {
+  title: 'Pages/Login',
+  component: Page,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'clear' }
+  },
+  decorators: [() => Layout, () => LayoutDecorator]
+};
+
+export const Login = {};

src/routes/page.stories.ts

@@ -6,7 +6,8 @@ export default {
   title: 'Pages/HomePage',
   component: Page,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'transparent' }
   },
   decorators: [() => Layout, () => LayoutDecorator]
 };