546 lines
37 KiB
PHP
546 lines
37 KiB
PHP
{{--
|
|
The customer's own settings.
|
|
|
|
## Four attempts, and what was wrong with each
|
|
|
|
1. One column 768px wide in a 1240px shell, everything in it, two thousand
|
|
pixels deep.
|
|
2. Four tabs — better — but cards of different heights in a grid, which on
|
|
the contract tab read as a staircase.
|
|
3. Panels and rows: right idea, wrong proportions. Full-width slabs stacked
|
|
down the page, each with its title INSIDE it, so the page was a column of
|
|
long boxes and nothing said where one topic ended.
|
|
|
|
## What it is now
|
|
|
|
The shape serious settings pages actually use: a section list on the left,
|
|
a measured content column on the right, and the heading OUTSIDE the card it
|
|
belongs to.
|
|
|
|
- The nav is the structure. It is sticky, so the sections stay reachable
|
|
however far down a form goes, and it says which one you are in without
|
|
making you read a row of tabs.
|
|
- 820px is the content column. Nobody types a phone number into a field
|
|
1100px wide; a settings page that lets them looks like a spreadsheet.
|
|
- A section is a heading, a sentence, and then a card of rows. Putting the
|
|
heading inside the card gave every group two frames — the title bar and
|
|
the border — and that is what made them read as boxes rather than as
|
|
topics.
|
|
- What cannot be undone lives at the end, in a card that says so with its
|
|
border.
|
|
|
|
Below `lg` the nav becomes a scrolling strip of chips above the content, and
|
|
the rows stack, because on a telephone a label belongs above its field.
|
|
--}}
|
|
@php
|
|
$sections = [
|
|
'profile' => 'users',
|
|
'security' => 'shield-check',
|
|
'branding' => 'pen',
|
|
'contract' => 'receipt',
|
|
];
|
|
@endphp
|
|
|
|
<div class="space-y-6">
|
|
|
|
<header class="animate-rise">
|
|
<p class="lbl">{{ __('settings.eyebrow') }}</p>
|
|
<h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
|
|
{{ __('settings.title') }}
|
|
</h1>
|
|
<p class="mt-2 max-w-[76ch] text-sm leading-relaxed text-muted">{{ __('settings.subtitle') }}</p>
|
|
</header>
|
|
|
|
<div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
|
|
|
|
{{-- ── The section list ────────────────────────────────────────────
|
|
Sticky on a wide screen: a long form must not scroll its own
|
|
navigation away. A strip of chips below `lg`, because a vertical
|
|
list on a telephone is four rows of nothing. --}}
|
|
<nav class="-mx-4 shrink-0 overflow-x-auto px-4 lg:mx-0 lg:w-[232px] lg:overflow-visible lg:px-0 lg:sticky lg:top-8 animate-rise [animation-delay:40ms]"
|
|
role="tablist" aria-label="{{ __('settings.title') }}">
|
|
<div class="flex gap-1.5 lg:flex-col">
|
|
@foreach ($sections as $name => $icon)
|
|
<button type="button" role="tab" wire:click="$set('tab', '{{ $name }}')"
|
|
aria-selected="{{ $tab === $name ? 'true' : 'false' }}"
|
|
@class([
|
|
'flex shrink-0 items-center gap-2.5 whitespace-nowrap rounded px-3 py-2 text-sm font-medium transition-colors lg:w-full',
|
|
'bg-surface text-ink shadow-xs ring-1 ring-line' => $tab === $name,
|
|
'text-muted hover:bg-surface-hover hover:text-ink' => $tab !== $name,
|
|
])>
|
|
<x-ui.icon :name="$icon" @class(['size-4', 'text-accent-text' => $tab === $name]) />
|
|
{{ __('settings.tab.'.$name) }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
{{-- Who is signed in, at the foot of the list. A settings page is one
|
|
of the few where "whose settings are these" is a real question —
|
|
an office with a shared machine has it every day. --}}
|
|
<div class="mt-6 hidden rounded border border-line bg-surface-2 px-3 py-3 lg:block">
|
|
<p class="lbl">{{ __('settings.signed_in_as') }}</p>
|
|
<p class="mt-1.5 truncate text-sm font-medium text-ink">{{ auth()->user()->name }}</p>
|
|
<p class="truncate font-mono text-xs text-muted">{{ auth()->user()->email }}</p>
|
|
</div>
|
|
</nav>
|
|
|
|
{{-- ── The content column ───────────────────────────────────────────
|
|
820px, not the whole shell. Nobody types a postcode into a field a
|
|
thousand pixels wide. --}}
|
|
<div class="min-w-0 flex-1 lg:max-w-[820px]">
|
|
|
|
{{-- ══ Ihre Daten ═══════════════════════════════════════════════ --}}
|
|
@if ($tab === 'profile')
|
|
<form wire:submit="saveProfile" class="space-y-8 animate-rise [animation-delay:60ms]">
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.company_title') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('settings.company_sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
<x-ui.row :label="__('settings.company_name')" for="companyName">
|
|
<x-ui.input name="companyName" wire:model="companyName" />
|
|
</x-ui.row>
|
|
<x-ui.row :label="__('settings.contact_name')" for="contactName">
|
|
<x-ui.input name="contactName" wire:model="contactName" />
|
|
</x-ui.row>
|
|
<x-ui.row :label="__('settings.phone')" for="phone">
|
|
<x-ui.input name="phone" wire:model="phone" />
|
|
</x-ui.row>
|
|
<x-ui.row :label="__('settings.vat_id')" for="vatId">
|
|
<x-ui.input name="vatId" wire:model="vatId" />
|
|
</x-ui.row>
|
|
|
|
{{-- Field by field, not a paragraph: what landed in
|
|
the textarea was whatever somebody typed — a
|
|
postcode on the street line, a town with no
|
|
postcode, no country at all — and an invoice has
|
|
to name its recipient precisely enough to be a
|
|
document. --}}
|
|
<x-ui.row :label="__('settings.billing_address')" for="billingStreet">
|
|
<div class="space-y-3">
|
|
<x-ui.input name="billingStreet" wire:model="billingStreet" :placeholder="__('settings.billing_street')" />
|
|
<div class="grid gap-3 sm:grid-cols-[130px_minmax(0,1fr)]">
|
|
<x-ui.input name="billingPostcode" wire:model="billingPostcode" :placeholder="__('settings.billing_postcode')" />
|
|
<x-ui.input name="billingCity" wire:model="billingCity" :placeholder="__('settings.billing_city')" />
|
|
</div>
|
|
<x-ui.input name="billingCountry" wire:model="billingCountry" :placeholder="__('settings.billing_country')" />
|
|
</div>
|
|
</x-ui.row>
|
|
|
|
<x-slot:footer>
|
|
<x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="saveProfile">
|
|
{{ __('settings.save') }}
|
|
</x-ui.button>
|
|
</x-slot:footer>
|
|
</x-ui.panel>
|
|
</section>
|
|
|
|
{{-- A FACT for a record that has one. It decides the
|
|
fourteen-day right of withdrawal: a business able to set
|
|
itself to "Privatperson" here is a business able to
|
|
withdraw from a contract it may not withdraw from.
|
|
Registration asks; this page reports. The lock is in
|
|
Settings::saveProfile, not here — a form that only hides
|
|
a control has never stopped anybody who can post to
|
|
/livewire/update. --}}
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.customer_type') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">
|
|
{{ $customer?->customer_type ? __('settings.customer_type_locked') : __('settings.customer_type_once') }}
|
|
</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
<div class="px-6 py-4">
|
|
@if ($customer?->customer_type)
|
|
<p class="flex items-center gap-2 text-sm font-semibold text-ink">
|
|
<x-ui.icon name="lock" class="size-4 text-muted" />
|
|
{{ __('settings.customer_type_'.$customer->customer_type) }}
|
|
</p>
|
|
@else
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach ($customerTypes as $type)
|
|
<label class="flex cursor-pointer items-center gap-2 rounded border border-line-strong bg-surface px-3 py-2 text-sm text-ink transition has-[:checked]:border-ink">
|
|
<input type="radio" wire:model="customerType" value="{{ $type }}"
|
|
class="size-4 shrink-0 border-line text-ink" />
|
|
{{ __('settings.customer_type_'.$type) }}
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
@error('customerType')<p class="mt-2 text-xs text-danger">{{ $message }}</p>@enderror
|
|
@endif
|
|
</div>
|
|
</x-ui.panel>
|
|
</section>
|
|
</form>
|
|
@endif
|
|
|
|
{{-- ══ Sicherheit ═══════════════════════════════════════════════ --}}
|
|
@if ($tab === 'security')
|
|
<div class="space-y-8 animate-rise [animation-delay:60ms]">
|
|
|
|
{{-- Own password. There was no way to change one at all —
|
|
Fortify's updatePasswords feature was switched off. --}}
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('admin_settings.password_title') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('admin_settings.password_sub') }}</p>
|
|
|
|
<form wire:submit="updateOwnPassword">
|
|
<x-ui.panel class="mt-4">
|
|
<x-ui.row :label="__('admin_settings.password_current')" for="currentPassword">
|
|
<x-ui.input name="currentPassword" type="password" autocomplete="current-password" wire:model="currentPassword" />
|
|
</x-ui.row>
|
|
<x-ui.row :label="__('admin_settings.password_new')" for="newPassword">
|
|
<div class="space-y-3">
|
|
<x-ui.input name="newPassword" type="password" autocomplete="new-password" wire:model="newPassword" />
|
|
<x-ui.input name="newPasswordConfirmation" type="password" autocomplete="new-password"
|
|
:placeholder="__('admin_settings.password_repeat')" wire:model="newPasswordConfirmation" />
|
|
</div>
|
|
</x-ui.row>
|
|
|
|
<x-slot:footer>
|
|
<x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="updateOwnPassword">
|
|
{{ __('admin_settings.password_save') }}
|
|
</x-ui.button>
|
|
</x-slot:footer>
|
|
</x-ui.panel>
|
|
</form>
|
|
</section>
|
|
|
|
{{-- Two-factor. Every action is re-checked server-side
|
|
against a recent password confirmation — hiding the
|
|
buttons stops nobody who can post to /livewire/update. --}}
|
|
<section>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.twofa_title') }}</h2>
|
|
<span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
|
|
{{ $twoFactorOn ? 'border-success-border bg-success-bg text-success' : 'border-line-strong bg-surface-2 text-muted' }}">
|
|
<span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
|
|
{{ $twoFactorOn ? __('settings.twofa_state_on') : __('settings.twofa_state_off') }}
|
|
</span>
|
|
</div>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('settings.twofa_sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
@if (! $passwordConfirmed)
|
|
{{-- The gate. A signed-in session is not enough
|
|
to change how the account is protected — the
|
|
risk is an unlocked machine. --}}
|
|
<form wire:submit="confirmPassword">
|
|
<x-ui.row :label="__('admin_settings.password_current')" :hint="__('settings.twofa_confirm_first')" for="confirmablePassword">
|
|
<div class="flex flex-wrap items-start gap-2">
|
|
<div class="min-w-48 flex-1">
|
|
<x-ui.input name="confirmablePassword" type="password" autocomplete="current-password" wire:model="confirmablePassword" />
|
|
</div>
|
|
<x-ui.button type="submit" variant="secondary" wire:loading.attr="disabled" wire:target="confirmPassword">
|
|
{{ __('settings.twofa_confirm_button') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</x-ui.row>
|
|
</form>
|
|
@elseif ($twoFactorOn)
|
|
<x-ui.row :label="__('settings.twofa_new_codes')" :hint="__('settings.twofa_codes_hint')">
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-ui.button variant="secondary" wire:click="regenerateRecoveryCodes" wire:loading.attr="disabled" wire:target="regenerateRecoveryCodes">
|
|
{{ __('settings.twofa_new_codes') }}
|
|
</x-ui.button>
|
|
<x-ui.button variant="danger"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-disable-two-factor' })">
|
|
{{ __('settings.twofa_disable') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</x-ui.row>
|
|
@elseif ($twoFactorPending)
|
|
<x-ui.row :label="__('settings.twofa_scan')">
|
|
<div class="flex flex-wrap items-start gap-5">
|
|
<div class="rounded border border-line bg-white p-3">{!! $twoFactorQr !!}</div>
|
|
<form wire:submit="confirmTwoFactor" class="space-y-3">
|
|
<div class="max-w-44">
|
|
<x-ui.input name="twoFactorCode" inputmode="numeric" autocomplete="one-time-code"
|
|
:label="__('settings.twofa_code')" wire:model="twoFactorCode" />
|
|
</div>
|
|
<x-ui.button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="confirmTwoFactor">
|
|
{{ __('settings.twofa_activate') }}
|
|
</x-ui.button>
|
|
</form>
|
|
</div>
|
|
</x-ui.row>
|
|
@else
|
|
<x-ui.row :label="__('settings.twofa_enable')" :hint="__('settings.twofa_sub')">
|
|
<x-ui.button variant="primary" wire:click="enableTwoFactor" wire:loading.attr="disabled" wire:target="enableTwoFactor">
|
|
{{ __('settings.twofa_enable') }}
|
|
</x-ui.button>
|
|
</x-ui.row>
|
|
@endif
|
|
|
|
@if ($recoveryCodes)
|
|
{{-- Shown once, on purpose: nobody writes down
|
|
what they were never shown, and these are the
|
|
way back in when the phone is gone. --}}
|
|
<x-ui.row :label="__('settings.twofa_codes_title')" :hint="__('settings.twofa_codes_hint')">
|
|
<ul class="grid grid-cols-2 gap-x-6 gap-y-1 rounded border border-warning-border bg-warning-bg p-4 font-mono text-sm text-ink">
|
|
@foreach ($recoveryCodes as $code)<li class="select-all">{{ $code }}</li>@endforeach
|
|
</ul>
|
|
</x-ui.row>
|
|
@endif
|
|
</x-ui.panel>
|
|
</section>
|
|
|
|
{{-- The devices. It answers the same question two-factor does
|
|
— who can get into this account. --}}
|
|
<section>
|
|
@livewire('sessions')
|
|
</section>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ══ Erscheinungsbild ═════════════════════════════════════════ --}}
|
|
@if ($tab === 'branding')
|
|
<form wire:submit="saveBranding" class="animate-rise [animation-delay:60ms]">
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.branding_title') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('settings.branding_sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
<x-ui.row :label="__('settings.brand_display_name')" for="brandDisplayName">
|
|
<x-ui.input name="brandDisplayName" wire:model="brandDisplayName" :placeholder="$branding['display_name'] ?? ''" />
|
|
</x-ui.row>
|
|
|
|
<x-ui.row :label="__('settings.brand_primary')">
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" wire:model="brandPrimary" value="{{ $brandPrimary ?: ($branding['primary_color'] ?? '#f97316') }}"
|
|
class="h-10 w-14 rounded border border-line-strong bg-surface" aria-label="{{ __('settings.brand_primary') }}" />
|
|
<input type="text" wire:model="brandPrimary" placeholder="{{ $branding['primary_color'] ?? '#f97316' }}"
|
|
class="w-32 rounded border border-line-strong bg-surface px-3 py-2.5 font-mono text-sm text-ink" />
|
|
</div>
|
|
@error('brandPrimary')<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror
|
|
</x-ui.row>
|
|
|
|
<x-ui.row :label="__('settings.brand_accent')">
|
|
<div class="flex items-center gap-2">
|
|
<input type="color" wire:model="brandAccent" value="{{ $brandAccent ?: ($branding['accent_color'] ?? '#c2560a') }}"
|
|
class="h-10 w-14 rounded border border-line-strong bg-surface" aria-label="{{ __('settings.brand_accent') }}" />
|
|
<input type="text" wire:model="brandAccent" placeholder="{{ $branding['accent_color'] ?? '#c2560a' }}"
|
|
class="w-32 rounded border border-line-strong bg-surface px-3 py-2.5 font-mono text-sm text-ink" />
|
|
</div>
|
|
@error('brandAccent')<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror
|
|
</x-ui.row>
|
|
|
|
<x-ui.row :label="__('settings.brand_logo')" :hint="__('settings.brand_logo_hint')">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<div class="grid size-16 shrink-0 place-items-center overflow-hidden rounded border border-line bg-surface-2">
|
|
@if ($logo)
|
|
<img src="{{ $logo->temporaryUrl() }}" alt="" class="max-h-16 max-w-16 object-contain" />
|
|
@elseif ($logoUrl)
|
|
<img src="{{ $logoUrl }}" alt="" class="max-h-16 max-w-16 object-contain" />
|
|
@else
|
|
<span class="px-2 text-center text-[10px] leading-tight text-muted">{{ __('settings.brand_default') }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="min-w-0 flex-1 space-y-2">
|
|
<input type="file" wire:model="logo" accept="image/png,image/webp"
|
|
class="w-full text-sm text-body file:mr-3 file:rounded file:border-0 file:bg-surface-2 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-body" />
|
|
@if ($logoUrl)
|
|
<button type="button" wire:click="removeLogo" class="text-xs font-semibold text-danger hover:underline">{{ __('settings.brand_logo_remove') }}</button>
|
|
@endif
|
|
@error('logo')<p class="text-xs text-danger">{{ $message }}</p>@enderror
|
|
</div>
|
|
</div>
|
|
</x-ui.row>
|
|
|
|
<x-slot:footer>
|
|
@if ($branding['is_default'] ?? false)
|
|
<p class="mr-auto text-xs text-muted">{{ __('settings.brand_using_default') }}</p>
|
|
@endif
|
|
<x-ui.button variant="primary" type="submit" wire:loading.attr="disabled" wire:target="saveBranding,logo">
|
|
{{ __('settings.save') }}
|
|
</x-ui.button>
|
|
</x-slot:footer>
|
|
</x-ui.panel>
|
|
</section>
|
|
</form>
|
|
@endif
|
|
|
|
{{-- ══ Vertrag ══════════════════════════════════════════════════ --}}
|
|
@if ($tab === 'contract')
|
|
<div class="space-y-8 animate-rise [animation-delay:60ms]">
|
|
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.package_title') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('settings.contract_sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
<x-ui.row :label="__('settings.package_title')">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<p class="min-w-0 text-sm text-body">
|
|
@if ($cancellationScheduled)
|
|
{{ __('settings.cancel_scheduled_body', ['date' => $instance?->service_ends_at?->local()->isoFormat('LL')]) }}
|
|
@elseif ($hasActivePackage)
|
|
{{ __('settings.package_active', ['plan' => $instance ? __('billing.plan.'.$instance->plan) : '—']) }}
|
|
@else
|
|
{{ __('settings.no_package') }}
|
|
@endif
|
|
</p>
|
|
|
|
@if ($hasActivePackage && ! $cancellationScheduled)
|
|
<x-ui.button variant="secondary" size="sm"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-cancel-package' })">
|
|
{{ __('settings.cancel_cta') }}
|
|
</x-ui.button>
|
|
@elseif (! $hasActivePackage && ! $cancellationScheduled)
|
|
<x-ui.button :href="route('order')" variant="secondary" size="sm" wire:navigate>
|
|
{{ __('settings.to_packages') }}
|
|
</x-ui.button>
|
|
@endif
|
|
</div>
|
|
</x-ui.row>
|
|
|
|
{{-- ── Das Widerrufsrecht ────────────────────────
|
|
Shown to every CONSUMER with a contract, open or
|
|
not. It used to render only while the window was
|
|
open, so once the fourteen days expired the block
|
|
vanished — indistinguishable from a feature
|
|
nobody built.
|
|
|
|
A business never sees it, and Settings::withdraw()
|
|
refuses them again on the server: a card that is
|
|
not rendered has never stopped anybody who can
|
|
post to /livewire/update.
|
|
|
|
Not a variant of the cancellation above it: that
|
|
one ends a contract validly concluded and keeps
|
|
the term already paid for; this one unwinds the
|
|
contract, ends the service the same day and sends
|
|
the whole amount back. --}}
|
|
@if ($withdrawal->applies)
|
|
<x-ui.row :label="__('withdrawal.card_title')">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<p class="min-w-0 max-w-[60ch] text-sm text-body">
|
|
@if ($withdrawal->open)
|
|
{{ __('withdrawal.card_sub', [
|
|
'date' => $withdrawal->endsAt->local()->isoFormat('LL'),
|
|
'days' => $withdrawal->daysLeft(),
|
|
]) }}
|
|
@else
|
|
{{ $withdrawal->refusal }}
|
|
@endif
|
|
</p>
|
|
@if ($withdrawal->open)
|
|
<x-ui.button variant="secondary" size="sm"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-withdraw' })">
|
|
{{ __('withdrawal.cta') }}
|
|
</x-ui.button>
|
|
@endif
|
|
</div>
|
|
</x-ui.row>
|
|
@endif
|
|
</x-ui.panel>
|
|
</section>
|
|
|
|
{{-- ── AV-Vertrag & TOM ──────────────────────────────────
|
|
Art. 28 DSGVO wants a contract wherever personal data is
|
|
processed on somebody else's behalf. It is concluded WITH
|
|
the terms at checkout (see the AGB), so this is not a
|
|
second signing ceremony: the document has to be
|
|
available, current and retrievable. The extra
|
|
confirmation is offered because a practice or a firm that
|
|
gets audited often wants one on file.
|
|
|
|
Nothing renders until an operator has published a
|
|
version. --}}
|
|
@if ($dpa !== null)
|
|
<section>
|
|
<div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('dpa.title') }}</h2>
|
|
<span class="font-mono text-xs text-muted">{{ __('dpa.version', ['version' => $dpa->version]) }}</span>
|
|
</div>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('dpa.sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4">
|
|
<x-ui.row :label="__('dpa.read_agreement')">
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-ui.button :href="route('dpa.file', 'agreement')" variant="secondary" size="sm" target="_blank">
|
|
<x-ui.icon name="file-text" class="size-4" />{{ __('dpa.open') }}
|
|
</x-ui.button>
|
|
<x-ui.button :href="route('dpa.file', ['which' => 'agreement', 'download' => 1])" variant="ghost" size="sm" download>
|
|
<x-ui.icon name="download" class="size-4" />{{ __('dpa.download') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</x-ui.row>
|
|
|
|
@if ($dpa->measures_path)
|
|
<x-ui.row :label="__('dpa.read_measures')">
|
|
<div class="flex flex-wrap gap-2">
|
|
<x-ui.button :href="route('dpa.file', 'measures')" variant="secondary" size="sm" target="_blank">
|
|
<x-ui.icon name="shield" class="size-4" />{{ __('dpa.open') }}
|
|
</x-ui.button>
|
|
<x-ui.button :href="route('dpa.file', ['which' => 'measures', 'download' => 1])" variant="ghost" size="sm" download>
|
|
<x-ui.icon name="download" class="size-4" />{{ __('dpa.download') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</x-ui.row>
|
|
@endif
|
|
|
|
<x-ui.row :label="__('dpa.state_label')">
|
|
@if ($dpaAcceptance)
|
|
{{-- R19: stored in UTC, read on the wall clock. --}}
|
|
<p class="flex items-start gap-2 text-sm leading-relaxed text-body">
|
|
<x-ui.icon name="check" class="mt-0.5 size-4 shrink-0 text-success" />
|
|
{{ __('dpa.accepted_on', [
|
|
'version' => $dpa->version,
|
|
'when' => $dpaAcceptance->accepted_at->local()->isoFormat('LL, LT'),
|
|
]) }}
|
|
</p>
|
|
@else
|
|
<div class="space-y-3">
|
|
<p class="max-w-[60ch] text-sm leading-relaxed text-body">{{ __('dpa.in_force_note') }}</p>
|
|
<x-ui.button variant="secondary" size="sm"
|
|
wire:click="acceptProcessingAgreement" wire:loading.attr="disabled" wire:target="acceptProcessingAgreement">
|
|
{{ __('dpa.accept_cta') }}
|
|
</x-ui.button>
|
|
</div>
|
|
@endif
|
|
</x-ui.row>
|
|
</x-ui.panel>
|
|
</section>
|
|
@endif
|
|
|
|
{{-- ── What ends an account ──────────────────────────────
|
|
The deadlines and the button that closes it, together and
|
|
last, in a card whose border says what kind of thing this
|
|
is. Everything irreversible on this page lives here.
|
|
|
|
The deadlines come from the commands that enforce them,
|
|
so the page cannot drift from what actually happens. --}}
|
|
<section>
|
|
<h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('settings.close_account_title') }}</h2>
|
|
<p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('settings.close_account_sub') }}</p>
|
|
|
|
<x-ui.panel class="mt-4 border-danger-border">
|
|
<x-ui.row :label="__('settings.lifecycle_title')">
|
|
<ul class="space-y-1.5 text-sm leading-relaxed text-muted">
|
|
<li>{{ __('settings.lifecycle_unverified', ['days' => App\Console\Commands\PruneUnverifiedAccounts::AFTER_DAYS]) }}</li>
|
|
<li>{{ __('settings.lifecycle_dormant', ['warn' => App\Console\Commands\PruneDormantAccounts::WARN_DAYS_BEFORE]) }}</li>
|
|
<li>{{ __('settings.lifecycle_kept') }}</li>
|
|
</ul>
|
|
<a href="{{ route('legal.agb') }}" target="_blank" rel="noopener"
|
|
class="mt-3 inline-block text-sm font-medium text-accent-text underline-offset-4 hover:underline">
|
|
{{ __('settings.lifecycle_terms') }}
|
|
</a>
|
|
</x-ui.row>
|
|
|
|
<x-ui.row :label="__('settings.close_cta')" :hint="__('settings.close_account_sub')">
|
|
<div class="flex justify-start sm:justify-end">
|
|
<x-ui.button variant="danger" size="sm"
|
|
x-on:click="$dispatch('openModal', { component: 'confirm-close-account' })">
|
|
{{ __('settings.close_cta') }}
|
|
</x-ui.button>
|
|
</div>
|
|
</x-ui.row>
|
|
</x-ui.panel>
|
|
</section>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|