Add JRPC API, reworked Login and User pages
This commit is contained in:
Fabian Stamm
@ -11,9 +11,9 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"classnames": "^2.3.2",
|
||||
"cssnano": "^6.0.0",
|
||||
"esbuild": "^0.17.15",
|
||||
"flowbite": "^1.6.4",
|
||||
"flowbite-svelte": "^0.34.7",
|
||||
"esbuild": "^0.17.16",
|
||||
"flowbite": "^1.6.5",
|
||||
"flowbite-svelte": "^0.34.9",
|
||||
"postcss": "^8.4.21",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-url": "^10.1.3",
|
||||
@ -27,7 +27,7 @@
|
||||
"svelte": "^3.58.0",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"typescript": "^5.0.3"
|
||||
"typescript": "^5.0.4"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublishOnly": "npm run build",
|
||||
@ -39,7 +39,9 @@
|
||||
"@hibas123/theme": "^2.0.6",
|
||||
"@hibas123/utils": "^2.2.18",
|
||||
"@rollup/plugin-commonjs": "^24.0.1",
|
||||
"@simplewebauthn/browser": "^7.2.0",
|
||||
"cleave.js": "^1.6.0",
|
||||
"joi": "^17.9.1",
|
||||
"what-the-pack": "^2.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,8 +4,33 @@
|
||||
export let title: string;
|
||||
export let loading = false;
|
||||
export let hide = false;
|
||||
|
||||
$: console.log({ loading });
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="card-elevated container">
|
||||
<!-- <div class="container card"> -->
|
||||
<div class="card elv-8 title-container">
|
||||
<h1 style="margin:0">{title}</h1>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="loader_container">
|
||||
<div class="loader_box">
|
||||
<div class="loader" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="content-container" class:loading_container={loading}>
|
||||
{#if !(loading && hide)}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
@ -21,6 +46,7 @@
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
padding-top: 2.5rem;
|
||||
width: 25rem;
|
||||
|
||||
min-height: calc(100px + 2.5rem);
|
||||
min-width: 100px;
|
||||
@ -34,6 +60,7 @@
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
/* padding: 5px 20px; */
|
||||
}
|
||||
|
||||
@ -65,26 +92,3 @@
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="card-elevated container">
|
||||
<!-- <div class="container card"> -->
|
||||
<div class="card elv-8 title-container">
|
||||
<h1 style="margin:0">{title}</h1>
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="loader_container">
|
||||
<div class="loader_box">
|
||||
<div class="loader" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="content-container" class:loading_container={loading}>
|
||||
{#if !(loading && hide)}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
Frontend/src/components/MainNavbar.svelte
Normal file
33
Frontend/src/components/MainNavbar.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
NavBrand,
|
||||
NavHamburger,
|
||||
NavLi,
|
||||
NavUl,
|
||||
Navbar,
|
||||
} from "flowbite-svelte";
|
||||
|
||||
export let sidebarOpen: boolean;
|
||||
export let sidebarOpenVisible: boolean;
|
||||
</script>
|
||||
|
||||
<Navbar let:hidden let:toggle color="form">
|
||||
{#if sidebarOpenVisible}
|
||||
<NavHamburger on:click={() => (sidebarOpen = !sidebarOpen)} />
|
||||
{/if}
|
||||
<NavBrand href="/">
|
||||
<span
|
||||
class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
|
||||
>
|
||||
OpenAuth
|
||||
</span>
|
||||
</NavBrand>
|
||||
<NavHamburger on:click={toggle} />
|
||||
<NavUl {hidden}>
|
||||
<NavLi href="/" active={true}>Home</NavLi>
|
||||
<NavLi href="/user">User</NavLi>
|
||||
<!-- <NavLi href="/services">Services</NavLi>
|
||||
<NavLi href="/pricing">Pricing</NavLi>
|
||||
<NavLi href="/contact">Contact</NavLi> -->
|
||||
</NavUl>
|
||||
</Navbar>
|
||||
@ -28,6 +28,7 @@ body {
|
||||
|
||||
.group {
|
||||
position: relative;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 24px;
|
||||
min-height: 45px;
|
||||
}
|
||||
@ -212,6 +213,11 @@ body {
|
||||
transition: width 0.2s ease-out, padding-top 0.2s ease-out;
|
||||
}
|
||||
|
||||
.btn-wide {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loader_box {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
@ -2,22 +2,38 @@ import { Client } from "@hibas123/openauth-internalapi";
|
||||
import request, { RequestError } from "./request";
|
||||
|
||||
const provider = new Client.ServiceProvider((data) => {
|
||||
request("/api/jrpc", {}, "POST", data, true, true).then(result => {
|
||||
provider.onPacket(result);
|
||||
fetch("/api/jrpc", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
}).then(res => {
|
||||
if (res.ok) return res.json();
|
||||
else throw new Error(res.statusText);
|
||||
}).then(res => {
|
||||
provider.onPacket(res);
|
||||
}).catch(err => {
|
||||
if (err instanceof RequestError) {
|
||||
let data = err.response;
|
||||
if (data.error && Array.isArray(data.error)) {
|
||||
data.error = data.error[0];
|
||||
}
|
||||
provider.onPacket(data);
|
||||
}
|
||||
});
|
||||
provider.onPacket({
|
||||
jsonrpc: "2.0",
|
||||
method: data.method,
|
||||
id: data.id,
|
||||
error: {
|
||||
code: -32603,
|
||||
message: err.message,
|
||||
},
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
const InternalAPI = {
|
||||
Account: new Client.AccountService(provider),
|
||||
Security: new Client.SecurityService(provider),
|
||||
TwoFactor: new Client.TFAService(provider),
|
||||
Login: new Client.LoginService(provider),
|
||||
}
|
||||
|
||||
export default InternalAPI;
|
||||
|
||||
(window as any).InternalAPI = InternalAPI;
|
||||
|
||||
@ -15,17 +15,6 @@
|
||||
</p>
|
||||
|
||||
<h2>Applications using OpenAuth</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://ebook.stamm.me">EBook Store and Reader</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://notes.hibas123.de">
|
||||
Secure and Simple Notes application
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,124 +1,34 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {} from "flowbite-svelte";
|
||||
|
||||
import { LoginState } from "@hibas123/openauth-internalapi";
|
||||
import Theme from "../../components/theme";
|
||||
import loginState from "./state";
|
||||
import HoveringContentBox from "../../components/HoveringContentBox.svelte";
|
||||
import Api from "./api.ts";
|
||||
import Credentials from "./Credentials.svelte";
|
||||
import Redirect from "./Redirect.svelte";
|
||||
import Twofactor from "./Twofactor.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import Username from "./Username.svelte";
|
||||
import Password from "./Password.svelte";
|
||||
import Success from "./Success.svelte";
|
||||
import TwoFactor from "./TwoFactor.svelte";
|
||||
|
||||
const appname = "OpenAuth";
|
||||
|
||||
const states = {
|
||||
credentials: 1,
|
||||
twofactor: 3,
|
||||
redirect: 4,
|
||||
};
|
||||
|
||||
let username = Api.getUsername();
|
||||
let password = "";
|
||||
|
||||
let loading = false;
|
||||
let state = states.credentials;
|
||||
|
||||
function getButtonText(state) {
|
||||
switch (state) {
|
||||
case states.username:
|
||||
return "Next";
|
||||
case states.password:
|
||||
return "Login";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
$: btnText = getButtonText(state);
|
||||
|
||||
let error;
|
||||
|
||||
// window.addEventListener("popstate", () => {
|
||||
// state = history.state;
|
||||
// })
|
||||
|
||||
function LoadRedirect() {
|
||||
state = states.redirect;
|
||||
}
|
||||
|
||||
function Loading() {
|
||||
state = states.loading;
|
||||
}
|
||||
|
||||
let salt;
|
||||
async function buttonClick() {
|
||||
if (state === states.username) {
|
||||
Loading();
|
||||
let res = await Api.setUsername(username);
|
||||
if (res.error) {
|
||||
error = res.error;
|
||||
LoadUsername();
|
||||
} else {
|
||||
LoadPassword();
|
||||
}
|
||||
} else if (state === states.password) {
|
||||
Loading();
|
||||
let res = await Api.setPassword(password);
|
||||
if (res.error) {
|
||||
error = res.error;
|
||||
LoadPassword();
|
||||
} else {
|
||||
if (res.tfa) {
|
||||
// TODO: Make TwoFactor UI/-s
|
||||
} else {
|
||||
LoadRedirect();
|
||||
}
|
||||
}
|
||||
btnText = "Error";
|
||||
}
|
||||
}
|
||||
|
||||
function startRedirect() {
|
||||
state = states.redirect;
|
||||
// Show message to User and then redirect
|
||||
setTimeout(() => Api.finish(), 2000);
|
||||
}
|
||||
|
||||
function afterCredentials() {
|
||||
Object.keys(Api); // Some weird bug needs this???
|
||||
|
||||
if (Api.twofactor) {
|
||||
state = states.twofactor;
|
||||
} else {
|
||||
startRedirect();
|
||||
}
|
||||
}
|
||||
|
||||
function afterTwoFactor() {
|
||||
startRedirect();
|
||||
}
|
||||
const { state } = loginState;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Theme>
|
||||
<HoveringContentBox title="Login" {loading}>
|
||||
<HoveringContentBox title="Login" loading={$state.loading}>
|
||||
<form action="JavaScript:void(0)">
|
||||
{#if state === states.redirect}
|
||||
<Redirect />
|
||||
{:else if state === states.credentials}
|
||||
<Credentials next={afterCredentials} setLoading={(s) => (loading = s)} />
|
||||
{:else if state === states.twofactor}
|
||||
<Twofactor finish={afterTwoFactor} setLoading={(s) => (loading = s)} />
|
||||
{#if $state.success}
|
||||
<Success />
|
||||
{:else if !$state.username}
|
||||
<Username on:username={(evt) => loginState.setUsername(evt.detail)} />
|
||||
{:else if !$state.password}
|
||||
<Password
|
||||
username={$state.username}
|
||||
on:password={(evt) => loginState.setPassword(evt.detail)}
|
||||
/>
|
||||
{:else if $state.requireTwoFactor.length > 0}
|
||||
<TwoFactor />
|
||||
{/if}
|
||||
</form>
|
||||
</HoveringContentBox>
|
||||
<footer>
|
||||
<p>Powered by {appname}</p>
|
||||
</footer>
|
||||
</Theme>
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
<script>
|
||||
import Api from "./api.ts";
|
||||
|
||||
let error;
|
||||
let password = "";
|
||||
let username = Api.getUsername();
|
||||
|
||||
const states = {
|
||||
username: 1,
|
||||
password: 2
|
||||
};
|
||||
|
||||
let state = states.username;
|
||||
|
||||
let salt;
|
||||
|
||||
export let setLoading;
|
||||
export let next;
|
||||
|
||||
async function buttonClick() {
|
||||
setLoading(true);
|
||||
if (state === states.username) {
|
||||
let res = await Api.setUsername(username);
|
||||
if (res.error) {
|
||||
error = res.error;
|
||||
} else {
|
||||
state = states.password;
|
||||
error = undefined;
|
||||
}
|
||||
} else if (state === states.password) {
|
||||
let res = await Api.setPassword(password);
|
||||
if (res.error) {
|
||||
error = res.error;
|
||||
} else {
|
||||
error = undefined;
|
||||
next();
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: var(--error);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.wide-button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if state === states.username}
|
||||
<h3>Enter your Username or your E-Mail Address</h3>
|
||||
<div class="floating group">
|
||||
<input
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
bind:value={username} />
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label>Username or E-Mail</label>
|
||||
<div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
|
||||
</div>
|
||||
{:else}
|
||||
<h3>Enter password for {username}</h3>
|
||||
<div class="floating group">
|
||||
<input
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
autofocus
|
||||
bind:value={password} />
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label>Password</label>
|
||||
<div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-primary wide-button" on:click={buttonClick}>Next</button>
|
||||
16
Frontend/src/pages/login/Error.svelte
Normal file
16
Frontend/src/pages/login/Error.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import loginState from "./state";
|
||||
|
||||
let { state } = loginState;
|
||||
</script>
|
||||
|
||||
{#if $state.error}
|
||||
<div class="error">{$state.error}</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: var(--error);
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
||||
30
Frontend/src/pages/login/Password.svelte
Normal file
30
Frontend/src/pages/login/Password.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Error from "./Error.svelte";
|
||||
|
||||
let password: string = "";
|
||||
export let username: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<h3>Enter the password for {username}</h3>
|
||||
<div class="floating group">
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
autocomplete="password"
|
||||
autofocus
|
||||
bind:value={password}
|
||||
/>
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label for="password">Password</label>
|
||||
<Error />
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-primary btn-wide"
|
||||
on:click={() => dispatch("password", password)}>Next</button
|
||||
>
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import Cleave from "cleave.js";
|
||||
import { onMount } from "svelte";
|
||||
import Error from "../Error.svelte";
|
||||
|
||||
export let error;
|
||||
// export let label;
|
||||
export let value;
|
||||
export let length = 6;
|
||||
@ -17,17 +17,11 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: var(--error);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="floating group">
|
||||
<input id="noasidhglk" bind:this={input} autofocus bind:value />
|
||||
<input id="code-input" bind:this={input} autofocus bind:value />
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label for="noasidhglk">Code</label>
|
||||
<div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
|
||||
<label for="code-input">Code</label>
|
||||
|
||||
<Error />
|
||||
</div>
|
||||
21
Frontend/src/pages/login/TF/TOTP.svelte
Normal file
21
Frontend/src/pages/login/TF/TOTP.svelte
Normal file
@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import Error from "../Error.svelte";
|
||||
import loginState from "../state";
|
||||
import CodeInput from "./CodeInput.svelte";
|
||||
|
||||
export let id: string;
|
||||
export let name: string;
|
||||
|
||||
let code: string = "";
|
||||
|
||||
function send() {
|
||||
loginState.useTOTP(id, code);
|
||||
}
|
||||
</script>
|
||||
|
||||
<h3>TOTP {name}</h3>
|
||||
<CodeInput bind:value={code} length={6} />
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary btn-wide" on:click={send}> Send </button>
|
||||
</div>
|
||||
28
Frontend/src/pages/login/TF/WebAuthn.svelte
Normal file
28
Frontend/src/pages/login/TF/WebAuthn.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Error from "../Error.svelte";
|
||||
import loginState from "../state";
|
||||
import { startAuthentication } from "@simplewebauthn/browser";
|
||||
|
||||
export let id: string;
|
||||
|
||||
async function doAuth() {
|
||||
let challenge = await loginState.getWebAuthnChallenge(id);
|
||||
try {
|
||||
loginState.setLoading(true);
|
||||
let result = await startAuthentication(JSON.parse(challenge));
|
||||
await loginState.useWebAuthn(id, result);
|
||||
} catch (e) {
|
||||
loginState.setError(e.message);
|
||||
return;
|
||||
} finally {
|
||||
loginState.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
doAuth();
|
||||
});
|
||||
</script>
|
||||
|
||||
<Error />
|
||||
114
Frontend/src/pages/login/TwoFactor.svelte
Normal file
114
Frontend/src/pages/login/TwoFactor.svelte
Normal file
@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import loginState from "./state";
|
||||
import Icon from "./icons/Icon.svelte";
|
||||
import { TFAType } from "@hibas123/openauth-internalapi";
|
||||
import { onMount } from "svelte";
|
||||
import Totp from "./TF/TOTP.svelte";
|
||||
import Error from "./Error.svelte";
|
||||
import WebAuthn from "./TF/WebAuthn.svelte";
|
||||
|
||||
let { state } = loginState;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let selected = undefined;
|
||||
|
||||
$: {
|
||||
if ($state.requireTwoFactor?.length == 1) {
|
||||
selected = $state.requireTwoFactor[0];
|
||||
}
|
||||
}
|
||||
|
||||
const typeIconMap = {
|
||||
[TFAType.TOTP]: "Authenticator",
|
||||
[TFAType.BACKUP_CODE]: "BackupCode",
|
||||
[TFAType.WEBAUTHN]: "SecurityKey",
|
||||
[TFAType.APP_ALLOW]: "AppPush",
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if !selected}
|
||||
<h3>Choose your 2FA method</h3>
|
||||
<ul>
|
||||
{#each $state.requireTwoFactor ?? [] as method}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<li on:click={() => (selected = method)}>
|
||||
<div class="icon">
|
||||
<Icon icon_name={typeIconMap[method.tfatype]} />
|
||||
</div>
|
||||
|
||||
<div class="name">{method.name}</div>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
<Error />
|
||||
</ul>
|
||||
{:else}
|
||||
{#if selected.tfatype == TFAType.TOTP}
|
||||
<Totp id={selected.id} name={selected.name} />
|
||||
{:else if selected.tfatype == TFAType.BACKUP_CODE}
|
||||
backup
|
||||
{:else if selected.tfatype == TFAType.WEBAUTHN}
|
||||
<WebAuthn id={selected.id} />
|
||||
{:else if selected.tfatype == TFAType.APP_ALLOW}
|
||||
appallow
|
||||
{:else}
|
||||
<p>Unknown 2FA type</p>
|
||||
{/if}
|
||||
|
||||
<p>
|
||||
<a
|
||||
class="to-list"
|
||||
href="# "
|
||||
on:click={(evt) => {
|
||||
evt.preventDefault();
|
||||
loginState.setError(undefined);
|
||||
selected = undefined;
|
||||
}}
|
||||
>
|
||||
Choose another Method
|
||||
</a>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
border-top: 1px grey solid;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 1rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 20px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.to-list {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,104 +0,0 @@
|
||||
<script>
|
||||
import Api, { TFATypes } from "./api.ts";
|
||||
import Icon from "./icons/Icon.svelte";
|
||||
|
||||
import OTCTwoFactor from "./twofactors/otc.svelte";
|
||||
import PushTwoFactor from "./twofactors/push.svelte";
|
||||
import U2FTwoFactor from "./twofactors/u2f.svelte";
|
||||
|
||||
const states = {
|
||||
list: 1,
|
||||
twofactor: 2
|
||||
};
|
||||
|
||||
function getIcon(tf) {
|
||||
switch (tf.type) {
|
||||
case TFATypes.OTC:
|
||||
return "Authenticator";
|
||||
case TFATypes.BACKUP_CODE:
|
||||
return "BackupCode";
|
||||
case TFATypes.U2F:
|
||||
return "SecurityKey";
|
||||
case TFATypes.APP_ALLOW:
|
||||
return "AppPush";
|
||||
}
|
||||
}
|
||||
|
||||
let twofactors = Api.twofactor.map(tf => {
|
||||
return {
|
||||
...tf,
|
||||
icon: getIcon(tf)
|
||||
};
|
||||
});
|
||||
|
||||
let state = states.list;
|
||||
|
||||
let twofactor = undefined;
|
||||
twofactor = twofactors[0];
|
||||
$: console.log(twofactor);
|
||||
|
||||
function onFinish(res) {
|
||||
if (res) finish();
|
||||
else twofactor = undefined;
|
||||
}
|
||||
|
||||
export let finish;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
border-top: 1px grey solid;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 48px;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
{#if !twofactor}
|
||||
<h3>Select your Authentication method:</h3>
|
||||
<ul>
|
||||
{#each twofactors as tf}
|
||||
<li on:click={() => (twofactor = tf)}>
|
||||
<div class="icon">
|
||||
<Icon icon_name={tf.icon} />
|
||||
</div>
|
||||
|
||||
<div class="name">{tf.name}</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if twofactor.type === TFATypes.OTC}
|
||||
<OTCTwoFactor id={twofactor.id} finish={onFinish} otc={true} />
|
||||
{:else if twofactor.type === TFATypes.BACKUP_CODE}
|
||||
<OTCTwoFactor id={twofactor.id} finish={onFinish} otc={false} />
|
||||
{:else if twofactor.type === TFATypes.U2F}
|
||||
<U2FTwoFactor id={twofactor.id} finish={onFinish} />
|
||||
{:else if twofactor.type === TFATypes.APP_ALLOW}
|
||||
<PushTwoFactor id={twofactor.id} finish={onFinish} />
|
||||
{:else}
|
||||
<div>Invalid TwoFactor Method!</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
29
Frontend/src/pages/login/Username.svelte
Normal file
29
Frontend/src/pages/login/Username.svelte
Normal file
@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Error from "./Error.svelte";
|
||||
|
||||
let username: string = "";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<h3>Enter your Username or your E-Mail Address</h3>
|
||||
<div class="floating group">
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
bind:value={username}
|
||||
/>
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label for="username">Username or E-Mail</label>
|
||||
<Error />
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-primary btn-wide"
|
||||
on:click={() => dispatch("username", username)}>Next</button
|
||||
>
|
||||
@ -1,182 +0,0 @@
|
||||
import request from "../../helper/request";
|
||||
import sha from "../../helper/sha512";
|
||||
import { setCookie, getCookie } from "../../helper/cookie";
|
||||
|
||||
export interface TwoFactor {
|
||||
id: string;
|
||||
name: string;
|
||||
type: TFATypes;
|
||||
}
|
||||
|
||||
export enum TFATypes {
|
||||
OTC,
|
||||
BACKUP_CODE,
|
||||
U2F,
|
||||
APP_ALLOW,
|
||||
}
|
||||
|
||||
// const Api = {
|
||||
// // twofactor: [{
|
||||
// // id: "1",
|
||||
// // name: "Backup Codes",
|
||||
// // type: TFATypes.BACKUP_CODE
|
||||
// // }, {
|
||||
// // id: "2",
|
||||
// // name: "YubiKey",
|
||||
// // type: TFATypes.U2F
|
||||
// // }, {
|
||||
// // id: "3",
|
||||
// // name: "Authenticator",
|
||||
// // type: TFATypes.OTC
|
||||
// // }] as TwoFactor[],
|
||||
|
||||
// }
|
||||
|
||||
export interface IToken {
|
||||
token: string;
|
||||
expires: string;
|
||||
}
|
||||
|
||||
function makeid(length) {
|
||||
var result = "";
|
||||
var characters =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
var charactersLength = characters.length;
|
||||
for (var i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export default class Api {
|
||||
static salt: string;
|
||||
static login: IToken;
|
||||
static special: IToken;
|
||||
static username: string;
|
||||
|
||||
static twofactor: any[];
|
||||
|
||||
static getUsername() {
|
||||
return this.username || getCookie("username");
|
||||
}
|
||||
|
||||
static async setUsername(
|
||||
username: string
|
||||
): Promise<{ error: string | undefined }> {
|
||||
return request(
|
||||
"/api/user/login",
|
||||
{
|
||||
type: "username",
|
||||
username,
|
||||
},
|
||||
"POST"
|
||||
)
|
||||
.then((res) => {
|
||||
this.salt = res.salt;
|
||||
this.username = username;
|
||||
return {
|
||||
error: undefined,
|
||||
};
|
||||
})
|
||||
.catch((err) => {
|
||||
let error = err.message;
|
||||
return { error };
|
||||
});
|
||||
}
|
||||
|
||||
static async setPassword(
|
||||
password: string
|
||||
): Promise<{ error: string | undefined; twofactor?: any }> {
|
||||
const date = new Date().valueOf();
|
||||
let pw = sha(sha(this.salt + password) + date.toString());
|
||||
return request(
|
||||
"/api/user/login",
|
||||
{
|
||||
type: "password",
|
||||
},
|
||||
"POST",
|
||||
{
|
||||
username: this.username,
|
||||
password: pw,
|
||||
date,
|
||||
}
|
||||
)
|
||||
.then(({ login, special, tfa }) => {
|
||||
this.login = login;
|
||||
this.special = special;
|
||||
|
||||
if (tfa && Array.isArray(tfa) && tfa.length > 0)
|
||||
this.twofactor = tfa;
|
||||
else this.twofactor = undefined;
|
||||
|
||||
return {
|
||||
error: undefined,
|
||||
};
|
||||
})
|
||||
.catch((err) => {
|
||||
let error = err.message;
|
||||
return { error };
|
||||
});
|
||||
}
|
||||
|
||||
static gettok() {
|
||||
return {
|
||||
login: this.login.token,
|
||||
special: this.special.token,
|
||||
};
|
||||
}
|
||||
|
||||
static async sendBackup(id: string, code: string) {
|
||||
return request("/api/user/twofactor/backup", this.gettok(), "PUT", {
|
||||
code,
|
||||
id,
|
||||
})
|
||||
.then(({ login_exp, special_exp }) => {
|
||||
this.login.expires = login_exp;
|
||||
this.special.expires = special_exp;
|
||||
return {};
|
||||
})
|
||||
.catch((err) => ({ error: err.message }));
|
||||
}
|
||||
|
||||
static async sendOTC(id: string, code: string) {
|
||||
return request("/api/user/twofactor/otc", this.gettok(), "PUT", {
|
||||
code,
|
||||
id,
|
||||
})
|
||||
.then(({ login_exp, special_exp }) => {
|
||||
this.login.expires = login_exp;
|
||||
this.special.expires = special_exp;
|
||||
return {};
|
||||
})
|
||||
.catch((error) => ({ error: error.message }));
|
||||
}
|
||||
|
||||
static finish() {
|
||||
let d = new Date();
|
||||
d.setTime(d.getTime() + 30 * 24 * 60 * 60 * 1000); //Keep the username 30 days
|
||||
setCookie("username", this.username, d.toUTCString());
|
||||
|
||||
setCookie(
|
||||
"login",
|
||||
this.login.token,
|
||||
new Date(this.login.expires).toUTCString()
|
||||
);
|
||||
setCookie(
|
||||
"special",
|
||||
this.special.token,
|
||||
new Date(this.special.expires).toUTCString()
|
||||
);
|
||||
|
||||
let url = new URL(window.location.href);
|
||||
let state = url.searchParams.get("state");
|
||||
let red = "/";
|
||||
|
||||
if (state) {
|
||||
let base64 = url.searchParams.get("base64");
|
||||
if (base64) red = atob(state);
|
||||
else red = state;
|
||||
}
|
||||
setTimeout(() => (window.location.href = red), 200);
|
||||
}
|
||||
}
|
||||
183
Frontend/src/pages/login/state.ts
Normal file
183
Frontend/src/pages/login/state.ts
Normal file
@ -0,0 +1,183 @@
|
||||
import type { LoginState } from "@hibas123/openauth-internalapi";
|
||||
import { derived, get, writable } from "svelte/store";
|
||||
import InternalAPI from "../../helper/api";
|
||||
import sha from "../../helper/sha512";
|
||||
|
||||
interface LocalLoginState extends LoginState {
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
username?: string;
|
||||
}
|
||||
|
||||
class LoginStore {
|
||||
state = writable<LocalLoginState>({
|
||||
username: undefined,
|
||||
password: false,
|
||||
passwordSalt: undefined,
|
||||
requireTwoFactor: [],
|
||||
success: false,
|
||||
loading: true,
|
||||
error: undefined
|
||||
})
|
||||
|
||||
isFinished = derived(this.state, $state => $state.success);
|
||||
|
||||
constructor() {
|
||||
this.state.subscribe((state) => {
|
||||
if (state.success) {
|
||||
setTimeout(() => {
|
||||
this.finish();
|
||||
}, 2000);
|
||||
}
|
||||
})
|
||||
this.getState();
|
||||
}
|
||||
|
||||
setLoading(loading: boolean) {
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
loading,
|
||||
error: loading ? undefined : current.error,
|
||||
}));
|
||||
}
|
||||
|
||||
setError(error: string) {
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
error,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
async getState() {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let state = await InternalAPI.Login.GetState();
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async setUsername(username: string) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let state = await InternalAPI.Login.Start(username);
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
username
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async setPassword(password: string) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
const date = new Date().valueOf();
|
||||
let salt = get(this.state).passwordSalt
|
||||
let pw = sha(sha(salt + password) + date.toString());
|
||||
|
||||
let state = await InternalAPI.Login.UsePassword(pw, date);
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async useTOTP(id: string, code: string) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let state = await InternalAPI.Login.UseTOTP(id, code);
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async useBackupCode(id: string, code: string) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let state = await InternalAPI.Login.UseBackupCode(id, code);
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async getWebAuthnChallenge(id: string) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let challenge = await InternalAPI.Login.GetWebAuthnChallenge(id);
|
||||
return challenge;
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async useWebAuthn(id: string, response: any) {
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
let state = await InternalAPI.Login.UseWebAuthn(id, JSON.stringify(response));
|
||||
this.state.update(current => ({
|
||||
...current,
|
||||
...state,
|
||||
}));
|
||||
} catch (err) {
|
||||
this.setError(err.message);
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async finish() {
|
||||
let url = new URL(window.location.href);
|
||||
let state = url.searchParams.get("state");
|
||||
let red = "/";
|
||||
|
||||
if (state) {
|
||||
let base64 = url.searchParams.get("base64");
|
||||
if (base64) red = atob(state);
|
||||
else red = state;
|
||||
}
|
||||
setTimeout(() => (window.location.href = red), 200);
|
||||
}
|
||||
}
|
||||
|
||||
const loginState = new LoginStore();
|
||||
|
||||
export default loginState;
|
||||
@ -1,50 +0,0 @@
|
||||
<script>
|
||||
import ToList from "./toList.svelte";
|
||||
import Api from "../api.ts";
|
||||
import CodeInput from "./codeInput.svelte";
|
||||
|
||||
let error = "";
|
||||
let code = "";
|
||||
export let finish;
|
||||
export let id;
|
||||
|
||||
export let otc = false;
|
||||
let title = otc ? "One Time Code (OTC)" : "Backup Code";
|
||||
let length = otc ? 6 : 8;
|
||||
|
||||
async function sendCode() {
|
||||
let c = code.replace(/\s+/g, "");
|
||||
if (c.length < length) {
|
||||
error = `Code must be ${length} digits long!`;
|
||||
} else {
|
||||
error = "";
|
||||
let res;
|
||||
if (otc) res = await Api.sendOTC(id, c);
|
||||
else res = await Api.sendBackup(id, c);
|
||||
if (res.error) error = res.error;
|
||||
else finish(true);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-next {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>{title}</h3>
|
||||
|
||||
<CodeInput bind:value={code} label="Code" {error} {length} />
|
||||
|
||||
<div class="actions">
|
||||
<ToList {finish} />
|
||||
<button class="btn btn-primary btn-next" on:click={sendCode}> Send </button>
|
||||
</div>
|
||||
@ -1,389 +0,0 @@
|
||||
<script>
|
||||
import ToList from "./toList.svelte";
|
||||
|
||||
let error = "";
|
||||
let code = "";
|
||||
export let device = "Handy01";
|
||||
// export let deviceId = "";
|
||||
|
||||
export let finish;
|
||||
|
||||
async function requestPush() {
|
||||
// Push Request
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.windows8 {
|
||||
position: relative;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.windows8 .wBall {
|
||||
position: absolute;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
opacity: 0;
|
||||
transform: rotate(225deg);
|
||||
-o-transform: rotate(225deg);
|
||||
-ms-transform: rotate(225deg);
|
||||
-webkit-transform: rotate(225deg);
|
||||
-moz-transform: rotate(225deg);
|
||||
animation: orbit 5.7425s infinite;
|
||||
-o-animation: orbit 5.7425s infinite;
|
||||
-ms-animation: orbit 5.7425s infinite;
|
||||
-webkit-animation: orbit 5.7425s infinite;
|
||||
-moz-animation: orbit 5.7425s infinite;
|
||||
}
|
||||
|
||||
.windows8 .wBall .wInnerBall {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: rgb(0, 140, 255);
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.windows8 #wBall_1 {
|
||||
animation-delay: 1.256s;
|
||||
-o-animation-delay: 1.256s;
|
||||
-ms-animation-delay: 1.256s;
|
||||
-webkit-animation-delay: 1.256s;
|
||||
-moz-animation-delay: 1.256s;
|
||||
}
|
||||
|
||||
.windows8 #wBall_2 {
|
||||
animation-delay: 0.243s;
|
||||
-o-animation-delay: 0.243s;
|
||||
-ms-animation-delay: 0.243s;
|
||||
-webkit-animation-delay: 0.243s;
|
||||
-moz-animation-delay: 0.243s;
|
||||
}
|
||||
|
||||
.windows8 #wBall_3 {
|
||||
animation-delay: 0.5065s;
|
||||
-o-animation-delay: 0.5065s;
|
||||
-ms-animation-delay: 0.5065s;
|
||||
-webkit-animation-delay: 0.5065s;
|
||||
-moz-animation-delay: 0.5065s;
|
||||
}
|
||||
|
||||
.windows8 #wBall_4 {
|
||||
animation-delay: 0.7495s;
|
||||
-o-animation-delay: 0.7495s;
|
||||
-ms-animation-delay: 0.7495s;
|
||||
-webkit-animation-delay: 0.7495s;
|
||||
-moz-animation-delay: 0.7495s;
|
||||
}
|
||||
|
||||
.windows8 #wBall_5 {
|
||||
animation-delay: 1.003s;
|
||||
-o-animation-delay: 1.003s;
|
||||
-ms-animation-delay: 1.003s;
|
||||
-webkit-animation-delay: 1.003s;
|
||||
-moz-animation-delay: 1.003s;
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
transform: rotate(300deg);
|
||||
animation-timing-function: linear;
|
||||
origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: rotate(410deg);
|
||||
animation-timing-function: ease-in-out;
|
||||
origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
transform: rotate(645deg);
|
||||
animation-timing-function: linear;
|
||||
origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
transform: rotate(770deg);
|
||||
animation-timing-function: ease-out;
|
||||
origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
transform: rotate(900deg);
|
||||
animation-timing-function: ease-out;
|
||||
origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-o-transform: rotate(180deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(300deg);
|
||||
-o-animation-timing-function: linear;
|
||||
-o-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(410deg);
|
||||
-o-animation-timing-function: ease-in-out;
|
||||
-o-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(645deg);
|
||||
-o-animation-timing-function: linear;
|
||||
-o-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(770deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
-o-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-o-transform: rotate(900deg);
|
||||
-o-animation-timing-function: ease-out;
|
||||
-o-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-o-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-o-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-ms-transform: rotate(180deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(300deg);
|
||||
-ms-animation-timing-function: linear;
|
||||
-ms-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(410deg);
|
||||
-ms-animation-timing-function: ease-in-out;
|
||||
-ms-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(645deg);
|
||||
-ms-animation-timing-function: linear;
|
||||
-ms-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(770deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-ms-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-ms-transform: rotate(900deg);
|
||||
-ms-animation-timing-function: ease-out;
|
||||
-ms-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-ms-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(300deg);
|
||||
-webkit-animation-timing-function: linear;
|
||||
-webkit-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(410deg);
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-webkit-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(645deg);
|
||||
-webkit-animation-timing-function: linear;
|
||||
-webkit-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(770deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-webkit-transform: rotate(900deg);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
-webkit-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes orbit {
|
||||
0% {
|
||||
opacity: 1;
|
||||
z-index: 99;
|
||||
-moz-transform: rotate(180deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
7% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(300deg);
|
||||
-moz-animation-timing-function: linear;
|
||||
-moz-origin: 0%;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(410deg);
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-moz-origin: 7%;
|
||||
}
|
||||
|
||||
39% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(645deg);
|
||||
-moz-animation-timing-function: linear;
|
||||
-moz-origin: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(770deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-origin: 39%;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: 1;
|
||||
-moz-transform: rotate(900deg);
|
||||
-moz-animation-timing-function: ease-out;
|
||||
-moz-origin: 70%;
|
||||
}
|
||||
|
||||
76% {
|
||||
opacity: 0;
|
||||
-moz-transform: rotate(900deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
-moz-transform: rotate(900deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>SMS</h3>
|
||||
|
||||
<p>A code was sent to your Device <b>{device}</b></p>
|
||||
|
||||
<div class="windows8">
|
||||
<div class="wBall" id="wBall_1">
|
||||
<div class="wInnerBall" />
|
||||
</div>
|
||||
<div class="wBall" id="wBall_2">
|
||||
<div class="wInnerBall" />
|
||||
</div>
|
||||
<div class="wBall" id="wBall_3">
|
||||
<div class="wInnerBall" />
|
||||
</div>
|
||||
<div class="wBall" id="wBall_4">
|
||||
<div class="wInnerBall" />
|
||||
</div>
|
||||
<div class="wBall" id="wBall_5">
|
||||
<div class="wInnerBall" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error">{error}</div>
|
||||
<ToList {finish} />
|
||||
@ -1,49 +0,0 @@
|
||||
<script>
|
||||
import ToList from "./toList.svelte";
|
||||
|
||||
const states = {
|
||||
approve: 1,
|
||||
enter: 2,
|
||||
};
|
||||
let state = states.approve;
|
||||
|
||||
let error = "";
|
||||
let code = "";
|
||||
export let number = "+4915...320";
|
||||
//export let finish;
|
||||
|
||||
function validateCode() {}
|
||||
|
||||
function sendCode() {
|
||||
// Send request to Server
|
||||
state = states.enter;
|
||||
//finish()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--error: red;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>SMS</h3>
|
||||
{#if state === states.approve}
|
||||
<p>Send SMS to {number}</p>
|
||||
<button class="btn btn-primary" on:click={sendCode}>Send</button>
|
||||
{:else}
|
||||
<p>A code was sent to you. Please enter</p>
|
||||
<input type="number" placeholder="Code" bind:value={code} />
|
||||
<button class="btn btn-primary" on:click={validateCode}>Send</button>
|
||||
<br />
|
||||
<a href="# " on:click|preventDefault={() => (state = states.approve)}>
|
||||
Not received?
|
||||
</a>
|
||||
{/if}
|
||||
<div class="error">{error}</div>
|
||||
|
||||
<ToList {finish} />
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
export let finish = () => {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>
|
||||
<a href="# " on:click={evt => evt.preventDefault() || finish(false)}>
|
||||
Choose another Method
|
||||
</a>
|
||||
</p>
|
||||
@ -1,69 +0,0 @@
|
||||
<script>
|
||||
import ToList from "./toList.svelte";
|
||||
|
||||
export let finish;
|
||||
|
||||
const states = {
|
||||
getChallenge: 0,
|
||||
requestUser: 1,
|
||||
sendChallenge: 2,
|
||||
error: 3
|
||||
};
|
||||
|
||||
let state = states.getChallenge;
|
||||
|
||||
let error = "";
|
||||
|
||||
const onError = err => {
|
||||
state = states.error;
|
||||
error = err.message;
|
||||
};
|
||||
|
||||
let challenge;
|
||||
|
||||
async function requestUser() {
|
||||
state = states.requestUser;
|
||||
let res = await window.navigator.credentials.get({
|
||||
publicKey: challenge
|
||||
});
|
||||
state = states.sendChallenge();
|
||||
let r = res.response;
|
||||
let data = encode({
|
||||
authenticatorData: r.authenticatorData,
|
||||
clientDataJSON: r.clientDataJSON,
|
||||
signature: r.signature,
|
||||
userHandle: r.userHandle
|
||||
});
|
||||
let { success } = fetch("https://localhost:8444/auth", {
|
||||
body: data,
|
||||
method: "POST"
|
||||
}).then(res => res.json());
|
||||
if (success) {
|
||||
finish(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function getChallenge() {
|
||||
state = states.getChallenge;
|
||||
challenge = await fetch("https://localhost:8444/auth")
|
||||
.then(res => res.arrayBuffer())
|
||||
.then(data => decode(MessagePack.Buffer.from(data)));
|
||||
|
||||
requestUser().catch(onError);
|
||||
}
|
||||
getChallenge().catch(onError);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--error: red;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
</style>
|
||||
|
||||
<h3>U2F Security Key</h3>
|
||||
<h4>This Method is currently not supported. Please choose another one!</h4>
|
||||
<ToList {finish} />
|
||||
@ -84,9 +84,25 @@ async function onMessage(msg: MessageEvent<any>) {
|
||||
const url = new URL(msg.origin);
|
||||
setAppName(url.hostname);
|
||||
|
||||
if (!msg.data.client_id) {
|
||||
alert("The site requesting the login is not valid");
|
||||
window.close();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!msg.data.type || msg.data.type === "jwt") {
|
||||
console.log("JWT Request");
|
||||
|
||||
await request(
|
||||
"/api/user/oauth/permissions",
|
||||
{
|
||||
client_id: msg.data.client_id,
|
||||
origin: url.hostname,
|
||||
permissions: permissions.join(","),
|
||||
}
|
||||
); // Will fail if client does not exist
|
||||
|
||||
await new Promise<void>((yes) => {
|
||||
console.log("Await user acceptance");
|
||||
setLoading(false);
|
||||
|
||||
@ -1,13 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import MainNavbar from "../../components/MainNavbar.svelte";
|
||||
import Sidebar from "./Sidebar.svelte";
|
||||
import { CurrentPage } from "./nav";
|
||||
import PersonalInfo from "./pages/PersonalInfo.svelte";
|
||||
import Security from "./pages/Security.svelte";
|
||||
|
||||
let sidebarOpen = false;
|
||||
let sidebarOpenVisible = false;
|
||||
|
||||
onMount(() => {
|
||||
const unsub = CurrentPage.subscribe(() => {
|
||||
sidebarOpen = false;
|
||||
});
|
||||
|
||||
return unsub;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="grid main-grid min-h-screen overflow-hidden">
|
||||
<div class="col-span-2">
|
||||
<MainNavbar bind:sidebarOpen bind:sidebarOpenVisible />
|
||||
</div>
|
||||
<div>
|
||||
<Sidebar />
|
||||
<Sidebar bind:sidebarOpen bind:sidebarOpenVisible />
|
||||
</div>
|
||||
<div class="overflow-auto p-4">
|
||||
{#if $CurrentPage == "personal-info"}
|
||||
@ -21,5 +37,6 @@
|
||||
<style>
|
||||
.main-grid {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,197 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
type ContactInfo,
|
||||
type Account,
|
||||
Gender,
|
||||
} from "@hibas123/openauth-internalapi";
|
||||
import InternalAPI from "../../../helper/api";
|
||||
import Loading from "../Loading.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Input,
|
||||
Label,
|
||||
Select,
|
||||
Heading,
|
||||
Spinner,
|
||||
Helper,
|
||||
} from "flowbite-svelte";
|
||||
|
||||
let profileInfo: Account;
|
||||
let loadedProfileInfo: Account;
|
||||
let contactInfo: ContactInfo;
|
||||
|
||||
let loading = true;
|
||||
let error: string | undefined;
|
||||
|
||||
async function load() {
|
||||
error = undefined;
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
profileInfo = await InternalAPI.Account.GetProfile();
|
||||
loadedProfileInfo = { ...profileInfo };
|
||||
contactInfo = await InternalAPI.Account.GetContactInfos();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let savingProfile = false;
|
||||
|
||||
async function saveProfileChanges() {
|
||||
savingProfile = true;
|
||||
|
||||
try {
|
||||
await new Promise((yes) => setTimeout(yes, 1000));
|
||||
await InternalAPI.Account.UpdateProfile(profileInfo);
|
||||
loadedProfileInfo = { ...profileInfo };
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
savingProfile = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: hasProfileChanged =
|
||||
JSON.stringify(profileInfo) != JSON.stringify(loadedProfileInfo);
|
||||
|
||||
onMount(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
let genders = [
|
||||
{
|
||||
value: Gender.None,
|
||||
name: "Not saying",
|
||||
},
|
||||
{
|
||||
value: Gender.Male,
|
||||
name: "Male",
|
||||
},
|
||||
{
|
||||
value: Gender.Female,
|
||||
name: "Female",
|
||||
},
|
||||
{
|
||||
value: Gender.Other,
|
||||
name: "Other",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<Loading {loading} {error}>
|
||||
<Card>
|
||||
<Heading tag="h5">General Account Details</Heading>
|
||||
<hr class="mb-6" />
|
||||
<div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
|
||||
<Input
|
||||
id="birthday-input"
|
||||
placeholder="Birthday"
|
||||
disabled
|
||||
bind:value={profileInfo.birthday}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label class="block mb-2"
|
||||
>Gender
|
||||
<Select items={genders} bind:value={profileInfo.gender} />
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
disabled={!hasProfileChanged || savingProfile}
|
||||
on:click={saveProfileChanges}
|
||||
>
|
||||
{#if savingProfile}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Saving...
|
||||
{:else}
|
||||
Save
|
||||
{/if}
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card class="mt-4">
|
||||
<Heading tag="h5">Contact Details (WIP)</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
<Heading tag="h6" color="gray">Mails</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
{#each contactInfo.mail as mail}
|
||||
<div class="mb-6">
|
||||
<!-- <Label for="mail-input" class="block mb-2">Mail</Label> -->
|
||||
<Input
|
||||
id="mail-input"
|
||||
placeholder="Mail"
|
||||
bind:value={mail.mail}
|
||||
color={mail.verified ? "green" : "base"}
|
||||
disabled
|
||||
/>
|
||||
{#if mail.verified}
|
||||
<Helper class="mt-2" color="green"
|
||||
><span class="font-medium">Well done!</span> E-Mail is verified.</Helper
|
||||
>
|
||||
{:else}
|
||||
<Helper class="mt-2" color="gray"
|
||||
><span class="font-medium">Oh no!</span> E-Mail needs verification.</Helper
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<Heading tag="h6" color="gray">Phones</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
{#each contactInfo.phone as phone}
|
||||
<div class="mb-6">
|
||||
<!-- <Label for="phone-input" class="block mb-2">Phone</Label> -->
|
||||
<Input
|
||||
id="phone-input"
|
||||
placeholder="Phone"
|
||||
bind:value={phone.phone}
|
||||
color={phone.verified ? "green" : "base"}
|
||||
disabled
|
||||
/>
|
||||
{#if phone.verified}
|
||||
<Helper class="mt-2" color="green"
|
||||
><span class="font-medium">Well done!</span> Phone is verified.</Helper
|
||||
>
|
||||
{:else}
|
||||
<Helper class="mt-2" color="gray"
|
||||
><span class="font-medium">Oh no!</span> Phone needs verification.</Helper
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<!-- <div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
|
||||
<Input
|
||||
id="birthday-input"
|
||||
placeholder="Birthday"
|
||||
disabled
|
||||
bind:value={profileInfo.birthday}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label class="block mb-2"
|
||||
>Gender
|
||||
<Select items={genders} bind:value={profileInfo.gender} />
|
||||
</Label>
|
||||
</div> -->
|
||||
|
||||
<!-- <Button>Save</Button> -->
|
||||
</Card>
|
||||
</Loading>
|
||||
@ -1,4 +1,4 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarGroup,
|
||||
@ -6,9 +6,29 @@
|
||||
SidebarWrapper,
|
||||
} from "flowbite-svelte";
|
||||
import { CurrentPage } from "./nav";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let sidebarOpen = false;
|
||||
export let sidebarOpenVisible = false;
|
||||
|
||||
$: open = !sidebarOpenVisible || sidebarOpen;
|
||||
|
||||
onMount(() => {
|
||||
const mq = window.matchMedia("(max-width: 768px)");
|
||||
const onChange = (e: MediaQueryListEvent) => {
|
||||
sidebarOpenVisible = e.matches;
|
||||
};
|
||||
mq.addEventListener("change", onChange);
|
||||
|
||||
onChange({ matches: mq.matches } as MediaQueryListEvent);
|
||||
|
||||
return () => {
|
||||
mq.removeEventListener("change", onChange);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<Sidebar class="h-screen">
|
||||
<Sidebar class="h-screen" style={open ? "display: block" : "display: none"}>
|
||||
<SidebarWrapper class="h-full">
|
||||
<SidebarGroup>
|
||||
<SidebarItem
|
||||
|
||||
36
Frontend/src/pages/user/pages/AddTwoFactor.svelte
Normal file
36
Frontend/src/pages/user/pages/AddTwoFactor.svelte
Normal file
@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { Listgroup, ListgroupItem, Modal, Radio } from "flowbite-svelte";
|
||||
import Totp from "./TwoFactorRegistration/TOTP.svelte";
|
||||
import WebAuthn from "./TwoFactorRegistration/WebAuthn.svelte";
|
||||
|
||||
export let open: boolean;
|
||||
|
||||
let selectedType = undefined;
|
||||
$: {
|
||||
if (!open) {
|
||||
selectedType = undefined;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal bind:open size="md" autoclose={false} class="w-full">
|
||||
{#if !selectedType}
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
|
||||
Select type
|
||||
</h3>
|
||||
<Listgroup active class="w-full">
|
||||
<ListgroupItem
|
||||
class="gap-2 px-4 py-4"
|
||||
on:click={() => (selectedType = "totp")}>TOTP</ListgroupItem
|
||||
>
|
||||
<ListgroupItem
|
||||
class="gap-2 px-4 py-4"
|
||||
on:click={() => (selectedType = "webauthn")}>WebAuthn</ListgroupItem
|
||||
>
|
||||
</Listgroup>
|
||||
{:else if selectedType == "totp"}
|
||||
<Totp on:reload />
|
||||
{:else if selectedType == "webauthn"}
|
||||
<WebAuthn on:reload />
|
||||
{/if}
|
||||
</Modal>
|
||||
203
Frontend/src/pages/user/pages/PersonalInfo.svelte
Normal file
203
Frontend/src/pages/user/pages/PersonalInfo.svelte
Normal file
@ -0,0 +1,203 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
type ContactInfo,
|
||||
type Profile,
|
||||
Gender,
|
||||
} from "@hibas123/openauth-internalapi";
|
||||
import InternalAPI from "../../../helper/api";
|
||||
import Loading from "../Loading.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Input,
|
||||
Label,
|
||||
Select,
|
||||
Heading,
|
||||
Spinner,
|
||||
Helper,
|
||||
} from "flowbite-svelte";
|
||||
|
||||
let profileInfo: Profile;
|
||||
let loadedProfileInfo: Profile;
|
||||
let contactInfo: ContactInfo;
|
||||
|
||||
let loading = true;
|
||||
let error: string | undefined;
|
||||
|
||||
async function load() {
|
||||
error = undefined;
|
||||
loading = true;
|
||||
|
||||
try {
|
||||
profileInfo = await InternalAPI.Account.GetProfile();
|
||||
loadedProfileInfo = { ...profileInfo };
|
||||
contactInfo = await InternalAPI.Account.GetContactInfos();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
let savingProfile = false;
|
||||
|
||||
async function saveProfileChanges() {
|
||||
savingProfile = true;
|
||||
|
||||
try {
|
||||
await new Promise((yes) => setTimeout(yes, 1000));
|
||||
await InternalAPI.Account.UpdateProfile(profileInfo);
|
||||
loadedProfileInfo = { ...profileInfo };
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
savingProfile = false;
|
||||
}
|
||||
}
|
||||
|
||||
$: hasProfileChanged =
|
||||
JSON.stringify(profileInfo) != JSON.stringify(loadedProfileInfo);
|
||||
|
||||
onMount(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
let genders = [
|
||||
{
|
||||
value: Gender.None,
|
||||
name: "Not saying",
|
||||
},
|
||||
{
|
||||
value: Gender.Male,
|
||||
name: "Male",
|
||||
},
|
||||
{
|
||||
value: Gender.Female,
|
||||
name: "Female",
|
||||
},
|
||||
{
|
||||
value: Gender.Other,
|
||||
name: "Other",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<Loading {loading} {error}>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<Card size="md" class="w-full">
|
||||
<Heading tag="h5">General Account Details</Heading>
|
||||
<hr class="mb-6" />
|
||||
<div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input
|
||||
id="name-input"
|
||||
placeholder="Name"
|
||||
bind:value={profileInfo.name}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
|
||||
<Input
|
||||
id="birthday-input"
|
||||
placeholder="Birthday"
|
||||
disabled
|
||||
bind:value={profileInfo.birthday}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label class="block mb-2"
|
||||
>Gender
|
||||
<Select items={genders} bind:value={profileInfo.gender} />
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
disabled={!hasProfileChanged || savingProfile}
|
||||
on:click={saveProfileChanges}
|
||||
>
|
||||
{#if savingProfile}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Saving...
|
||||
{:else}
|
||||
Save
|
||||
{/if}
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<Card size="md" class="w-full">
|
||||
<Heading tag="h5">Contact Details (WIP)</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
<Heading tag="h6" color="gray">Mails</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
{#each contactInfo.mail as mail}
|
||||
<div class="mb-6">
|
||||
<!-- <Label for="mail-input" class="block mb-2">Mail</Label> -->
|
||||
<Input
|
||||
id="mail-input"
|
||||
placeholder="Mail"
|
||||
bind:value={mail.mail}
|
||||
color={mail.verified ? "green" : "base"}
|
||||
disabled
|
||||
/>
|
||||
{#if mail.verified}
|
||||
<Helper class="mt-2" color="green"
|
||||
><span class="font-medium">Well done!</span> E-Mail is verified.</Helper
|
||||
>
|
||||
{:else}
|
||||
<Helper class="mt-2" color="gray"
|
||||
><span class="font-medium">Oh no!</span> E-Mail needs verification.</Helper
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<Heading tag="h6" color="gray">Phones</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
{#each contactInfo.phone as phone}
|
||||
<div class="mb-6">
|
||||
<!-- <Label for="phone-input" class="block mb-2">Phone</Label> -->
|
||||
<Input
|
||||
id="phone-input"
|
||||
placeholder="Phone"
|
||||
bind:value={phone.phone}
|
||||
color={phone.verified ? "green" : "base"}
|
||||
disabled
|
||||
/>
|
||||
{#if phone.verified}
|
||||
<Helper class="mt-2" color="green"
|
||||
><span class="font-medium">Well done!</span> Phone is verified.</Helper
|
||||
>
|
||||
{:else}
|
||||
<Helper class="mt-2" color="gray"
|
||||
><span class="font-medium">Oh no!</span> Phone needs verification.</Helper
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<!-- <div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
|
||||
<Input
|
||||
id="birthday-input"
|
||||
placeholder="Birthday"
|
||||
disabled
|
||||
bind:value={profileInfo.birthday}
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label class="block mb-2"
|
||||
>Gender
|
||||
<Select items={genders} bind:value={profileInfo.gender} />
|
||||
</Label>
|
||||
</div> -->
|
||||
|
||||
<!-- <Button>Save</Button> -->
|
||||
</Card>
|
||||
</div>
|
||||
</Loading>
|
||||
@ -1,12 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
type ContactInfo,
|
||||
type Account,
|
||||
Gender,
|
||||
Token,
|
||||
TwoFactor,
|
||||
TFAType,
|
||||
} from "@hibas123/openauth-internalapi";
|
||||
import { Session, TFAOption, TFAType } from "@hibas123/openauth-internalapi";
|
||||
import InternalAPI from "../../../helper/api";
|
||||
import Loading from "../Loading.svelte";
|
||||
import { onMount } from "svelte";
|
||||
@ -27,18 +20,20 @@
|
||||
TableBodyCell,
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
Alert,
|
||||
} from "flowbite-svelte";
|
||||
import AddTwoFactor from "./AddTwoFactor.svelte";
|
||||
|
||||
let tokens: Token[];
|
||||
let twofactors: TwoFactor[];
|
||||
let tokens: Session[];
|
||||
let twofactors: TFAOption[];
|
||||
let error: string | undefined;
|
||||
let loading = true;
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
try {
|
||||
tokens = await InternalAPI.Security.GetTokens();
|
||||
twofactors = await InternalAPI.Security.GetTwofactorOptions();
|
||||
tokens = await InternalAPI.Security.GetSessions();
|
||||
twofactors = await InternalAPI.TwoFactor.GetOptions();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
} finally {
|
||||
@ -46,13 +41,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function reload() {
|
||||
try {
|
||||
tokens = await InternalAPI.Security.GetSessions();
|
||||
twofactors = await InternalAPI.TwoFactor.GetOptions();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
load();
|
||||
});
|
||||
|
||||
async function revokeToken(id: string) {
|
||||
try {
|
||||
await InternalAPI.Security.RevokeToken(id);
|
||||
await InternalAPI.Security.RevokeSession(id);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
@ -65,6 +69,49 @@
|
||||
[TFAType.BACKUP_CODE]: "Backup-Code",
|
||||
[TFAType.APP_ALLOW]: "App-Auth",
|
||||
};
|
||||
|
||||
let addTwoFactorOpen = false;
|
||||
|
||||
function openAddTwoFactor() {
|
||||
addTwoFactorOpen = true;
|
||||
}
|
||||
|
||||
async function deleteTwoFactor(id: string) {
|
||||
try {
|
||||
await InternalAPI.TwoFactor.Delete(id);
|
||||
await reload();
|
||||
} catch (e) {
|
||||
error = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
let old_pw = "";
|
||||
let new_pw = "";
|
||||
let new_pw_repeat = "";
|
||||
|
||||
let change_password_success = false;
|
||||
let change_password_error: string | undefined;
|
||||
|
||||
function changePassword() {
|
||||
change_password_success = false;
|
||||
change_password_error = undefined;
|
||||
if (new_pw !== new_pw_repeat) {
|
||||
change_password_error = "Passwords do not match";
|
||||
return;
|
||||
}
|
||||
|
||||
InternalAPI.Security.ChangePassword(old_pw, new_pw)
|
||||
.then(() => {
|
||||
change_password_error = undefined;
|
||||
old_pw = "";
|
||||
new_pw = "";
|
||||
new_pw_repeat = "";
|
||||
change_password_success = true;
|
||||
})
|
||||
.catch((e) => {
|
||||
change_password_error = e.message;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Loading {loading} {error}>
|
||||
@ -107,19 +154,31 @@
|
||||
<Heading tag="h5">Change Password</Heading>
|
||||
<hr class="mb-6" />
|
||||
|
||||
{#if change_password_success}
|
||||
<Alert color="green">Password changed successfully.</Alert>
|
||||
{/if}
|
||||
|
||||
{#if change_password_error}
|
||||
<Alert color="red">{change_password_error}</Alert>
|
||||
{/if}
|
||||
|
||||
<div class="mb-6">
|
||||
<Label for="oldPassword">Old Password</Label>
|
||||
<Input type="password" id="oldPassword" />
|
||||
<Input type="password" id="oldPassword" bind:value={old_pw} />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="newPassword">New Password</Label>
|
||||
<Input type="password" id="newPassword" />
|
||||
<Input type="password" id="newPassword" bind:value={new_pw} />
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="newPasswordRepeat">Repeat New Password</Label>
|
||||
<Input type="password" id="newPasswordRepeat" />
|
||||
<Input
|
||||
type="password"
|
||||
id="newPasswordRepeat"
|
||||
bind:value={new_pw_repeat}
|
||||
/>
|
||||
</div>
|
||||
<Button class="mt-4">Change Password</Button>
|
||||
<Button class="mt-4" on:click={changePassword}>Change Password</Button>
|
||||
</Card>
|
||||
|
||||
<Card size="xl" class="mt-4">
|
||||
@ -130,12 +189,21 @@
|
||||
{#each twofactors as tfa}
|
||||
<AccordionItem>
|
||||
<span slot="header">{tfa.name ?? typeToName[tfa.tfatype]}</span>
|
||||
<div>
|
||||
<Button
|
||||
color="red"
|
||||
class="mt-4"
|
||||
on:click={() => deleteTwoFactor(tfa.id)}>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
</Accordion>
|
||||
<Button class="mt-4">Add Option</Button>
|
||||
<Button class="mt-4" on:click={openAddTwoFactor}>Add Option</Button>
|
||||
</Card>
|
||||
|
||||
<AddTwoFactor on:reload={reload} bind:open={addTwoFactorOpen} />
|
||||
|
||||
<!-- <Card size="xl" class="mt-4">
|
||||
<Heading tag="h5">Delete Account</Heading>
|
||||
<hr class="mb-6" />
|
||||
102
Frontend/src/pages/user/pages/TwoFactorRegistration/TOTP.svelte
Normal file
102
Frontend/src/pages/user/pages/TwoFactorRegistration/TOTP.svelte
Normal file
@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import { Alert, Button, Input, Label, Spinner } from "flowbite-svelte";
|
||||
import InternalAPI from "../../../../helper/api";
|
||||
|
||||
import type { TFANewTOTP } from "@hibas123/openauth-internalapi";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let stage = "get-name";
|
||||
let name: string = "";
|
||||
let code: string = "";
|
||||
let totp: TFANewTOTP;
|
||||
|
||||
let creatingTOTP = false;
|
||||
let verifingTOTP = false;
|
||||
|
||||
async function createTOTP() {
|
||||
creatingTOTP = true;
|
||||
try {
|
||||
totp = await InternalAPI.TwoFactor.AddTOTP(name);
|
||||
stage = "verify";
|
||||
} catch (err) {
|
||||
} finally {
|
||||
creatingTOTP = false;
|
||||
}
|
||||
}
|
||||
|
||||
let verifyError = undefined;
|
||||
async function verifyTOTP() {
|
||||
verifingTOTP = true;
|
||||
verifyError = undefined;
|
||||
try {
|
||||
await InternalAPI.TwoFactor.VerifyTOTP(totp.id, code);
|
||||
stage = "done";
|
||||
dispatch("reload");
|
||||
} catch (err) {
|
||||
verifyError = err.message;
|
||||
code = "";
|
||||
} finally {
|
||||
verifingTOTP = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if stage == "get-name"}
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
|
||||
Select a name
|
||||
</h3>
|
||||
<div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input id="name-input" placeholder="Name" bind:value={name} />
|
||||
</div>
|
||||
|
||||
<Button disabled={creatingTOTP} on:click={createTOTP}>
|
||||
{#if creatingTOTP}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Creating...
|
||||
{:else}
|
||||
Create
|
||||
{/if}
|
||||
</Button>
|
||||
{:else if stage == "verify"}
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
|
||||
Save secret and verify
|
||||
</h3>
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<img class="w-64" src={totp.qr} alt="Secret {totp.secret}" />
|
||||
<div>Manually:</div>
|
||||
<div class="text-sm">
|
||||
{totp.secret}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="code-input" class="block mb-2">Code</Label>
|
||||
<Input id="code-input" placeholder="Code" bind:value={code} />
|
||||
</div>
|
||||
|
||||
{#if verifyError}
|
||||
<Alert color="red">
|
||||
<h2 class="text-lg font-bold">Error</h2>
|
||||
<p class="mt-2">{verifyError}</p>
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
<Button disabled={verifingTOTP} on:click={verifyTOTP}>
|
||||
{#if verifingTOTP}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Verify...
|
||||
{:else}
|
||||
Verify
|
||||
{/if}
|
||||
</Button>
|
||||
{:else if stage == "done"}
|
||||
<Alert color="green">
|
||||
<h2 class="text-lg font-bold">Success</h2>
|
||||
<p class="mt-2">Your TOTP has been created.</p>
|
||||
</Alert>
|
||||
{:else}
|
||||
<Alert color="red">
|
||||
<h2 class="text-lg font-bold">Error</h2>
|
||||
<p class="mt-2">An unknown error occured.</p>
|
||||
</Alert>
|
||||
{/if}
|
||||
@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import { Alert, Button, Input, Label, Spinner } from "flowbite-svelte";
|
||||
import { startRegistration } from "@simplewebauthn/browser";
|
||||
import InternalAPI from "../../../../helper/api";
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let stage = "get-name";
|
||||
let name: string = "";
|
||||
|
||||
let creating = false;
|
||||
let error = undefined;
|
||||
|
||||
async function register() {
|
||||
creating = true;
|
||||
error = undefined;
|
||||
try {
|
||||
let challenge_data = await InternalAPI.TwoFactor.AddWebauthn(name);
|
||||
let challenge = JSON.parse(challenge_data.challenge);
|
||||
stage = "verify";
|
||||
|
||||
creating = false;
|
||||
await new Promise<void>((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
console.log(challenge);
|
||||
let response = await startRegistration(challenge);
|
||||
|
||||
await InternalAPI.TwoFactor.VerifyWebAuthn(
|
||||
challenge_data.id,
|
||||
JSON.stringify(response)
|
||||
);
|
||||
|
||||
stage = "done";
|
||||
dispatch("reload");
|
||||
} catch (err) {
|
||||
error = err.message;
|
||||
console.error(err);
|
||||
} finally {
|
||||
creating = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if error}
|
||||
<Alert color="red">
|
||||
<h2 class="text-lg font-bold">Error</h2>
|
||||
<p class="mt-2">An unknown error occured.</p>
|
||||
</Alert>
|
||||
{:else if stage == "get-name"}
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
|
||||
Select a name
|
||||
</h3>
|
||||
<div class="mb-6">
|
||||
<Label for="name-input" class="block mb-2">Name</Label>
|
||||
<Input id="name-input" placeholder="Name" bind:value={name} />
|
||||
</div>
|
||||
|
||||
<Button disabled={creating} on:click={register}>
|
||||
{#if creating}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Creating...
|
||||
{:else}
|
||||
Create
|
||||
{/if}
|
||||
</Button>
|
||||
{:else if stage == "verify"}
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white p-0">
|
||||
Select device to add
|
||||
</h3>
|
||||
<!-- <div class="flex flex-col justify-center items-center">
|
||||
<img class="w-64" src={totp.qr} alt="Secret {totp.secret}" />
|
||||
<div>Manually:</div>
|
||||
<div class="text-sm">
|
||||
{totp.secret}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<Label for="code-input" class="block mb-2">Code</Label>
|
||||
<Input id="code-input" placeholder="Code" bind:value={code} />
|
||||
</div>
|
||||
|
||||
{#if verifyError}
|
||||
<Alert color="red">
|
||||
<h2 class="text-lg font-bold">Error</h2>
|
||||
<p class="mt-2">{verifyError}</p>
|
||||
</Alert>
|
||||
{/if}
|
||||
|
||||
<Button disabled={verifing} on:click={verifyTOTP}>
|
||||
{#if verifing}
|
||||
<Spinner class="mr-3" size="4" color="white" /> Verify...
|
||||
{:else}
|
||||
Verify
|
||||
{/if}
|
||||
</Button> -->
|
||||
{:else if stage == "done"}
|
||||
<Alert color="green">
|
||||
<h2 class="text-lg font-bold">Success</h2>
|
||||
<p class="mt-2">Your WebAuthn device has been registered.</p>
|
||||
</Alert>
|
||||
{/if}
|
||||
@ -1,207 +0,0 @@
|
||||
<script>
|
||||
import AccountPage from "./Pages/Account.svelte";
|
||||
import SecurityPage from "./Pages/Security.svelte";
|
||||
import { slide, fade } from "svelte/transition";
|
||||
|
||||
const pages = [
|
||||
{
|
||||
id: "account",
|
||||
title: "Account",
|
||||
icon: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT4wMSBAZnVsbHdpZHRoPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj48ZyBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNNDU3LjUsMjUwIEM0NTcuNSwxMzUuOTUzMTk5IDM2NS4wNDY4MDEsNDMuNSAyNTEsNDMuNSBDMTM2Ljk1MzE5OSw0My41IDQ0LjUsMTM1Ljk1MzE5OSA0NC41LDI1MCBDNDQuNSwzNjQuMDQ2ODAxIDEzNi45NTMxOTksNDU2LjUgMjUxLDQ1Ni41IEMzNjUuMDQ2ODAxLDQ1Ni41IDQ1Ny41LDM2NC4wNDY4MDEgNDU3LjUsMjUwIFogTTU3LjUsMjUwIEM1Ny41LDE0My4xMzI5MDEgMTQ0LjEzMjkwMSw1Ni41IDI1MSw1Ni41IEMzNTcuODY3MDk5LDU2LjUgNDQ0LjUsMTQzLjEzMjkwMSA0NDQuNSwyNTAgQzQ0NC41LDM1Ni44NjcwOTkgMzU3Ljg2NzA5OSw0NDMuNSAyNTEsNDQzLjUgQzE0NC4xMzI5MDEsNDQzLjUgNTcuNSwzNTYuODY3MDk5IDU3LjUsMjUwIFoiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD48cGF0aCBkPSJNMjUxLjUsMjUyLjkzMzk2MiBDMTk2Ljg1NDE5LDI1Mi45MzM5NjIgMTUyLjUsMjk2LjM2MDgwOSAxNTIuNSwzNTAgQzE1Mi41LDM1My41ODk4NTEgMTU1LjQxMDE0OSwzNTYuNSAxNTksMzU2LjUgTDM0NCwzNTYuNSBDMzQ3LjU4OTg1MSwzNTYuNSAzNTAuNSwzNTMuNTg5ODUxIDM1MC41LDM1MCBDMzUwLjUsMjk2LjM2MDgwOSAzMDYuMTQ1ODEsMjUyLjkzMzk2MiAyNTEuNSwyNTIuOTMzOTYyIFogTTE2NS41LDM0My41MDAwMDEgQzE2NS41LDMwMy42MDI3MDggMjAzLjk3MzEzMSwyNjUuOTMzOTYyIDI1MS41LDI2NS45MzM5NjIgQzI5OS4wMjY4NjksMjY1LjkzMzk2MiAzMzcuNSwzMDMuNjAyNzA4IDMzNy40OTk5OTcsMzQzLjUwMDAwMSBMMTY1LjUsMzQzLjUwMDAwMSBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PHBhdGggZD0iTTMwNC4yNSwxOTMuMzk2MjI2IEMzMDQuMjUsMTY1LjgwODIwMiAyODEuNDY1NDI0LDE0My41IDI1My40MjcwODMsMTQzLjUgQzIyNS4zODg3NDIsMTQzLjUgMjAyLjYwNDE2NywxNjUuODA4MjAyIDIwMi42MDQxNjcsMTkzLjM5NjIyNiBDMjAyLjYwNDE2NywyMjAuOTg0MjUgMjI1LjM4ODc0MiwyNDMuMjkyNDUzIDI1My40MjcwODMsMjQzLjI5MjQ1MyBDMjgxLjQ2NTQyNCwyNDMuMjkyNDUzIDMwNC4yNSwyMjAuOTg0MjUgMzA0LjI1LDE5My4zOTYyMjYgWiBNMjE1LjYwNDE2NywxOTMuMzk2MjI2IEMyMTUuNjA0MTY3LDE3My4wNTAxMDIgMjMyLjUwNzY4MywxNTYuNSAyNTMuNDI3MDgzLDE1Ni41IEMyNzQuMzQ2NDg0LDE1Ni41IDI5MS4yNSwxNzMuMDUwMTAyIDI5MS4yNSwxOTMuMzk2MjI2IEMyOTEuMjUsMjEzLjc0MjM1MSAyNzQuMzQ2NDg0LDIzMC4yOTI0NTMgMjUzLjQyNzA4MywyMzAuMjkyNDUzIEMyMzIuNTA3NjgzLDIzMC4yOTI0NTMgMjE1LjYwNDE2NywyMTMuNzQyMzUxIDIxNS42MDQxNjcsMTkzLjM5NjIyNiBaIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
|
||||
component: AccountPage,
|
||||
},
|
||||
{
|
||||
id: "security",
|
||||
title: "Security",
|
||||
icon: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik00NDUuOCwzNy4zYy0xLjItMC43LTIuNy0wLjgtMy45LTAuMWMtNC4zLDIuMi0xMS42LDMuNC0yMS45LDMuNGMtMzMuNiwwLTkwLjgtMTIuNC0xMjguNy0yMC41Yy0xNC0zLTI2LjEtNS42LTM0LjEtNyAgIGMtMC40LTAuMS0wLjktMC4xLTEuNCwwYy03LjIsMS4yLTE4LjUsMy42LTMxLjcsNi4zQzE4NC4zLDI3LjYsMTI0LjIsNDAsOTAuNiw0MGMtMTEuNiwwLTE3LTEuNS0xOS41LTIuOCAgIGMtMS4yLTAuNi0yLjctMC42LTMuOSwwLjFzLTEuOSwyLTEuOSwzLjRjMCw3My4xLDMuOCwxNjguNCwzMy45LDI1Ny43YzE0LjMsNDIuOCwzMy41LDgwLjcsNTcuMSwxMTIuNyAgIGMyNi42LDM2LDU5LjcsNjUuNyw5OC4zLDg4LjNjMC42LDAuNCwxLjMsMC41LDIsMC41czEuNC0wLjIsMi0wLjVjMzguNi0yMi42LDcxLjYtNTIuMyw5OC4yLTg4LjNjMjMuNi0zMiw0Mi45LTY5LjksNTcuMS0xMTIuNyAgIGMyOS41LTg3LjYsMzMuNy0xNzkuNCwzMy45LTI1Ny43QzQ0Ny43LDM5LjQsNDQ3LDM4LjEsNDQ1LjgsMzcuM3ogTTQwNi4zLDI5NS45Yy0yOS4zLDg4LjEtNzkuNywxNTMuOC0xNDkuOCwxOTUuNCAgIEMxODYuNCw0NDkuNywxMzYsMzg0LDEwNi43LDI5NS45Qzc3LjgsMjEwLDczLjQsMTE4LjEsNzMuMiw0Ni40YzQuNSwxLjEsMTAuMiwxLjYsMTcuMywxLjZjMCwwLDAsMCwwLDAgICBjMzQuNSwwLDk1LjEtMTIuNiwxMzUuMi0yMC45YzEyLjctMi42LDIzLjYtNC45LDMwLjctNi4xYzcuOCwxLjQsMTkuNSwzLjksMzMuMSw2LjhDMzMwLDM2LjYsMzg1LjUsNDguNiw0MjAsNDguNiAgIGM4LjEsMCwxNC43LTAuNywxOS43LTJDNDM5LjMsMTIyLjksNDM0LjcsMjExLjUsNDA2LjMsMjk1Ljl6Ij48L3BhdGg+PHBhdGggZD0iTTI1Ni41LDIxNy44YzQ1LDAsODEuNi0zNi42LDgxLjYtODEuNmMwLTQ1LTM2LjYtODEuNi04MS42LTgxLjZjLTQ1LDAtODEuNiwzNi42LTgxLjYsODEuNiAgIEMxNzQuOSwxODEuMiwyMTEuNSwyMTcuOCwyNTYuNSwyMTcuOHogTTI1Ni41LDYyLjZjNDAuNiwwLDczLjYsMzMsNzMuNiw3My42YzAsNDAuNi0zMyw3My42LTczLjYsNzMuNmMtNDAuNiwwLTczLjYtMzMtNzMuNi03My42ICAgQzE4Mi45LDk1LjYsMjE1LjksNjIuNiwyNTYuNSw2Mi42eiI+PC9wYXRoPjxwYXRoIGQ9Ik0zMDkuMiwyMjguOUgyMDMuOGMtMjYuNSwwLTQ4LDIxLjUtNDgsNDh2NzljMCwyLjIsMS44LDQsNCw0aDE5My40YzIuMiwwLDQtMS44LDQtNHYtNzkgICBDMzU3LjIsMjUwLjQsMzM1LjYsMjI4LjksMzA5LjIsMjI4Ljl6IE0zNDkuMiwzNTEuOUgxNjMuOHYtNzVjMC0yMiwxNy45LTQwLDQwLTQwaDEwNS40YzIyLjEsMCw0MCwxNy45LDQwLDQwTDM0OS4yLDM1MS45ICAgTDM0OS4yLDM1MS45eiI+PC9wYXRoPjwvZz48L3N2Zz4=",
|
||||
component: SecurityPage,
|
||||
},
|
||||
];
|
||||
|
||||
function getPage() {
|
||||
let pageid = window.location.hash.slice(1);
|
||||
return pages.find((e) => e.id === pageid) || pages[0];
|
||||
}
|
||||
|
||||
let page = getPage();
|
||||
window.addEventListener("hashchange", () => {
|
||||
page = getPage();
|
||||
});
|
||||
// $: title = pages.find(e => e.id === page).title;
|
||||
|
||||
const mq = window.matchMedia("(min-width: 45rem)");
|
||||
let sidebar_button = !mq.matches;
|
||||
mq.addEventListener("change", (ev) => {
|
||||
sidebar_button = !ev.matches;
|
||||
});
|
||||
|
||||
let sidebar_active = false;
|
||||
|
||||
function setPage(pageid) {
|
||||
let pg = pages.find((e) => e.id === pageid);
|
||||
if (!pg) {
|
||||
throw new Error("Invalid Page " + pageid);
|
||||
} else {
|
||||
let url = new URL(window.location.href);
|
||||
url.hash = pg.id;
|
||||
window.history.pushState({}, pg.title, url);
|
||||
page = getPage();
|
||||
}
|
||||
|
||||
sidebar_active = false;
|
||||
}
|
||||
|
||||
let loading = true;
|
||||
|
||||
import NavigationBar from "./NavigationBar.svelte";
|
||||
</script>
|
||||
|
||||
<div class:loading class="root">
|
||||
<div class="app_container">
|
||||
<div class="header">
|
||||
{#if sidebar_button}
|
||||
<button on:click={() => (sidebar_active = !sidebar_active)}>
|
||||
<svg
|
||||
id="Layer_1"
|
||||
style="enable-background:new 0 0 32 32;"
|
||||
version="1.1"
|
||||
viewBox="0 0 32 32"
|
||||
width="32px"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<path
|
||||
d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z
|
||||
M28,14H4c-1.104,0-2,0.896-2,2
|
||||
s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z
|
||||
M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2
|
||||
S29.104,22,28,22z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
<h1>{page.title}</h1>
|
||||
</div>
|
||||
<div class="sidebar" class:sidebar-visible={sidebar_active}>
|
||||
<NavigationBar open={setPage} {pages} active={page} />
|
||||
</div>
|
||||
<div class="content">
|
||||
<svelte:component this={page.component} bind:loading />
|
||||
</div>
|
||||
<div class="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="loader_container">
|
||||
<div class="loader_box">
|
||||
<div class="loader" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
:root {
|
||||
--sidebar-width: 250px;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app_container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: auto 100%;
|
||||
grid-template-rows: 60px auto 60px;
|
||||
grid-template-areas:
|
||||
"sidebar header"
|
||||
"sidebar mc"
|
||||
"sidebar footer";
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
background-color: var(--primary);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header > h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
color: white;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.header > button {
|
||||
height: 36px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.header > button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.151);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
grid-area: sidebar;
|
||||
transition: width 0.2s;
|
||||
background-color: lightgrey;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar-visible {
|
||||
width: var(--sidebar-width);
|
||||
transition: width 0.2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: mc;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.app_container {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
transition: all 0.2s;
|
||||
box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loader_container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
<script>
|
||||
export let open;
|
||||
export let active;
|
||||
export let pages = [];
|
||||
</script>
|
||||
|
||||
{#each pages as page}
|
||||
<div
|
||||
class={"item_container" + (page === active ? " active" : "")}
|
||||
on:click={() => open(page.id)}
|
||||
>
|
||||
<div class="icon">
|
||||
<img alt={page.title} src={page.icon} />
|
||||
</div>
|
||||
<h3 class="title">{page.title}</h3>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--rel-size: 0.75rem;
|
||||
}
|
||||
|
||||
.item_container {
|
||||
height: calc(var(--rel-size) * 5);
|
||||
padding: var(--rel-size);
|
||||
display: flex;
|
||||
/* align-content: center; */
|
||||
align-items: center;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
/* float: left; */
|
||||
width: calc(var(--rel-size) * 3);
|
||||
height: calc(var(--rel-size) * 3);
|
||||
}
|
||||
|
||||
.icon > img {
|
||||
width: calc(var(--rel-size) * 3);
|
||||
height: calc(var(--rel-size) * 3);
|
||||
stroke-width: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
/* margin: auto; */
|
||||
margin-left: var(--rel-size);
|
||||
/* height: 100%; */
|
||||
}
|
||||
</style>
|
||||
@ -1,192 +0,0 @@
|
||||
<script>
|
||||
import Box from "./Box.svelte";
|
||||
import BoxItem from "./BoxItem.svelte";
|
||||
import NextIcon from "./NextIcon.svelte";
|
||||
|
||||
import request from "../../../helper/request.ts";
|
||||
|
||||
export let loading = false;
|
||||
let account_error = undefined;
|
||||
let contact_error = undefined;
|
||||
|
||||
const genderMap = new Map();
|
||||
genderMap.set(0, "None");
|
||||
genderMap.set(1, "Male");
|
||||
genderMap.set(2, "Female");
|
||||
genderMap.set(3, "Other");
|
||||
|
||||
let name = "";
|
||||
let gender = 0;
|
||||
$: genderHuman = genderMap.get(gender) || "ERROR";
|
||||
let birthday = undefined;
|
||||
|
||||
async function saveName() {
|
||||
//TODO: implement
|
||||
await load();
|
||||
}
|
||||
|
||||
async function saveGender() {
|
||||
//TODO: implement
|
||||
await load();
|
||||
}
|
||||
|
||||
async function loadProfile() {
|
||||
try {
|
||||
let { user } = await request(
|
||||
"/api/user/account",
|
||||
{},
|
||||
"GET",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
name = user.name;
|
||||
// username = user.username;
|
||||
gender = user.gender;
|
||||
birthday = user.birthday
|
||||
? new Date(user.birthday).toLocaleDateString()
|
||||
: undefined;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
account_error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
let email = [];
|
||||
let phone = [];
|
||||
|
||||
async function loadContact() {
|
||||
try {
|
||||
let { contact } = await request(
|
||||
"/api/user/contact",
|
||||
{},
|
||||
"GET",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
email = contact.mails.map((e) => e.mail);
|
||||
phone = contact.phones.map((e) => e.phone);
|
||||
contact_error = undefined;
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
contact_error = err.message;
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
await Promise.all([loadProfile(), loadContact()]);
|
||||
loading = false;
|
||||
}
|
||||
|
||||
load();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
background-color: var(--primary);
|
||||
margin: auto 0;
|
||||
margin-left: 1rem;
|
||||
font-size: 1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.floating {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-container > *:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: unset;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: unset;
|
||||
font-size: unset;
|
||||
border-bottom: 1px solid #757575;
|
||||
/* Firefox */
|
||||
-moz-appearance: none;
|
||||
/* Safari and Chrome */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select > option {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-wrapper::after {
|
||||
content: ">";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1rem;
|
||||
transform: rotate(90deg) scaleY(2);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Box>
|
||||
<h1>Profile</h1>
|
||||
{#if account_error}
|
||||
<p class="error">{account_error}</p>
|
||||
{/if}
|
||||
<BoxItem name="Name" value={name}>
|
||||
<div class="input-container">
|
||||
<div class="floating group">
|
||||
<input
|
||||
id="name-inp"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
bind:value={name} />
|
||||
<span class="highlight" />
|
||||
<span class="bar" />
|
||||
<label for="name-inp">Name</label>
|
||||
</div>
|
||||
<button class="btn" on:click={saveName}>Save</button>
|
||||
</div>
|
||||
</BoxItem>
|
||||
<BoxItem name="Gender" value={genderHuman}>
|
||||
<div class="input-container">
|
||||
<div class="select-wrapper">
|
||||
<select bind:value={gender}>
|
||||
<option value={1}>Male</option>
|
||||
<option value={2}>Female</option>
|
||||
<option value={3}>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn" on:click={saveGender}>Save</button>
|
||||
</div>
|
||||
</BoxItem>
|
||||
<BoxItem name="Birthday" value={birthday} />
|
||||
<BoxItem name="Password" value="******" />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<h1>Contact</h1>
|
||||
{#if contact_error}
|
||||
<p class="error">{contact_error}</p>
|
||||
{/if}
|
||||
<BoxItem name="E-Mail" value={email} noOpen={true} />
|
||||
<BoxItem name="Phone" value={phone} noOpen={true} />
|
||||
</Box>
|
||||
@ -1,36 +0,0 @@
|
||||
<style>
|
||||
.box {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.30), 0 5px 4px rgba(0, 0, 0, 0.22);
|
||||
padding: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.box> :global(h1) {
|
||||
margin: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: #444444;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.box> :global(div) {
|
||||
padding: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.box> :global(div):first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.box {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -1,94 +0,0 @@
|
||||
<script>
|
||||
import { slide } from "svelte/transition";
|
||||
import NextIcon from "./NextIcon.svelte";
|
||||
export let name = "";
|
||||
export let value = "";
|
||||
export let noOpen = false;
|
||||
export let open = false;
|
||||
export let highlight = false;
|
||||
|
||||
function toggleOpen(ev) {}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.root:hover {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.values {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: calc(100% - var(--default-font-size) - 16px);
|
||||
}
|
||||
|
||||
.values > div:first-child {
|
||||
transform-origin: left;
|
||||
transform: scale(0.95);
|
||||
margin-right: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.values > div:nth-child(2) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
margin: auto 8px auto 8px;
|
||||
height: var(--default-font-size);
|
||||
min-width: var(--default-font-size);
|
||||
}
|
||||
|
||||
.body {
|
||||
box-sizing: border-box;
|
||||
padding: 0.1px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem) {
|
||||
.values {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.values > div:first-child {
|
||||
transform: unset;
|
||||
flex-basis: 120px;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-element {
|
||||
background-color: #7bff003b;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="root" class:highlight-element={highlight}>
|
||||
<div class="container" on:click={() => (open = !open)}>
|
||||
<div class="values">
|
||||
<div>{name}</div>
|
||||
<div>
|
||||
{#if Array.isArray(value)}
|
||||
{#each value as v, i}
|
||||
{v}
|
||||
{#if i < value.length - 1}
|
||||
<br />
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}{value}{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if !noOpen}
|
||||
<NextIcon rotation={open ? -90 : 90} />
|
||||
{/if}
|
||||
</div>
|
||||
{#if open && !noOpen}
|
||||
<div class="body" transition:slide>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@ -1,13 +0,0 @@
|
||||
<script>
|
||||
export let rotation;
|
||||
</script>
|
||||
|
||||
<svg style={`enable-background:new 0 0 35.414 35.414; transform: rotate(${rotation}deg); transition: all .4s;`}
|
||||
version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" viewBox="0 0 35.414 35.414" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<polygon points="27.051,17 9.905,0 8.417,1.414 24.674,17.707 8.363,34 9.914,35.414 27.051,18.414 " />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
@ -1,188 +0,0 @@
|
||||
<script context="module">
|
||||
const TFATypes = new Map();
|
||||
TFATypes.set(0, "Authenticator");
|
||||
TFATypes.set(1, "Backup Codes");
|
||||
TFATypes.set(2, "YubiKey");
|
||||
TFATypes.set(3, "Push Notification");
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Box from "./Box.svelte";
|
||||
import BoxItem from "./BoxItem.svelte";
|
||||
import NextIcon from "./NextIcon.svelte";
|
||||
import request from "../../../helper/request.ts";
|
||||
|
||||
export let loading = false;
|
||||
|
||||
let twofactor = [];
|
||||
|
||||
async function deleteTFA(id) {
|
||||
let res = await request(
|
||||
"/api/user/twofactor/" + id,
|
||||
undefined,
|
||||
"DELETE",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
loadTwoFactor();
|
||||
}
|
||||
|
||||
async function loadTwoFactor() {
|
||||
let res = await request(
|
||||
"/api/user/twofactor",
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
twofactor = res.methods;
|
||||
}
|
||||
|
||||
let token = [];
|
||||
|
||||
async function revoke(id) {
|
||||
let res = await request(
|
||||
"/api/user/token/" + id,
|
||||
undefined,
|
||||
"DELETE",
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
loadToken();
|
||||
}
|
||||
|
||||
async function loadToken() {
|
||||
loading = true;
|
||||
let res = await request(
|
||||
"/api/user/token",
|
||||
undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
true,
|
||||
true
|
||||
);
|
||||
token = res.token;
|
||||
loading = false;
|
||||
}
|
||||
|
||||
loadToken();
|
||||
loadTwoFactor();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
background-color: var(--primary);
|
||||
margin: auto 0;
|
||||
margin-left: 1rem;
|
||||
font-size: 1rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.floating {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-container > *:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: unset;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: unset;
|
||||
font-size: unset;
|
||||
border-bottom: 1px solid #757575;
|
||||
/* Firefox */
|
||||
-moz-appearance: none;
|
||||
/* Safari and Chrome */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select > option {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-wrapper::after {
|
||||
content: ">";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1rem;
|
||||
transform: rotate(90deg) scaleY(2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Box>
|
||||
<h1>Two Factor</h1>
|
||||
<BoxItem name="Add new" open={false} />
|
||||
{#each twofactor as t}
|
||||
<BoxItem name={TFATypes.get(t.type)} value={t.name} highlight={t.isthis}>
|
||||
<button
|
||||
class="btn"
|
||||
style="background: var(--error)"
|
||||
on:click={() => deleteTFA(t.id)}>
|
||||
Delete
|
||||
</button>
|
||||
</BoxItem>
|
||||
{/each}
|
||||
<!-- <BoxItem name="Name" value={name} open={false}>
|
||||
<div class="input-container">
|
||||
<div class="floating group">
|
||||
<input type="text" autocomplete="username" bind:value={name}>
|
||||
<span class="highlight"></span>
|
||||
<span class="bar"></span>
|
||||
<label>Name</label>
|
||||
</div>
|
||||
<button class="btn" on:click={saveName}>Save</button>
|
||||
</div>
|
||||
</BoxItem>
|
||||
<BoxItem name="Gender" value={gender} open={true}>
|
||||
<div class="input-container">
|
||||
<div class="select-wrapper">
|
||||
<select>
|
||||
<option value="1">Male</option>
|
||||
<option value="2">Female</option>
|
||||
<option value="3">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn" on:click={saveName}>Save</button>
|
||||
</div>
|
||||
</BoxItem>
|
||||
<BoxItem name="Birthday" value={birthday} />
|
||||
<BoxItem name="Password" value="******" /> -->
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<h1>Anmeldungen</h1>
|
||||
|
||||
{#each token as t}
|
||||
<BoxItem name={t.browser} value={t.ip} highlight={t.isthis}>
|
||||
<button
|
||||
class="btn"
|
||||
style="background: var(--error)"
|
||||
on:click={() => revoke(t.id)}>
|
||||
Revoke
|
||||
</button>
|
||||
</BoxItem>
|
||||
{:else}<span>No Tokens</span>{/each}
|
||||
|
||||
<!-- <BoxItem name="E-Mail" value={email} />
|
||||
<BoxItem name="Phone" value={phone} /> -->
|
||||
</Box>
|
||||
@ -1,6 +0,0 @@
|
||||
import "../../components/theme";
|
||||
import App from "./App.svelte";
|
||||
|
||||
new App({
|
||||
target: document.body,
|
||||
});
|
||||
Reference in New Issue
Block a user