nodejs/hanko
1
0
Fork 0
mirror of https://github.com/teamhanko/hanko.git synced 2025-10-27 06:06:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: merge conflicts. remove import in quickstart

Browse Source
This commit is contained in:
Felix Dubrownik
2023-03-03 12:49:56 +01:00
parent 332d65b025 a5e9f662e6
commit 4c78b51ec7
105 changed files with 12072 additions and 28650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/svelte/README.md
View File

@ -4,7 +4,7 @@
### Prerequisites
- a running Hanko API (see the instructions on how to run the API [in Docker](../backend/README.md#Docker) or [from Source](../backend/README.md#from-source))
- a running Hanko API (see the instructions on how to run the API [in Docker](../../backend/README.md#Docker) or [from Source](../../backend/README.md#from-source))
- a running express backend (see the [README](../express) for the express backend)
### Set up environment variables

58
examples/svelte/src/App.svelte
View File

@ -2,6 +2,7 @@
import { Route, Router } from "svelte-navigator";
import Login from "./lib/Login.svelte";
import Todo from "./lib/Todo.svelte";
import Profile from "./lib/Profile.svelte";
</script>
<Router>
@ -9,9 +10,64 @@
<Route path="/">
<Login/>
</Route>
<Route path="todo">
<Todo/>
</Route>
<Route path="profile">
<Profile/>
</Route>
</main>
</Router>
<style>
:global(.nav) {
width: 100%;
padding: 10px;
opacity: 0.9;
}
:global(.button) {
font-size: 1rem;
border: none;
background: none;
cursor: pointer;
}
:global(.button):disabled {
color: grey!important;
cursor: default;
text-decoration: none!important;
}
:global(.nav .button):hover {
text-decoration: underline;
}
:global(.nav .button) {
color: white;
float: right;
}
:global(.content) {
padding: 24px;
border-radius: 17px;
color: black;
background-color: white;
width: 100%;
max-width: 500px;
min-width: 330px;
margin: 10vh auto;
}
:global(.headline) {
text-align: center;
margin-top: 0;
}
:global(.error) {
color: red;
padding: 0 0 10px;
}
</style>

4
examples/svelte/src/app.css
View File

@ -13,3 +13,7 @@ body {
* {
box-sizing: border-box;
}
hanko-auth::part(form-item) {
min-width: 100%; /* input fields and buttons are on top of each other */
}

3
examples/svelte/src/assets/svelte.svg
View File

@ -1 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6"
height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

23
examples/svelte/src/lib/Login.svelte
View File

@ -12,11 +12,10 @@
navigate('/todo');
};
onMount(async () => {
register({ shadow: true }).catch((e) => {
console.error(e)
});
let error: Error | null = null;
onMount(async () => {
register({ shadow: true }).catch((e) => error = e);
element?.addEventListener('hankoAuthSuccess', redirectToTodos);
});
@ -26,19 +25,9 @@
</script>
<div class="content">
{#if error}
<div class="error">{ error?.message }</div>
{/if}
<hanko-auth bind:this={element} {api}/>
</div>
<style>
.content {
padding: 24px;
border-radius: 17px;
color: black;
background-color: white;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

45
examples/svelte/src/lib/Profile.svelte Normal file
View File

@ -0,0 +1,45 @@
<script lang="ts">
import { onMount } from "svelte";
import { useNavigate } from "svelte-navigator";
import { TodoClient } from "./TodoClient";
import { register } from "@teamhanko/hanko-elements";
const hankoAPI = import.meta.env.VITE_HANKO_API;
const todoAPI = import.meta.env.VITE_TODO_API;
const todoClient = new TodoClient(todoAPI);
const navigate = useNavigate();
let error: Error | null = null;
onMount(async () => {
register({ shadow: true }).catch((e) => error = e);
});
const logout = () => {
todoClient
.logout()
.then(() => {
navigate("/");
return;
})
.catch((e) => error = e);
}
const todos = () => {
navigate("/todo");
}
</script>
<nav class="nav">
<button class="button" on:click|preventDefault={logout}>Logout</button>
<button class="button" disabled>Profile</button>
<button class="button" on:click|preventDefault={todos}>Todos</button>
</nav>
<div class="content">
<h1 class="headline">Profile</h1>
{#if error}
<div class="error">{ error?.message }</div>
{/if}
<hanko-profile api={hankoAPI}/>
</div>

56
examples/svelte/src/lib/Todo.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { onMount } from "svelte";
import { useNavigate } from "svelte-navigator";
import { TodoClient } from "./TodoClient";
import type { Todos } from "./TodoClient"
import { TodoClient } from "./TodoClient";
const api = import.meta.env.VITE_TODO_API;
const todoClient = new TodoClient(api);
@ -115,10 +115,16 @@
console.error(e);
});
}
const profile = () => {
navigate("/profile");
}
</script>
<nav class="nav">
<button class="button" on:click={logout}>Logout</button>
<button class="button" on:click|preventDefault={logout}>Logout</button>
<button class="button" on:click|preventDefault={profile}>Profile</button>
<button class="button" disabled>Todos</button>
</nav>
<div class="content">
<h1 class="headline">Todos</h1>
@ -155,47 +161,6 @@
<style>
.nav {
width: 100%;
position: fixed;
top: 0;
padding: 10px;
opacity: 0.9;
}
.button {
font-size: 1rem;
border: none;
background: none;
cursor: pointer;
}
.nav .button:hover {
text-decoration: underline;
}
.nav .button {
color: white;
float: right;
}
.content {
padding: 24px;
border-radius: 17px;
color: black;
background-color: white;
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.headline {
text-align: center;
margin-top: 0;
}
.form {
display: flex;
margin-bottom: 17px;
@ -228,11 +193,6 @@
cursor: pointer;
}
.error {
color: red;
padding: 0 0 10px;
}
.input {
border: 1px solid black;
border-radius: 2.4px;