Merge pull request #214 from NIAEFEUP/feature/login-page

Login page

src/lib/components/icons/icon.svelte

@@ -4,15 +4,16 @@
 
   export let src: IconType;
   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/components/icons/icons.ts

@@ -8,7 +8,7 @@ import {
   FaSolidBars,
   FaSolidGlobe
 } from 'svelte-icons-pack/fa';
-import { IoMail, IoClose } from 'svelte-icons-pack/io';
+import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -20,7 +20,9 @@ const Icons = {
   User: FaSolidUser,
   Bars: FaSolidBars,
   Close: IoClose,
-  Globe: FaSolidGlobe
+  Globe: FaSolidGlobe,
+  Visible: IoEye,
+  Hidden: IoEyeOff
 };
 
 export default Icons;

src/routes/(app)/(home)/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]
 };

src/routes/(app)/+layout.svelte

@@ -20,10 +20,12 @@
 
 <style>
   :global(html) {
+    height: 100%;
     min-height: 100vh;
   }
 
   :global(body) {
+    height: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;

src/routes/(app)/_components/layout/footer.svelte

@@ -119,7 +119,7 @@
       </div>
     </div>
     <div
-      class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-5"
+      class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-4"
     >
       <Icon
         src={Icons.Instagram}

src/routes/(app)/_components/layout/member-button.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/routes/(app)/_components/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/(app)/_components/layout/sidebar.svelte

@@ -11,7 +11,7 @@
 
 {#if sidebarClosed}
   <nav
-    class="fixed grid h-fit w-full grid-cols-[1fr_4em] grid-rows-1 justify-items-center bg-transparent px-2 py-4 text-white"
+    class="fixed grid h-fit w-full grid-cols-[1fr_4em] grid-rows-1 justify-items-center px-2 py-4 text-white"
   >
     <button
       class="col-start-2 h-fit w-1/2 sm:invisible"
@@ -23,7 +23,7 @@
   </nav>
 {:else}
   <nav
-    class="bg-ni-sidebar absolute grid h-screen w-screen grid-cols-[1fr_4em] grid-rows-[4em_1fr] justify-items-center px-2 py-4 sm:invisible"
+    class="bg-ni-sidebar absolute z-50 grid h-screen w-screen grid-cols-[1fr_4em] grid-rows-[4em_1fr] justify-items-center px-2 py-4 sm:invisible"
   >
     <BackgroundHexagon position="left" />
     <button

src/routes/(app)/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/(app)/login/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import VariableVisibilityInput from './_components/variable-visibility-input.svelte';
+
   let email = '';
   let password = '';
   let message = '';
@@ -18,14 +20,35 @@
   }
 </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="flex h-full w-full 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="grid justify-center rounded-[15px] bg-muted-red-500 p-[5dvh] lg:min-w-[60%]">
+      <h1 class="text-taupe-100">Área Membro</h1>
+      <input
+        type="text"
+        name="email"
+        placeholder="email"
+        bind:value={email}
+        class="my-[2dvh] rounded-[15px] bg-taupe-100 p-[2dvh] 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="rounded-[15px] bg-taupe-100 p-[2dvh] 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="z-20 my-4 w-full rounded-[15px] bg-taupe-100 p-[2dvh] text-muted-red-700"
+      >Iniciar Sessão</button
+    >
+    <br />
+    <p class="h-[2dvh] text-center">{message}</p>
+    <br />
+  </form>
+</section>

src/routes/(app)/login/_components/variable-visibility-input.stories.ts

@@ -0,0 +1,48 @@
+import { fireEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import VariableVisibilityInput from './variable-visibility-input.svelte';
+
+export default {
+  title: 'Atoms/Inputs',
+  component: VariableVisibilityInput,
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const VariableVisibility = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Check initial input type', async () => {
+      const input = await canvas.findByTestId('password-input');
+
+      await expect(input).toHaveAttribute('type', 'password');
+    });
+
+    await step('Enter test text', async () => {
+      const input = await canvas.findByTestId('password-input');
+
+      await fireEvent.change(input, { target: { value: 'test_password' } });
+
+      await expect(input).toHaveValue('test_password');
+    });
+
+    await step('Show password', async () => {
+      const toggleButton = await canvas.findByRole('button');
+
+      await fireEvent.click(toggleButton);
+
+      const input = await canvas.findByRole('textbox');
+      await expect(input).toHaveAttribute('type', 'text');
+    });
+
+    await step('Hide password', async () => {
+      const toggleButton = await canvas.findByRole('button');
+      await fireEvent.click(toggleButton);
+
+      const input = await canvas.findByTestId('password-input');
+      await expect(input).toHaveAttribute('type', 'password');
+    });
+  }
+};

src/routes/(app)/login/_components/variable-visibility-input.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Icon from '@/lib/components/icons/icon.svelte';
+  import Icons from '@/lib/components/icons/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}"
+    data-testid="password-input"
+    aria-label="Password input"
+  />
+  <button
+    type="button"
+    class="absolute inset-y-0 right-0 mr-4"
+    on:click={() => (visible = !visible)}
+    aria-label={visible ? 'Hide password' : 'Show password'}
+    title={visible ? 'Hide password' : 'Show password'}
+  >
+    <Icon src={icon} size="1.5em" className="fill-rose-950/[.54]" />
+  </button>
+</div>

src/routes/(app)/login/page.stories.ts

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

src/routes/api/[...endpoint]/proxy.ts

@@ -1,6 +1,7 @@
 import type { Cookies } from '@sveltejs/kit';
 import { PUBLIC_API_URL, PUBLIC_JWT_REFRESH_KEY, PUBLIC_JWT_ACCESS_KEY } from '$env/static/public';
 import { appendSetCookieHeader } from '$lib/api/auth';
+import { browser } from '$app/environment';
 
 async function _fetchApi(
   relativeUrl: URL | string,
@@ -12,7 +13,7 @@ async function _fetchApi(
   headers ??= new Headers();
   headers.append('Content-Type', 'application/json');
   headers.append('Accept', 'application/json');
-  if (window?.location?.origin) {
+  if (browser && window?.location?.origin) {
     headers.append('Origin', window.location.origin);
   }
   return fetch(url, { method: method, body, headers });