Backend: Change status code of token invalid error

backend/app/main.py

@@ -1,5 +1,6 @@
 from dotenv import load_dotenv
 from fastapi import APIRouter, FastAPI
+from fastapi.middleware.cors import CORSMiddleware
 from starlette.middleware.authentication import AuthenticationMiddleware
 
 load_dotenv()
@@ -47,6 +48,19 @@ def create_app():
     app.include_router(api_v1_router)
     app.mount(path="/v1/ocpp", app=create_ocpp_app())
 
+    origins = [
+        "http://localhost",
+        "http://localhost:5173",
+    ]
+
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=origins,
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
     return app
 
 app = create_app()

backend/app/security/jwt_bearer.py

@@ -28,7 +28,7 @@ class JWTBearer(HTTPBearer):
         if credentials:
             if not credentials.scheme == "Bearer":
                 raise HTTPException(
-                    status_code=403, detail="authentication_scheme_invalid"
+                    status_code=401, detail="authentication_scheme_invalid"
                 )
             try:
                 token = await token_service.verify_access_token(
@@ -36,7 +36,7 @@ class JWTBearer(HTTPBearer):
                 )
                 if not token:
                     raise HTTPException(
-                        status_code=403, detail="token_invalid_or_expired"
+                        status_code=401, detail="token_invalid_or_expired"
                     )
                 return token
             except InsufficientPermissionsError:
@@ -44,4 +44,4 @@ class JWTBearer(HTTPBearer):
             except InvalidTokenAudienceError:
                 raise HTTPException(status_code=403, detail="invalid_token_audience")
         else:
-            raise HTTPException(status_code=403, detail="authorization_code_invalid")
+            raise HTTPException(status_code=401, detail="authorization_code_invalid")

frontend/package.json

@@ -34,7 +34,14 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.0.14",
+    "axios": "^1.8.4",
+    "bootstrap-icons": "^1.11.3",
     "daisyui": "^5.0.3",
+    "i18next": "^24.2.3",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-chained-backend": "^4.6.2",
+    "i18next-fetch-backend": "^6.0.0",
+    "i18next-localstorage-backend": "^4.2.0",
     "tailwindcss": "^4.0.14"
   }
 }

frontend/simple-ocpp-cs.code-workspace

@@ -13,5 +13,17 @@
     "editor.formatOnSave": true,
     "editor.tabSize": 2,
     "editor.detectIndentation": false,
+    "i18n-ally.enabledFrameworks": ["i18next", "svelte"],
+    "i18n-ally.localesPaths": ["static/locales"],
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.namespace": true,
+    "i18n-ally.editor.preferEditor": true,
+    "i18n-ally.refactor.templates": [
+      {
+        "templates": ["{{ t('{key}'{args}) }}"],
+      },
+    ],
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.displayLanguage": "en",
   },
 }

frontend/src/app.css

@@ -0,0 +1,42 @@
+@import 'tailwindcss';
+@import 'bootstrap-icons';
+
+@plugin "daisyui" {
+  themes:
+    emerald --default;
+}
+
+@plugin "daisyui/theme" {
+  name: "darkgray";
+  default: false;
+  prefersdark: true;
+  color-scheme: "light";
+  --color-base-100: oklch(37% 0.034 259.733);
+  --color-base-200: oklch(27% 0.033 256.848);
+  --color-base-300: oklch(21% 0.006 285.885);
+  --color-base-content: oklch(96% 0.001 286.375);
+  --color-primary: oklch(70% 0.14 182.503);
+  --color-primary-content: oklch(98% 0.014 180.72);
+  --color-secondary: oklch(65% 0.241 354.308);
+  --color-secondary-content: oklch(94% 0.028 342.258);
+  --color-accent: oklch(58% 0.233 277.117);
+  --color-accent-content: oklch(96% 0.018 272.314);
+  --color-neutral: oklch(20% 0 0);
+  --color-neutral-content: oklch(96% 0.001 286.375);
+  --color-info: oklch(74% 0.16 232.661);
+  --color-info-content: oklch(95% 0.026 236.824);
+  --color-success: oklch(76% 0.177 163.223);
+  --color-success-content: oklch(26% 0.051 172.552);
+  --color-warning: oklch(82% 0.189 84.429);
+  --color-warning-content: oklch(27% 0.077 45.635);
+  --color-error: oklch(64% 0.246 16.439);
+  --color-error-content: oklch(96% 0.015 12.422);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}

frontend/src/lib/axios.svelte.ts

@@ -0,0 +1,108 @@
+import axios from 'axios';
+import { dev } from '$app/environment';
+import { goto } from '$app/navigation';
+import { get } from 'svelte/store';
+import { persistentSettings, clearLoginState } from '$lib/persistent_store';
+
+if (dev) {
+  axios.defaults.baseURL = "http://localhost:8000/api/v1"
+} else {
+  axios.defaults.baseURL = "/api/v1"
+}
+
+// Get access token from local storage
+axios.defaults.headers.common['Authorization'] = "Bearer " + get(persistentSettings).accessToken;
+
+function createTokenRefreshInterceptor() {
+  const interceptor = axios.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      // Reject promise if usual error
+      if (error.response.status !== 401) {
+        return Promise.reject(error);
+      }
+
+      /*
+      * When response code is 401, try to refresh the token.
+      * Eject the interceptor so it doesn't loop in case
+      * token refresh causes the 401 response.
+      *
+      * Must be re-attached later on or the token refresh will only happen once
+      */
+      axios.interceptors.response.eject(interceptor);
+
+      return axios
+        .post("/auth/refresh", {
+          refresh_token: get(persistentSettings).refreshToken,
+        })
+        .then((response) => {
+          // Save new tokens
+          persistentSettings.update(settings => {
+            settings.accessToken = response.data.access_token
+            settings.refreshToken = response.data.refresh_token;
+            return settings;
+          })
+
+          // Update access token
+          const authHeader = "Bearer " + response.data.access_token;
+          axios.defaults.headers.common['Authorization'] = authHeader;
+          error.response.config.headers["Authorization"] = authHeader;
+
+          // Retry initial request with new token
+          return axios(error.response.config);
+        })
+        .catch((retryError) => {
+          // Retry failed, clean up and reject the promise
+          clearLoginState();
+          axios.defaults.headers.common['Authorization'] = "";
+          goto('/login?reauth')
+          return Promise.reject(retryError);
+        })
+        .finally(createTokenRefreshInterceptor); // Re-attach interceptor for future requests
+      }
+  );
+}
+
+createTokenRefreshInterceptor();
+
+export const login = async function(email: string, password: string) {
+  await axios
+  .post('/auth/login', {
+    email,
+    password,
+  })
+  .then((response) => {
+    persistentSettings.update(settings => {
+      settings.loggedIn = true
+      settings.accessToken = response.data.access_token
+      settings.refreshToken = response.data.refresh_token
+      return settings;
+    })
+    axios.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.access_token
+    axios.get('/me').then((response) => {
+      persistentSettings.update(settings => {
+        settings.email = response.data.email
+        settings.friendlyName = response.data.friendly_name
+        settings.role = response.data.role
+        return settings;
+      })
+    })
+    goto('/')
+    return Promise.resolve();
+  })
+  .catch((error) => {
+    return Promise.reject(error);
+  })
+}
+
+export const logout = function() {
+  axios
+  .post('/auth/logout')
+  .then(() => {
+    clearLoginState();
+    axios.defaults.headers.common['Authorization'] = "";
+    goto('/login?logout')
+  });
+}
+
+export default axios;

frontend/src/lib/component/DashboardCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import i18n from '$lib/i18n'
+
+  let props: {
+    title: string
+    icon: string
+    value: number
+    previousValue: number
+    unit?: string
+  } = $props()
+
+  let diff = $derived(
+    Math.round(((props.previousValue - props.value) / props.previousValue) * 100 * 10 * -1) / 10
+  )
+</script>
+
+<div class="card bg-base-100 shadow rounded-md basis-0 grow">
+  <div class="card-body gap-2">
+    <div class="flex items-start justify-between gap-2 text-sm">
+      <div>
+        <p class="text-base-content/80 font-medium">
+          {props.title}
+        </p>
+        <div class="mt-3 flex items-center gap-2">
+          <p class="text-2xl font-semibold">
+            {props.value}{#if props.unit}{' ' + props.unit}{/if}
+          </p>
+          {#if diff > 0}
+            <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-up-right"></i>{diff}%
+            </div>
+          {:else if diff < 0}
+            <div class="badge badge-soft badge-error badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-down-right"></i>{diff}%
+            </div>
+          {:else}
+            <div class="badge badge-soft badge-warning badge-sm gap-0.5 px-1 font-medium">
+              <i class="bi bi-arrow-right"></i>{diff}%
+            </div>
+          {/if}
+        </div>
+      </div>
+      <i class="bi {props.icon} text-primary text-4xl"></i>
+    </div>
+    <p class="text-base-content/60 text-sm">
+      {$i18n.t('dashboard:cards.lastMonth', { val: props.previousValue, unit: props.unit })}
+    </p>
+  </div>
+</div>

frontend/src/lib/component/TransactionTable.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import i18n from '$lib/i18n'
+
+  let props: {
+    transactions: {
+      id: string
+      begin: Date
+      end: Date
+      chargepoint: {
+        name: string
+        id: string
+      }
+      energyAmmount: number
+      cost: number
+    }[]
+  } = $props()
+</script>
+
+<div class="overflow-x-auto mt-4 bg-base-100 rounded-md">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>{$i18n.t('common:transactionTable.headerDate')}</th>
+        <th>{$i18n.t('common:transactionTable.headerChargepoint')}</th>
+        <th>{$i18n.t('common:transactionTable.headerEnergyTotal')}</th>
+        <th>{$i18n.t('common:transactionTable.headerCost')}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      {#if props.transactions.length > 0}
+        {#each props.transactions as transaction}
+          <tr>
+            <td>
+              <div class="flex items-center gap-3">
+                <div>
+                  <p>
+                    {$i18n.t('common:transactionTable.startTime', {
+                      time: transaction.begin,
+                      formatParams: {
+                        time: {
+                          year: 'numeric',
+                          month: 'numeric',
+                          day: 'numeric',
+                          hour: 'numeric',
+                          minute: 'numeric',
+                          second: 'numeric',
+                        },
+                      },
+                    })}
+                  </p>
+                  <p>
+                    {$i18n.t('common:transactionTable.endTime', {
+                      time: transaction.end,
+                      formatParams: {
+                        time: {
+                          year: 'numeric',
+                          month: 'numeric',
+                          day: 'numeric',
+                          hour: 'numeric',
+                          minute: 'numeric',
+                          second: 'numeric',
+                        },
+                      },
+                    })}
+                  </p>
+                </div>
+              </div>
+            </td>
+            <td>
+              <a href="/chargepoint/{transaction.chargepoint.id}" class="btn btn-sm btn-primary">
+                <i class="bi bi-plug-fill text-lg"></i>
+                {transaction.chargepoint.name}
+              </a>
+            </td>
+            <td class="font-bold">{transaction.energyAmmount} kWh</td>
+            <td class="font-bold">{transaction.cost} €</td>
+            <th>
+              <a href="/transaction/{transaction.id}" class="btn btn-sm btn-primary">
+                {$i18n.t('common:transactionTable.detailButton')}
+                <i class="bi bi-arrow-right"></i>
+              </a>
+            </th>
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+  {#if props.transactions.length === 0}
+    <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
+      {$i18n.t('common:transactionTable.noPreviousTransactions')}
+    </p>
+  {/if}
+</div>

frontend/src/lib/i18n.ts

@@ -0,0 +1,32 @@
+import i18next from 'i18next'
+import Backend from 'i18next-chained-backend'
+import Fetch from 'i18next-fetch-backend'
+import LocalStorageBackend from 'i18next-localstorage-backend'
+import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
+import { createI18nStore } from './i18n_store'
+
+i18next
+  .use(Backend)
+  .use(I18nextBrowserLanguageDetector)
+  .init({
+    supportedLngs: ['en', 'de'],
+    ns: ['common'],
+    defaultNS: 'common',
+    backend: {
+      backends: [LocalStorageBackend, Fetch],
+      backendOptions: [
+        {
+          expirationTime: 24 * 60 * 60 * 1000,
+        },
+        {
+          loadPath: '/locales/{{lng}}/{{ns}}.json',
+        },
+      ],
+    },
+    interpolation: {
+      escapeValue: false,
+    },
+  })
+
+const i18n = createI18nStore(i18next)
+export default i18n

frontend/src/lib/i18n_store.ts

@@ -0,0 +1,55 @@
+import type { i18n } from 'i18next'
+import { writable, type Readable, type Writable } from 'svelte/store'
+
+export interface TranslationService {
+  i18n: Readable<i18n>
+}
+
+export const isLoading = writable(true)
+
+export class I18NextTranslationStore implements TranslationService {
+  public i18n: Writable<i18n>
+  public isLoading: Writable<boolean>
+
+  constructor(i18n: i18n) {
+    this.i18n = this.createInstance(i18n)
+    this.isLoading = this.createLoadingInstance(i18n)
+  }
+
+  private createInstance(i18n: i18n): Writable<i18n> {
+    const i18nWritable = writable(i18n)
+
+    i18n.on('initialized', () => {
+      i18nWritable.set(i18n)
+    })
+    i18n.on('loaded', () => {
+      i18nWritable.set(i18n)
+    })
+    i18n.on('added', () => i18nWritable.set(i18n))
+    i18n.on('languageChanged', () => {
+      i18nWritable.set(i18n)
+    })
+    return i18nWritable
+  }
+
+  private createLoadingInstance(i18n: i18n): Writable<boolean> {
+    // if loaded resources are empty || {}, set loading to true
+    i18n.on('loaded', (resources) => {
+      if (Object.keys(resources).length !== 0) {
+        isLoading.set(false)
+      }
+    })
+
+    // if resources failed loading, set loading to true
+    i18n.on('failedLoading', () => {
+      isLoading.set(true)
+    })
+
+    return isLoading
+  }
+}
+
+export const createI18nStore = (i18n: i18n) => {
+  const i18nStore = new I18NextTranslationStore(i18n)
+  return i18nStore.i18n
+}

frontend/src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

frontend/src/lib/persistent_store.ts

@@ -0,0 +1,37 @@
+import { writable } from 'svelte/store'
+
+interface PersistedSettings {
+  darkmode: boolean
+  loggedIn: boolean
+  friendlyName: string
+  email: string
+  role: string
+  accessToken: string,
+  refreshToken: string
+}
+
+const settingsDefault: PersistedSettings = {
+  darkmode: false,
+  loggedIn: false,
+  friendlyName: "",
+  email: "",
+  role: "member",
+  accessToken: "",
+  refreshToken: ""
+}
+
+export const persistentSettings = writable<PersistedSettings>(JSON.parse(localStorage.getItem('persistentSettings') || JSON.stringify(settingsDefault)))
+
+persistentSettings.subscribe((value) => localStorage.persistentSettings = JSON.stringify(value))
+
+export const clearLoginState = function() {
+  persistentSettings.update(settings => {
+    settings.accessToken = "";
+    settings.refreshToken = "";
+    settings.loggedIn = false;
+    settings.friendlyName = "";
+    settings.email = "";
+    settings.role = "member";
+    return settings;
+  })
+}

frontend/src/lib/util.ts

@@ -0,0 +1,10 @@
+export const currentDaytime = function(): string {
+  const currentHour = new Date().getHours()
+
+  if (currentHour >= 0 && currentHour < 12) {
+    return 'morning'
+  } else if (currentHour >= 12 && currentHour < 18) {
+    return 'day'
+  }
+  return 'evening'
+}

frontend/src/routes/(navbar)/+layout.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import { persistentSettings } from '$lib/persistent_store'
+  import i18n from '$lib/i18n'
+  import { logout } from '$lib/axios.svelte'
+
+  let { children } = $props()
+
+  if (!$persistentSettings.loggedIn) {
+    goto('/login')
+  }
+
+  let drawerOpen = $state(false)
+</script>
+
+<div class="w-full h-full p-4 flex flex-col bg-base-200">
+  <div class="navbar w-auto mb-4 pr-4 bg-base-100 shadow-md rounded-md">
+    <div class="drawer navbar-start">
+      <input bind:checked={drawerOpen} id="nav-drawer" type="checkbox" class="drawer-toggle" />
+      <div class="drawer-content">
+        <label for="nav-drawer" class="btn btn-ghost btn-circle drawer-button">
+          <i class="bi bi-list text-2xl"></i>
+        </label>
+      </div>
+      <div class="drawer-side z-10">
+        <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+        <ul class="menu bg-base-100 text-base min-h-full w-80 p-4">
+          <li class="mb-4">
+            <a class="btn btn-ghost text-xl" href="/">LibreCharge</a>
+          </li>
+          <li>
+            <a
+              onclick={() => {
+                drawerOpen = !drawerOpen
+              }}
+              href="/"
+            >
+              <i class="bi bi-graph-up text-xl"></i>
+              <span>Dashboard</span>
+            </a>
+          </li>
+          <li>
+            <a
+              onclick={() => {
+                drawerOpen = !drawerOpen
+              }}
+              href="/idtoken"
+            >
+              <i class="bi bi-credit-card-fill text-xl"></i>
+              <span>{$i18n.t('common:navbar.link.idtoken')}</span>
+            </a>
+          </li>
+          <li>
+            <a
+              onclick={() => {
+                drawerOpen = !drawerOpen
+              }}
+              href="/transaction"
+            >
+              <i class="bi bi-battery-charging text-xl"></i>
+              <span>{$i18n.t('common:navbar.link.transaction')}</span>
+            </a>
+          </li>
+          <li>
+            <a
+              onclick={() => {
+                drawerOpen = !drawerOpen
+              }}
+              href="/chargepoint"
+            >
+              <i class="bi bi-plug-fill text-xl"></i>
+              <span>{$i18n.t('common:navbar.link.chargepoint')}</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="navbar-center">
+      <a class="btn btn-ghost text-xl" href="/">LibreCharge</a>
+    </div>
+    <div class="navbar-end">
+      <div class="dropdown dropdown-end">
+        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+          <i class="bi bi-person-circle text-2xl"></i>
+        </div>
+        <ul
+          tabindex="-1"
+          class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
+        >
+          <li><a href="/profile">{$i18n.t('common:navbar.link.profile')}</a></li>
+          <li><button onclick={logout}>{$i18n.t('common:navbar.link.logout')}</button></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="w-full h-full flex flex-col">
+    {@render children()}
+  </div>
+</div>

frontend/src/routes/(navbar)/+page.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { persistentSettings } from '$lib/persistent_store'
+  import { currentDaytime } from '$lib/util'
+  import i18n from '$lib/i18n'
+  import DashboardCard from '$lib/component/DashboardCard.svelte'
+  import TransactionTable from '$lib/component/TransactionTable.svelte'
+
+  $i18n.loadNamespaces('dashboard')
+
+  let hasActiveTransaction = $state(true)
+</script>
+
+<div class="w-full h-full mt-10 flex flex-col">
+  <p class="w-full text-2xl font-bold">
+    {$i18n.t('dashboard:greeting.' + currentDaytime(), { name: $persistentSettings.friendlyName })}
+  </p>
+  <div class="w-full mt-5 flex gap-x-4">
+    <div class="card bg-base-100 shadow rounded-md basis-0 grow">
+      <div class="card-body gap-2">
+        <div class="flex items-start justify-between gap-2 text-sm">
+          <div>
+            <p class="text-base-content/80 font-medium">
+              {$i18n.t('dashboard:cards.currentTransaction')}
+            </p>
+            <div class="mt-3 flex items-center gap-2">
+              {#if hasActiveTransaction}
+                <div class="inline-grid *:[grid-area:1/1]">
+                  <div class="status status-success animate-ping"></div>
+                  <div class="status status-success"></div>
+                </div>
+              {/if}
+              <p class="text-2xl font-semibold">
+                {#if hasActiveTransaction}0,25 kWh{:else}-{/if}
+              </p>
+              {#if hasActiveTransaction}
+                <div class="badge badge-soft badge-success badge-sm gap-0.5 px-1 font-medium">
+                  2,30 €
+                </div>
+              {/if}
+            </div>
+          </div>
+          <i class="bi bi-plug-fill text-primary text-4xl"></i>
+        </div>
+        <div class="w-full flex flex-row items-center">
+          <p class="text-base-content/60 text-sm">
+            {#if hasActiveTransaction}
+              {$i18n.t('dashboard:cards.chargepoint', { name: 'DE-EXMPL-0001' })}
+            {:else}
+              {$i18n.t('dashboard:cards.noCurrentTransaction')}
+            {/if}
+          </p>
+          {#if hasActiveTransaction}
+            <button class="btn btn-xs btn-primary">
+              {$i18n.t('dashboard:cards.toCurrentTransactionButton')}
+              <i class="bi bi-arrow-right"></i>
+            </button>
+          {/if}
+        </div>
+      </div>
+    </div>
+    <DashboardCard
+      title={$i18n.t('dashboard:cards.transactionCount')}
+      icon={'bi-battery-charging'}
+      value={3}
+      previousValue={1}
+    />
+    <DashboardCard
+      title={$i18n.t('dashboard:cards.transactionEnergyTotal')}
+      icon={'bi-lightning-charge-fill'}
+      value={180}
+      previousValue={50}
+      unit={'kWh'}
+    />
+    <DashboardCard
+      title={$i18n.t('dashboard:cards.transactionCostTotal')}
+      icon={'bi-currency-exchange'}
+      value={30.56}
+      previousValue={30.56}
+      unit={'€'}
+    />
+  </div>
+  <div class="w-full flex flex-col mt-10">
+    <p class="text-xl font-bold">{$i18n.t('dashboard:table.title')}</p>
+    <TransactionTable
+      transactions={[
+        {
+          id: '1',
+          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
+          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
+          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
+          energyAmmount: 58.65,
+          cost: 36.45,
+        },
+        {
+          id: '2',
+          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
+          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
+          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
+          energyAmmount: 58.65,
+          cost: 36.45,
+        },
+        {
+          id: '3',
+          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
+          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
+          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
+          energyAmmount: 58.65,
+          cost: 36.45,
+        },
+        {
+          id: '4',
+          begin: new Date(Date.UTC(2025, 3, 15, 14, 12, 23)),
+          end: new Date(Date.UTC(2025, 3, 15, 16, 18, 46)),
+          chargepoint: { name: 'DE-EXMPL-0001', id: '1' },
+          energyAmmount: 58.65,
+          cost: 36.45,
+        },
+      ]}
+    />
+  </div>
+</div>

frontend/src/routes/+layout.svelte

@@ -0,0 +1,38 @@
+<script>
+  import { persistentSettings } from '$lib/persistent_store'
+  let { children } = $props()
+  import '../app.css'
+</script>
+
+<div
+  class="w-screen h-screen flex flex-col"
+  data-theme={$persistentSettings.darkmode ? 'darkgray' : 'emerald'}
+>
+  {@render children()}
+  <footer
+    class="footer sm:footer-horizontal bg-neutral text-neutral-content items-center pt-3 pb-3 pl-6 pr-6"
+  >
+    <aside class="grid-flow-col">
+      <p>Powered by LibreCharge - Licensed under GNU AGPL v3</p>
+    </aside>
+    <nav class="grid-flow-col gap-4 md:place-self-center md:justify-self-end text-3xl">
+      <label class="swap swap-rotate">
+        <!-- this hidden checkbox controls the state -->
+        <input type="checkbox" bind:checked={$persistentSettings.darkmode} />
+
+        <!-- sun icon -->
+        <i class="bi bi-sun swap-off"></i>
+
+        <!-- moon icon -->
+        <i class="bi bi-moon swap-on"></i>
+      </label>
+      <a
+        aria-label="Source Code"
+        href="https://git.bluemedia.dev/Bluemedia/simple-ocpp-cs"
+        target="_blank"
+      >
+        <i class="bi bi-git"></i>
+      </a>
+    </nav>
+  </footer>
+</div>

frontend/src/routes/+page.svelte

@@ -1,6 +0,0 @@
-<script>
-  import '../style.css'
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import i18n from '$lib/i18n'
+  import { login as performLogin } from '$lib/axios.svelte'
+  $i18n.loadNamespaces('login')
+
+  type ToastType = 'reauth' | 'logout' | 'error'
+  let toastType: ToastType = $state('reauth')
+  let toastVisible = $state(false)
+
+  function showToast(type: ToastType) {
+    toastType = type
+    toastVisible = true
+    setTimeout(() => {
+      toastVisible = false
+    }, 6000)
+  }
+
+  const urlParams = new URLSearchParams(window.location.search)
+  if (urlParams.has('reauth')) {
+    showToast('reauth')
+  }
+  if (urlParams.has('logout')) {
+    showToast('logout')
+  }
+
+  let email: string = $state('')
+  let password: string = $state('')
+
+  async function login() {
+    await performLogin(email, password).catch(() => {
+      showToast('error')
+    })
+  }
+</script>
+
+<div class="w-full h-full flex flex-col justify-center items-center bg-base-200">
+  <div class="basis-0 grow flex justify-center items-center">
+    <div class="flex flex-col items-center justify-center">
+      <i class="bi bi-ev-front-fill text-8xl text-primary"></i>
+      <p class="text-2xl font-bold">LibreCharge</p>
+    </div>
+  </div>
+  <div class="basis-0 flex justify-center items-center">
+    <div class="card bg-base-100 w-full max-w-sm h-fit shrink-0 shadow-2xl">
+      <div class="card-body">
+        <h1 class="text-2xl font-bold">{$i18n.t('login:title')}</h1>
+        <p class="py-2 text-base">{$i18n.t('login:text')}</p>
+        <fieldset class="fieldset">
+          <label class="fieldset-label input text-base-content">
+            <i class="bi bi-envelope-at"></i>
+            <input type="email" bind:value={email} placeholder="me@example.com" required />
+          </label>
+          <label class="fieldset-label input text-base-content">
+            <i class="bi bi-key"></i>
+            <input
+              type="password"
+              bind:value={password}
+              placeholder={$i18n.t('login:passwordPlaceholder')}
+              required
+            />
+          </label>
+          <button class="btn btn-primary mt-4" onclick={login}>{$i18n.t('login:button')}</button>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+  <span class="basis-0 grow"></span>
+  {#if toastVisible}
+    <div class="toast toast-top" out:fly={{ x: 200 }}>
+      {#if toastType === 'reauth'}
+        <div class="alert text-base alert-warning">
+          <i class="bi bi-exclamation-diamond text-xl"></i>
+          <span>{$i18n.t('login:toast.reauth')}</span>
+        </div>
+      {:else if toastType === 'logout'}
+        <div class="alert text-base alert-success">
+          <i class="bi bi-check-circle text-xl"></i>
+          <span>{$i18n.t('login:toast.logoutSuccess')}</span>
+        </div>
+      {:else if toastType === 'error'}
+        <div class="alert text-base alert-error">
+          <i class="bi bi-x-circle text-xl"></i>
+          <span>{$i18n.t('login:toast.loginFailed')}</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

frontend/src/style.css

@@ -1,6 +0,0 @@
-@import 'tailwindcss';
-@plugin "daisyui" {
-  themes:
-    light --default,
-    dark --prefersdark;
-}

frontend/static/locales/de/common.json

@@ -0,0 +1,21 @@
+{
+  "navbar": {
+    "link": {
+      "idtoken": "Ladekarten",
+      "transaction": "Ladevorgänge",
+      "chargepoint": "Ladestationen",
+      "profile": "Profil",
+      "logout": "Abmelden"
+    }
+  },
+  "transactionTable": {
+    "noPreviousTransactions": "Du hast noch keine abgeschlossenen Ladevorgänge.",
+    "headerDate": "Zeitpunkt",
+    "headerChargepoint": "Ladestation",
+    "headerEnergyTotal": "Ladevolumen",
+    "headerCost": "Kosten",
+    "startTime": "Beginn: {{ time, datetime }} Uhr",
+    "endTime": "Ende: {{ time, datetime }} Uhr",
+    "detailButton": "Details"
+  }
+}

frontend/static/locales/de/dashboard.json

@@ -0,0 +1,28 @@
+{
+  "greeting": {
+    "morning": "Guten Morgen {{name}}!",
+    "day": "Guten Tag {{name}}!",
+    "evening": "Guten Abend {{name}}!"
+  },
+  "cards": {
+    "currentTransaction": "Aktueller Ladevorgang",
+    "chargepoint": "Ladestation: {{name}}",
+    "toCurrentTransactionButton": "Zum Ladevorgang",
+    "noCurrentTransaction": "Kein Ladevorgang aktiv",
+    "transactionCount": "Ladevorgänge",
+    "transactionEnergyTotal": "Ladevolumen",
+    "transactionCostTotal": "Kosten",
+    "lastMonth": "{{val}} {{unit}} im letzten Monat"
+  },
+  "table": {
+    "title": "Deine letzten Ladevorgänge",
+    "noPreviousTransactions": "Du hast noch keine abgeschlossenen Ladevorgänge.",
+    "headerDate": "Zeitpunkt",
+    "headerChargepoint": "Ladestation",
+    "headerEnergyTotal": "Ladevolumen",
+    "headerCost": "Kosten",
+    "startTime": "Beginn: {{ time, datetime }} Uhr",
+    "endTime": "Ende: {{ time, datetime }} Uhr",
+    "detailButton": "Details"
+  }
+}

frontend/static/locales/de/login.json

@@ -0,0 +1,11 @@
+{
+  "title": "Anmelden",
+  "text": "Bitte melde dich mit deinem Account an:",
+  "passwordPlaceholder": "Passwort",
+  "button": "Anmelden",
+  "toast": {
+    "reauth": "Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.",
+    "logoutSuccess": "Abmeldung erfolgreich.",
+    "loginFailed": "Anmeldung fehlgeschlagen."
+  }
+}

frontend/static/locales/en/common.json

@@ -0,0 +1,21 @@
+{
+  "navbar": {
+    "link": {
+      "idtoken": "Charging Cards",
+      "transaction": "Transactions",
+      "chargepoint": "Charging Stations",
+      "profile": "Profile",
+      "logout": "Logout"
+    }
+  },
+  "transactionTable": {
+    "noPreviousTransactions": "You don't have any completed transactions yet.",
+    "headerDate": "Date",
+    "headerChargepoint": "Chargepoint",
+    "headerEnergyTotal": "Energy charged",
+    "headerCost": "Cost",
+    "startTime": "Start: {{ time, datetime }}",
+    "endTime": "End: {{ time, datetime }}",
+    "detailButton": "Details"
+  }
+}

frontend/static/locales/en/dashboard.json

@@ -0,0 +1,28 @@
+{
+  "greeting": {
+    "morning": "Good morning {{name}}!",
+    "day": "Hello {{name}}!",
+    "evening": "Good evening {{name}}!"
+  },
+  "cards": {
+    "currentTransaction": "Current Transaction",
+    "chargepoint": "Chargepoint: {{name}}",
+    "toCurrentTransactionButton": "More",
+    "noCurrentTransaction": "No active transaction",
+    "transactionCount": "Transactions",
+    "transactionEnergyTotal": "Energy Ammount",
+    "transactionCostTotal": "Cost",
+    "lastMonth": "{{val}} {{unit}} last month"
+  },
+  "table": {
+    "title": "Your recent transactions",
+    "noPreviousTransactions": "You don't have any completed transactions yet.",
+    "headerDate": "Date",
+    "headerChargepoint": "Chargepoint",
+    "headerEnergyTotal": "Energy charged",
+    "headerCost": "Cost",
+    "startTime": "Start: {{ time, datetime }}",
+    "endTime": "End: {{ time, datetime }}",
+    "detailButton": "Details"
+  }
+}

frontend/static/locales/en/login.json

@@ -0,0 +1,11 @@
+{
+  "title": "Login",
+  "text": "Please login to your account:",
+  "passwordPlaceholder": "Password",
+  "button": "Login",
+  "toast": {
+    "reauth": "Your session expired. Please log in again.",
+    "logoutSuccess": "Successfully logged out.",
+    "loginFailed": "Login failed."
+  }
+}