sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-28 10:16:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(account): add ability to sign in with login code (#271)

Browse Source 
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Jonas
2025-03-10 12:45:45 +01:00
committed by GitHub
parent a9713cf6a1
commit eb1426ed26
34 changed files with 446 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte
View File

@@ -135,9 +135,9 @@
bind:checked={$inputs.emailLoginNotificationEnabled.value}
/>
<CheckboxWithLabel
id="email-one-time-access"
label="Email One Time Access"
description="Allows users to sign in with a link sent to their email. This reduces the security significantly as anyone with access to the user's email can gain entry."
id="email-login"
label="Email Login"
description="Allows users to sign in with a login code sent to their email. This reduces the security significantly as anyone with access to the user's email can gain entry."
bind:checked={$inputs.emailOneTimeAccessEnabled.value}
/>
</div>

86
frontend/src/routes/settings/admin/users/one-time-link-modal.svelte
View File

@@ -1,86 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { Button } from '$lib/components/ui/button';
import * as Dialog from '$lib/components/ui/dialog';
import Input from '$lib/components/ui/input/input.svelte';
import Label from '$lib/components/ui/label/label.svelte';
import * as Select from '$lib/components/ui/select/index.js';
import UserService from '$lib/services/user-service';
import { axiosErrorToast } from '$lib/utils/error-util';
let {
userId = $bindable()
}: {
userId: string | null;
} = $props();
const userService = new UserService();
let oneTimeLink: string | null = $state(null);
let selectedExpiration: keyof typeof availableExpirations = $state('1 hour');
let availableExpirations = {
'1 hour': 60 * 60,
'12 hours': 60 * 60 * 12,
'1 day': 60 * 60 * 24,
'1 week': 60 * 60 * 24 * 7,
'1 month': 60 * 60 * 24 * 30
};
async function createOneTimeAccessToken() {
try {
const expiration = new Date(Date.now() + availableExpirations[selectedExpiration] * 1000);
const token = await userService.createOneTimeAccessToken(userId!, expiration);
oneTimeLink = `${$page.url.origin}/login/${token}`;
} catch (e) {
axiosErrorToast(e);
}
}
function onOpenChange(open: boolean) {
if (!open) {
oneTimeLink = null;
userId = null;
}
}
</script>
<Dialog.Root open={!!userId} {onOpenChange}>
<Dialog.Content class="max-w-md">
<Dialog.Header>
<Dialog.Title>One Time Link</Dialog.Title>
<Dialog.Description
>Use this link to sign in once. This is needed for users who haven't added a passkey yet or
have lost it.</Dialog.Description
>
</Dialog.Header>
{#if oneTimeLink === null}
<div>
<Label for="expiration">Expiration</Label>
<Select.Root
selected={{
label: Object.keys(availableExpirations)[0],
value: Object.keys(availableExpirations)[0]
}}
onSelectedChange={(v) =>
(selectedExpiration = v!.value as keyof typeof availableExpirations)}
>
<Select.Trigger class="h-9 ">
<Select.Value>{selectedExpiration}</Select.Value>
</Select.Trigger>
<Select.Content>
{#each Object.keys(availableExpirations) as key}
<Select.Item value={key}>{key}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
<Button onclick={() => createOneTimeAccessToken()} disabled={!selectedExpiration}>
Generate Link
</Button>
{:else}
<Label for="one-time-link" class="sr-only">One Time Link</Label>
<Input id="one-time-link" value={oneTimeLink} readonly />
{/if}
</Dialog.Content>
</Dialog.Root>

4
frontend/src/routes/settings/admin/users/user-list.svelte
View File

@@ -14,7 +14,7 @@
import { LucideLink, LucidePencil, LucideTrash } from 'lucide-svelte';
import Ellipsis from 'lucide-svelte/icons/ellipsis';
import { toast } from 'svelte-sonner';
import OneTimeLinkModal from './one-time-link-modal.svelte';
import OneTimeLinkModal from '$lib/components/one-time-link-modal.svelte';
let {
users = $bindable(),
@@ -82,7 +82,7 @@
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<DropdownMenu.Item onclick={() => (userIdToCreateOneTimeLink = item.id)}
><LucideLink class="mr-2 h-4 w-4" />One-time link</DropdownMenu.Item
><LucideLink class="mr-2 h-4 w-4" />Login Code</DropdownMenu.Item
>
<DropdownMenu.Item onclick={() => goto(`/settings/admin/users/${item.id}`)}
><LucidePencil class="mr-2 h-4 w-4" /> Edit</DropdownMenu.Item