Merge pull request #296 from NIAEFEUP/289-auth-login-page-functionality

289 auth login page functionality

dev.sh

@@ -1,25 +1,24 @@
 #!/bin/env bash
 
-which docker-compose &> /dev/null
+which docker &> /dev/null
 if [ $? -ne 0 ]; then
     echo "Docker compose not installed"
     echo "Please read the README at https://github.com/NIAEFEUP/website-niaefeup-frontend"
     exit
 fi
 
-docker-compose up -d website-niaefeup-frontend-dev
-docker-compose up -d website-niaefeup-frontend-storybook
+docker compose up -d website-niaefeup-frontend-dev
+docker compose up -d website-niaefeup-frontend-storybook
 
 trap_ctrl_c() {
-    docker-compose down
+    docker compose down
     clear
 
     exit
 }
 
 trap "trap_ctrl_c" 2
 
-clear
 echo "Containers are up and running"
 echo ""
 echo "Press Ctrl-C to exit"

docker-compose.yml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   website-niaefeup-frontend-dev:
     build:
@@ -11,6 +10,7 @@ services:
       - ./static:/usr/src/website-niaefeup-frontend/static
     environment:
       - PORT=3000
+    network_mode: 'host' # do not add this to prod!
 
   website-niaefeup-frontend-storybook:
     build:

src/routes/(app)/login/+page.svelte

@@ -16,14 +16,18 @@
         password
       })
     }).then((res) => res.ok);
+
     message = success ? 'Login successful' : 'Login failed';
+    if (success == true) {
+      window.location.href = '/';
+    }
   }
 </script>
 
 <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}>
+  <form method="POST" action="">
     <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
@@ -43,9 +47,9 @@
       <br />
     </div>
     <button
-      type="submit"
+      type="button"
       class="z-20 my-4 w-full rounded-[15px] bg-taupe-100 p-[2dvh] text-muted-red-700"
-      >Iniciar Sessão</button
+      on:click={submitLogin}>Iniciar Sessão</button
     >
     <br />
     <p class="h-[2dvh] text-center">{message}</p>

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

@@ -2,18 +2,20 @@
   import Icon from '@/lib/components/icons/icon.svelte';
   import Icons from '@/lib/components/icons/icons';
 
+  export let value: string;
   let visible = false;
   $: type = visible ? 'text' : 'password';
   $: icon = visible ? Icons.Hidden : Icons.Visible;
 </script>
 
 <div class="relative">
   <input
-    {type}
+    {...{ type }}
     {...$$restProps}
     class="col-start-1 col-end-3 row-start-1 {$$props.class}"
     data-testid="password-input"
     aria-label="Password input"
+    bind:value
   />
   <button
     type="button"

test.sh

@@ -1,10 +1,10 @@
 #!/bin/env bash
 
-which docker-compose &> /dev/null
+which docker &> /dev/null
 if [ $? -ne 0 ]; then
     echo "Docker compose not installed"
     echo "Please read the README at https://github.com/NIAEFEUP/website-niaefeup-frontend"
     exit
 fi
 
-docker-compose run --rm website-niaefeup-frontend-test
+docker compose run --rm website-niaefeup-frontend-test