x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

#73 begin implement keycloak
Some checks failed
Build Docker Image / Explore-Gitea-Actions (push) Failing after 3m2s
Details

Browse Source
This commit is contained in:
Tim
2024-08-21 09:36:16 +02:00
parent 947df6e5bd
commit 0151d8c510
7 changed files with 52 additions and 1218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1071
view/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
view/package.json
View File

@@ -22,8 +22,8 @@
"eslint": "9.9.0", "eslint": "9.9.0",
"eslint-config-prettier": "9.1.0", "eslint-config-prettier": "9.1.0",
"eslint-plugin-svelte": "2.43.0", "eslint-plugin-svelte": "2.43.0",
"firebaseui": "6.1.0",
"globals": "15.9.0", "globals": "15.9.0",
"keycloak-js": "^25.0.4",
"postcss": "8.4.41", "postcss": "8.4.41",
"prettier": "3.3.3", "prettier": "3.3.3",
"prettier-plugin-svelte": "3.2.6", "prettier-plugin-svelte": "3.2.6",

11
view/src/lib/auth.ts Normal file
View File

@@ -0,0 +1,11 @@
import Keycloak from 'keycloak-js';
const keycloak = new Keycloak({
url: 'http://auth.me-fit.eu',
realm: 'me-fit',
clientId: 'me-fit-view'
});
export { keycloak };

16
view/src/lib/firebase.ts
View File

@@ -1,16 +0,0 @@
import { getAuth } from 'firebase/auth';
import { initializeApp } from 'firebase/app';
const app = initializeApp({
apiKey: 'AIzaSyCrJBW3c3Wut8DqjyVJoFAEyJ9Had__q-Q',
authDomain: 'me-fit-a9365.firebaseapp.com',
projectId: 'me-fit-a9365',
storageBucket: 'me-fit-a9365.appspot.com',
messagingSenderId: '631045688520',
appId: '1:631045688520:web:c7e0534927b52b0db629fd'
});
const auth = getAuth(app);
export { auth };

37
view/src/routes/+layout.svelte
View File

@@ -1,47 +1,34 @@
<script lang="ts"> <script lang="ts">
import '../app.css'; import '../app.css';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import type { Auth, User } from 'firebase/auth';
import { addToast, toastStore } from '$lib/toast'; import { addToast, toastStore } from '$lib/toast';
import type { Toast } from '$lib/toast'; import type { Toast } from '$lib/toast';
var auth: Auth | null = null;
var user: User | null = null;
var unsubAuth: (() => void) | null = null;
let toasts: Toast[] = []; let toasts: Toast[] = [];
let unsubToast = toastStore.subscribe((value) => { let unsubToast = toastStore.subscribe((value) => {
toasts = value; toasts = value;
}); });
onMount(async () => {
const { auth: _auth } = await import('../lib/firebase');
auth = _auth;
user = auth.currentUser;
unsubAuth = auth.onAuthStateChanged((newUser) => {
user = newUser;
});
});
onDestroy(() => { onDestroy(() => {
unsubToast(); unsubToast();
if (unsubAuth) {
unsubAuth();
}
}); });
const signOut = async () => { const signOut = async () => {
try { try {
await (auth as Auth).signOut();
addToast('Signed out successfully', 'success'); addToast('Signed out successfully', 'success');
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
const doSignIn = async () => {
const { keycloak } = await import('$lib/auth');
await keycloak.init({});
};
</script> </script>
<svelte:head> <svelte:head>
<title>ME-FIT</title> <title>ME-FIT</title>
<script src="$lib/auth.js" defer></script>
</svelte:head> </svelte:head>
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
@@ -50,13 +37,13 @@
<img src="/favicon.svg" alt="ME-FIT logo" /> <img src="/favicon.svg" alt="ME-FIT logo" />
<span>ME-FIT</span> <span>ME-FIT</span>
</a> </a>
{#if user} <!-- {#if user} -->
<p class="hidden md:block">{user?.email}</p> <!-- <p class="hidden md:block">{user?.email}</p> -->
<button class="btn btn-sm" on:click={async () => signOut()}>Sign Out</button> <!-- <button class="btn btn-sm" on:click={async () => signOut()}>Sign Out</button> -->
{:else} <!-- {:else} -->
<a href="/signup" class="btn btn-sm">Sign Up</a> <button class="btn btn-sm" on:click={() => doSignIn()}>Sign Up</button>
<a href="/signin" class="btn btn-sm">Sign In</a> <!-- <a href="/signin" class="btn btn-sm">Sign In</a> -->
{/if} <!-- {/if} -->
</div> </div>
<div class="flex-1"> <div class="flex-1">

66
view/src/routes/signin/+page.svelte
View File

@@ -1,66 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { addToast } from '$lib/toast';
import { signInWithEmailAndPassword } from 'firebase/auth';
const signIn = async (event: SubmitEvent) => {
const { auth } = await import('$lib/firebase');
try {
const data = new FormData(event.target as HTMLFormElement);
await signInWithEmailAndPassword(
auth,
data.get('email') as string,
data.get('password') as string
);
goto('/');
} catch (error: any) {
const errorStr = error.code ? error.code : error.message;
addToast('Failed to sign in: ' + errorStr, 'error');
}
};
</script>
<form
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
on:submit|preventDefault={signIn}
>
<h2 class="text-6xl mb-10">Sign In</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
/>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
/>
</svg>
<input type="text" class="grow" placeholder="Email" name="email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
/>
</svg>
<input type="password" class="grow" placeholder="Password" name="password" />
</label>
<div class="flex justify-end items-center gap-2">
<a href="/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
<button class="btn btn-primary self-end">Sign In</button>
</div>
</form>

67
view/src/routes/signup/+page.svelte
View File

@@ -1,67 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { addToast } from '$lib/toast';
import { createUserWithEmailAndPassword } from 'firebase/auth';
const signUp = async (event: SubmitEvent) => {
const { auth } = await import('$lib/firebase');
try {
const data = new FormData(event.target as HTMLFormElement);
await createUserWithEmailAndPassword(
auth,
data.get('email') as string,
data.get('password') as string
);
addToast('Signed up successfully', 'success');
goto('/');
} catch (error: any) {
const errorStr = error.code ? error.code : error.message;
addToast('Failed to sign up: ' + errorStr, 'error');
}
};
</script>
<form
class="px-2 max-w-xl mx-auto flex flex-col gap-4 h-full justify-center"
on:submit|preventDefault={signUp}
>
<h2 class="text-6xl mb-10">Sign Up</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
/>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
/>
</svg>
<input type="text" class="grow" placeholder="Email" name="email" />
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
/>
</svg>
<input type="password" class="grow" placeholder="Password" name="password" />
</label>
<div class="flex justify-end items-center gap-2">
<a href="/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
<button class="btn btn-primary self-end">Sign Up</button>
</div>
</form>