idrinth-api-bench · marikadeveloper · May 14, 2024 · May 14, 2024 · May 14, 2024 · May 14, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,6 +16,7 @@ module.exports = {
   ],
   parserOptions: {
     extraFileExtensions: ['.svelte'],
+    sourceType: 'module',
   },
   overrides: [
     {

diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 /cypress/screenshots
 /src/locales
 /dump.txt
+.env*
 
 # Editor directories and files
 .DS_Store

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Svelte + TS</title>
   </head>
-  <body>
+  <body class="dark-mode">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/language/de.yml b/language/de.yml
@@ -3,3 +3,10 @@ overview:
   meta:
     title: "Projekte"
     description: "Alle Projekte in einer einfach zu verstehenden Übersicht."
+login:
+  title: "Anmelden"
+  username: "Benutzername"
+  submit: "Anmelden"
+  meta:
+    title: "Anmelden"
+    description: "Melden Sie sich bei Ihrem Konto an."
diff --git a/language/en.yml b/language/en.yml
@@ -3,3 +3,10 @@ overview:
   meta:
     title: "Projects"
     description: "All your projects in an easy to grasp overview."
+login:
+  username: "Username"
+  submit: "Login"
+  title: "Login"
+  meta:
+      title: "Login"
+      description: "Login to your account."
diff --git a/language/it.yml b/language/it.yml
@@ -3,3 +3,10 @@ overview:
   meta:
     title: "Progetti"
     description: "Tutti i tuoi progetti in un'unica semplice interfaccia."
+login:
+  title: "Accedi"
+  username: "Username"
+  submit: "Accedi"
+  meta:
+    title: "Accedi"
+    description: "Accedi al tuo account."
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,11 +37,16 @@
     "svelte": "^4.2.16",
     "svelte-check": "^3.6.4",
     "svelte-eslint-parser": "^0.36.0",
+    "svelte-routing": "^2.13.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.4"
   },
   "engines": {
     "node": ">=20"
   },
-  "engineStrict": true
+  "engineStrict": true,
+  "dependencies": {
+    "chart.js": "^4.4.2",
+    "svelte-chartjs": "^3.1.5"
+  }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,26 +1,9 @@
 <script lang="ts" context="module">
-  import logo from '@idrinth-api-bench/assets/iab.svg';
-  import t from './lib/t.js';
+  import AppRouter from "./routes/AppRouter.svelte";
 </script>
 
 <main>
-  <header>
-    <img src={logo} class="logo" alt="Logo" />
-  </header>
-  <h1>{t('overview.title',)}</h1>
-
-  <div class="card">
-  </div>
+  <AppRouter />
 </main>
 
-<style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-</style>
+
diff --git a/src/Home.svelte b/src/Home.svelte
@@ -0,0 +1 @@
+<h1>Hello!</h1>
diff --git a/src/Login.svelte b/src/Login.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import t from "./lib/t";
+  import { login } from './lib/http-client';
+  import { navigate } from "svelte-routing";
+
+  export let username = '';
+
+  async function handleSubmit() {
+    try {
+      await login(username);
+      navigate('/');
+    } catch (e) {
+      console.log(e);
+    }
+  }
-  async function handleSubmit() {
-    try {
-      await login(username);
-      navigate('/');
-    } catch (e) {
-      console.log(e);
-    }
-  }
+  async function handleSubmit() {
+    try {
+      await login(username);
+      navigate('/');
+    } catch (error) {
+      console.error(error);
+      // Provide user feedback for login failure
+      alert('Login failed. Please try again.');
+    }
+  }
-  async function handleSubmit() {
-    try {
-      await login(username);
-      navigate('/');
-    } catch (e) {
-      console.log(e);
-    }
-  }
+  async function handleSubmit() {
+    try {
+      await login(username);
+      navigate('/');
+    } catch (error) {
+      console.error(error);
+      // Provide user feedback for login failure
+      alert('Login failed. Please try again.');
+    }
+  }
+</script>
+
+<div class="login">
+  <h1>{t('login.title')}</h1>
+  <form on:submit|preventDefault="{handleSubmit}">
+    <input
+      class="form-field"
+      placeholder="{t('login.username')}"
+      type="text"
+      bind:value="{username}"
+    />
+    <button type="submit">
+      {t('login.submit')}
+    </button>
+  </form>
+</div>