feat(account): upgrade external to internal
This commit is contained in:
Edouard Vanbelle
@@ -199,6 +199,44 @@ export async function register(email: string, password?: string, username?: stri
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert the authenticated external user into a full internal account.
|
||||
* Server flips `is_external` to false, provisions a personal drive via
|
||||
* the lifecycle hook, and returns the updated `User`.
|
||||
*
|
||||
* Password is optional — see backend `UpgradeToInternalDto`:
|
||||
* * If the deployment offers magic-link login, blank password is
|
||||
* accepted (user remains magic-link-only after upgrade).
|
||||
* * Otherwise a password is required — the backend refuses with 400
|
||||
* `error_type = "PasswordRequired"` and the SPA surfaces the
|
||||
* server message.
|
||||
*
|
||||
* Uses `apiFetch` (unlike register/login) because the caller IS
|
||||
* authenticated; a 401 here IS a genuine "session expired" and the
|
||||
* refresh interceptor is the right response.
|
||||
*/
|
||||
export async function upgradeToInternal(password?: string): Promise<User> {
|
||||
const body: Record<string, unknown> = {};
|
||||
if (password) body.password = password;
|
||||
const res = await apiFetch('/api/auth/upgrade-to-internal', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { ...JSON_HEADERS, ...getCsrfHeaders() },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
if (!res.ok) {
|
||||
const { errorType, message } = await parseErrorBody(res);
|
||||
throw new ApiError(
|
||||
res.status,
|
||||
res.statusText,
|
||||
'/api/auth/upgrade-to-internal',
|
||||
errorType,
|
||||
message
|
||||
);
|
||||
}
|
||||
return (await res.json()) as User;
|
||||
}
|
||||
|
||||
export type MagicLinkResult = 'sent' | 'unavailable';
|
||||
|
||||
/**
|
||||
|
||||
@@ -13,6 +13,14 @@
|
||||
type ResourceEntry
|
||||
} from '$lib/components/ResourceList.svelte';
|
||||
import { t } from '$lib/i18n/index.svelte';
|
||||
import { session } from '$lib/stores/session.svelte';
|
||||
|
||||
// External users landing here are the natural audience for the
|
||||
// "upgrade to a full account" prompt — they don't own a drive of
|
||||
// their own, this view IS their entry point. Internal users don't
|
||||
// see the banner even when their /shared-with-me happens to be
|
||||
// non-empty (they already have a drive; nothing to upgrade).
|
||||
const showUpgradeBanner = $derived(session.isExternalUser);
|
||||
|
||||
let raw = $state<IncomingGrantItem[]>([]);
|
||||
let cursor = $state<string | undefined>(undefined);
|
||||
@@ -137,6 +145,27 @@
|
||||
|
||||
<svelte:head><title>{t('nav.shared_with_me', 'Shared with me')} · OxiCloud</title></svelte:head>
|
||||
|
||||
{#if showUpgradeBanner}
|
||||
<div class="upgrade-banner" role="region" aria-label={t('upgrade.banner_aria', 'Upgrade prompt')}>
|
||||
<div class="upgrade-banner__body">
|
||||
<strong>{t('upgrade.banner_title', 'Get your own storage')}</strong>
|
||||
<span
|
||||
>{t(
|
||||
'upgrade.banner_body',
|
||||
"You're using a guest account. Upgrade to get a personal drive and start uploading files."
|
||||
)}</span
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
class="upgrade-banner__cta"
|
||||
data-testid="shared-with-me-upgrade-btn"
|
||||
href={resolve('/upgrade')}
|
||||
>
|
||||
{t('upgrade.banner_cta', 'Upgrade')}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ResourceList
|
||||
title={t('nav.shared_with_me', 'Shared with me')}
|
||||
items={entries}
|
||||
@@ -160,3 +189,58 @@
|
||||
{@const FileViewer = fileViewer.component}
|
||||
<FileViewer bind:open={viewerOpen} file={viewerFile} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.upgrade-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
background: var(--color-surface-raised);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.upgrade-banner__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.upgrade-banner__body strong {
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
|
||||
.upgrade-banner__body span {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.upgrade-banner__cta {
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
background: var(--color-accent);
|
||||
color: var(--color-accent-contrast);
|
||||
text-decoration: none;
|
||||
font-weight: var(--weight-medium);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.upgrade-banner__cta:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
.upgrade-banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.upgrade-banner__cta {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
<script lang="ts">
|
||||
// Route-scoped auth styles: same visual language as /login so the
|
||||
// upgrade page reads as an account action, not a settings mini-form.
|
||||
import '$lib/styles/ported/auth.css';
|
||||
import { goto } from '$app/navigation';
|
||||
import { resolve } from '$app/paths';
|
||||
import { onMount } from 'svelte';
|
||||
import { ApiError } from '$lib/api/client';
|
||||
import { getOidcProviders, upgradeToInternal, type OidcProviders } from '$lib/api/endpoints/auth';
|
||||
import { t } from '$lib/i18n/index.svelte';
|
||||
import { session } from '$lib/stores/session.svelte';
|
||||
|
||||
let password = $state('');
|
||||
let confirm = $state('');
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let successHint = $state('');
|
||||
// Provider info tells us whether magic-link login is available.
|
||||
// `passwordRequired = !magic_link_login_enabled` — if the deployment
|
||||
// doesn't offer magic-link login, an upgraded user with no password
|
||||
// would be stuck (no login path), so the form requires one.
|
||||
let providers = $state<OidcProviders>({ enabled: false });
|
||||
const passwordRequired = $derived(providers.magic_link_login_enabled !== true);
|
||||
const matchState = $derived(confirm.length === 0 ? '' : password === confirm ? 'ok' : 'bad');
|
||||
|
||||
onMount(async () => {
|
||||
// Guard: only external users have a meaningful upgrade path. Non-
|
||||
// externals bounce straight to /files — no error message needed,
|
||||
// this URL isn't a discoverable page for internal users.
|
||||
if (session.user && session.user.is_external !== true) {
|
||||
await goto(resolve('/files'), { replaceState: true });
|
||||
return;
|
||||
}
|
||||
providers = await getOidcProviders();
|
||||
});
|
||||
|
||||
async function onSubmit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
successHint = '';
|
||||
if (passwordRequired && password.length === 0) {
|
||||
error = t(
|
||||
'upgrade.password_required',
|
||||
'Password is required — this deployment does not offer email-link login.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (password.length > 0 && password !== confirm) {
|
||||
error = t('auth.passwords_mismatch', 'Passwords do not match');
|
||||
return;
|
||||
}
|
||||
if (password.length > 0 && password.length < 8) {
|
||||
error = t('upgrade.password_too_short', 'Password must be at least 8 characters long.');
|
||||
return;
|
||||
}
|
||||
busy = true;
|
||||
try {
|
||||
// Server accepts `password` as optional when magic-link login
|
||||
// is on. `undefined` means "no password" — user stays magic-
|
||||
// link-only after the upgrade.
|
||||
const updated = await upgradeToInternal(password.length > 0 ? password : undefined);
|
||||
session.setUser(updated);
|
||||
successHint = t(
|
||||
'upgrade.success',
|
||||
'Your account has been upgraded. Redirecting to your files…'
|
||||
);
|
||||
// Small pause so the success line is visible, then jump into
|
||||
// the app on the freshly-provisioned home drive.
|
||||
setTimeout(() => goto(resolve('/files'), { replaceState: true }), 800);
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError && err.errorType === 'AlreadyInternal') {
|
||||
// Race: another tab or session already upgraded. Treat as
|
||||
// success and just navigate into the app.
|
||||
await goto(resolve('/files'), { replaceState: true });
|
||||
return;
|
||||
}
|
||||
if (err instanceof ApiError && err.errorType === 'ManagedByIdP') {
|
||||
error = t(
|
||||
'upgrade.oidc_user',
|
||||
'SSO/OIDC accounts are managed by your identity provider. Upgrade is not available.'
|
||||
);
|
||||
} else if (err instanceof ApiError && err.errorType === 'RegistrationDomainNotAllowed') {
|
||||
error = t(
|
||||
'upgrade.domain_not_allowed',
|
||||
'This deployment does not accept new accounts from your email domain. Contact the administrator to enable it.'
|
||||
);
|
||||
} else if (err instanceof ApiError && err.errorType === 'PasswordRequired') {
|
||||
error = t(
|
||||
'upgrade.password_required',
|
||||
'Password is required — this deployment does not offer email-link login.'
|
||||
);
|
||||
} else {
|
||||
error = err instanceof Error ? err.message : t('upgrade.error', 'Upgrade failed.');
|
||||
}
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{t('upgrade.title', 'Upgrade to a full account')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="auth-container">
|
||||
<div class="auth-panel">
|
||||
<div class="auth-logo">
|
||||
<div class="auth-logo-icon">
|
||||
<svg viewBox="95 67 320 320" aria-hidden="true">
|
||||
<path
|
||||
d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="auth-logo-text"><span class="brand-oxi">Oxi</span>Cloud</div>
|
||||
</div>
|
||||
|
||||
<h1 class="auth-title">{t('upgrade.title', 'Upgrade to a full account')}</h1>
|
||||
<p class="auth-subtitle">
|
||||
{t(
|
||||
'upgrade.lede',
|
||||
'Get your own storage and start uploading files. Your existing shares stay untouched.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
{#if successHint}
|
||||
<div class="auth-success" style="display: block" role="status">{successHint}</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div class="auth-error" style="display: block" role="alert">{error}</div>
|
||||
{/if}
|
||||
|
||||
<form class="auth-form" data-testid="upgrade-form" onsubmit={onSubmit} novalidate>
|
||||
<div class="auth-input-group">
|
||||
<label class="auth-label" for="upgrade-password">
|
||||
{passwordRequired
|
||||
? t('auth.password', 'Password')
|
||||
: t('auth.password_optional', 'Password (optional)')}
|
||||
</label>
|
||||
<div class="auth-input-wrap auth-input-wrap--lock">
|
||||
<input
|
||||
id="upgrade-password"
|
||||
class="auth-input"
|
||||
data-testid="upgrade-password-input"
|
||||
type="password"
|
||||
bind:value={password}
|
||||
autocomplete="new-password"
|
||||
required={passwordRequired}
|
||||
disabled={busy}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if password.length > 0}
|
||||
<div class="auth-input-group">
|
||||
<label class="auth-label" for="upgrade-confirm">
|
||||
{t('auth.confirm_password', 'Confirm password')}
|
||||
</label>
|
||||
<div class="auth-input-wrap auth-input-wrap--lock">
|
||||
<input
|
||||
id="upgrade-confirm"
|
||||
class="auth-input"
|
||||
data-testid="upgrade-confirm-input"
|
||||
type="password"
|
||||
bind:value={confirm}
|
||||
autocomplete="new-password"
|
||||
required
|
||||
disabled={busy}
|
||||
/>
|
||||
</div>
|
||||
{#if matchState}
|
||||
<div
|
||||
class="auth-match show {matchState === 'ok' ? 'auth-match--ok' : 'auth-match--bad'}"
|
||||
>
|
||||
{matchState === 'ok'
|
||||
? t('auth.passwords_match', 'Passwords match')
|
||||
: t('auth.passwords_mismatch', "Passwords don't match")}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="auth-button"
|
||||
type="submit"
|
||||
data-testid="upgrade-submit-btn"
|
||||
disabled={busy}
|
||||
aria-busy={busy}
|
||||
>
|
||||
{busy ? t('upgrade.busy', 'Upgrading…') : t('upgrade.submit', 'Upgrade my account')}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="auth-toggle">
|
||||
<button
|
||||
class="auth-toggle-link"
|
||||
data-testid="upgrade-cancel-btn"
|
||||
type="button"
|
||||
onclick={() => goto(resolve('/shared-with-me'), { replaceState: true })}
|
||||
>
|
||||
{t('upgrade.cancel', 'Not now — back to shared with me')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user