LeoVasanko/paskia
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Make the login/reset/forbidden dialogs look better.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-30 17:03:51 -06:00
parent ed7d3ee0fc
commit 382341e5ee
5 changed files with 171 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/LoginView.vue
+21 -23
View File
@@ -1,23 +1,25 @@
<template>
<section class="view-root view-login">
<div class="view-content view-content--narrow">
<header class="view-header">
<h1>🔐 {{ (authStore.settings?.rp_name || 'Passkey') + ' Login' }}</h1>
<p class="view-lede">Sign in securely with a device you trust.</p>
</header>
<section class="section-block">
<form class="section-body" @submit.prevent="handleLogin">
<button
type="submit"
class="btn-primary"
:disabled="authStore.isLoading"
>
{{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
</button>
</form>
</section>
<div class="dialog-backdrop">
<div class="dialog-container">
<div class="dialog-content dialog-content--narrow">
<header class="view-header">
<h1>🔐 {{ (authStore.settings?.rp_name || location.origin)}}</h1>
<p class="view-lede">User authentication is required for access.</p>
</header>
<section class="section-block">
<form class="section-body" @submit.prevent="handleLogin">
<button
type="submit"
class="btn-primary"
:disabled="authStore.isLoading"
>
{{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
</button>
</form>
</section>
</div>
</div>
</section>
</div>
</template>
<script setup>
@@ -44,16 +46,12 @@ const handleLogin = async () => {
</script>
<style scoped>
.view-content--narrow {
max-width: 420px;
}
.view-lede {
margin: 0;
color: var(--color-text-muted);
}
.view-login .section-body {
.section-body {
gap: 1.5rem;
}
frontend/src/components/PermissionDeniedView.vue
+22 -24
View File
@@ -1,26 +1,28 @@
<template>
<section class="view-root view-denied">
<div class="view-content view-content--narrow">
<header class="view-header">
<h1>🚫 Forbidden</h1>
</header>
<section class="section-block">
<div class="section-body">
<div v-if="authStore.userInfo?.authenticated" class="user-header">
<span class="user-emoji" aria-hidden="true">{{ userEmoji }}</span>
<span class="user-name">{{ displayName }}</span>
<div class="dialog-backdrop">
<div class="dialog-container">
<div class="dialog-content dialog-content--wide">
<header class="view-header">
<h1>🚫 Forbidden</h1>
</header>
<section class="section-block">
<div class="section-body">
<div v-if="authStore.userInfo?.authenticated" class="user-header">
<span class="user-emoji" aria-hidden="true">{{ userEmoji }}</span>
<span class="user-name">{{ displayName }}</span>
</div>
<p>You lack the permissions required for this page.</p>
<div class="button-row">
<button class="btn-secondary" @click="back">Back</button>
<button class="btn-primary" @click="goAuth">Account</button>
<button class="btn-danger" @click="logout">Logout</button>
</div>
<p class="hint">If you believe this is an error, contact your administrator.</p>
</div>
<p>You lack the permissions required for this page.</p>
<div class="button-row">
<button class="btn-secondary" @click="back">Back</button>
<button class="btn-primary" @click="goAuth">Account</button>
<button class="btn-danger" @click="logout">Logout</button>
</div>
<p class="hint">If you believe this is an error, contact your administrator.</p>
</div>
</section>
</section>
</div>
</div>
</section>
</div>
</template>
<script setup>
import { useAuthStore } from '@/stores/auth'
@@ -42,10 +44,6 @@ async function logout() {
}
</script>
<style scoped>
.view-content--narrow {
max-width: 540px;
}
.view-lede {
margin: 0;
color: var(--color-text-muted);
frontend/src/components/ResetView.vue
+33 -35
View File
@@ -1,37 +1,39 @@
<template>
<section class="view-root view-reset">
<div class="view-content view-content--narrow">
<header class="view-header">
<h1>🔑 Add New Credential</h1>
<p class="view-lede">
Finish setting up your passkey to complete {{ authStore.userInfo?.session_type }}.
</p>
</header>
<section class="section-block">
<div class="section-body">
<label class="name-edit">
<span>👤 Name</span>
<input
type="text"
v-model="user_name"
:placeholder="authStore.userInfo?.user?.user_name || 'Your name'"
<div class="dialog-backdrop">
<div class="dialog-container">
<div class="dialog-content">
<header class="view-header">
<h1>🔑 Add New Credential</h1>
<p class="view-lede">
Finish setting up your passkey to complete {{ authStore.userInfo?.session_type }}.
</p>
</header>
<section class="section-block">
<div class="section-body">
<label class="name-edit">
<span>👤 Name</span>
<input
type="text"
v-model="user_name"
:placeholder="authStore.userInfo?.user?.user_name || 'Your name'"
:disabled="authStore.isLoading"
maxlength="64"
@keyup.enter="register"
/>
</label>
<p>Proceed to complete {{ authStore.userInfo?.session_type }}:</p>
<button
class="btn-primary"
:disabled="authStore.isLoading"
maxlength="64"
@keyup.enter="register"
/>
</label>
<p>Proceed to complete {{ authStore.userInfo?.session_type }}:</p>
<button
class="btn-primary"
:disabled="authStore.isLoading"
@click="register"
>
{{ authStore.isLoading ? 'Registering…' : 'Register Passkey' }}
</button>
</div>
</section>
@click="register"
>
{{ authStore.isLoading ? 'Registering…' : 'Register Passkey' }}
</button>
</div>
</section>
</div>
</div>
</section>
</div>
</template>
<script setup>
@@ -63,10 +65,6 @@ async function register() {
</script>
<style scoped>
.view-content--narrow {
max-width: 480px;
}
.view-lede {
margin: 0;
color: var(--color-text-muted);