CluPilotCloud/resources/views/livewire/auth/forgot-password.blade.php

45 lines
2.5 KiB
PHP

<div class="flex min-h-screen bg-bg">
<x-auth.brand
:headline="__('auth.brand_headline')"
:sub="__('auth.brand_sub')"
:facts="[
__('auth.fact_location_term') => __('auth.fact_location'),
__('auth.fact_backup_term') => __('auth.fact_backup'),
__('auth.fact_restore_term') => __('auth.fact_restore'),
__('auth.fact_support_term') => __('auth.fact_support'),
]" />
<main class="flex flex-1 items-center justify-center px-6 py-12">
<div class="w-full max-w-sm animate-rise">
<x-ui.brand size="md" class="mb-9 lg:hidden" />
@if ($sent)
{{-- The same page whether the address is known or not. Saying
"no account with that address" would turn this form into a
way of finding out who is a customer. --}}
<div class="grid size-11 place-items-center rounded-lg bg-accent-subtle">
<x-ui.icon name="mail" class="size-5 text-accent-text" />
</div>
<h1 class="mt-5 text-2xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.forgot_sent_title') }}</h1>
<p class="mt-3 text-sm leading-relaxed text-muted">{{ __('auth.forgot_sent_body', ['email' => $email]) }}</p>
<p class="mt-4 text-sm leading-relaxed text-muted">{{ __('auth.forgot_sent_hint') }}</p>
<x-ui.button href="{{ route('login') }}" variant="secondary" class="mt-8 w-full">{{ __('auth.back_to_login') }}</x-ui.button>
@else
<h1 class="text-3xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.forgot_title') }}</h1>
<p class="mt-2 text-sm text-muted">{{ __('auth.forgot_subtitle') }}</p>
<form wire:submit="send" class="mt-8 space-y-5">
<x-ui.input name="email" type="email" :label="__('auth.email')" autocomplete="email" autofocus wire:model="email" />
<x-ui.button type="submit" variant="primary" size="md" class="w-full"
wire:loading.attr="disabled" wire:target="send">{{ __('auth.forgot_send') }}</x-ui.button>
</form>
<p class="mt-6 text-sm text-muted">
<a href="{{ route('login') }}" class="font-medium text-accent-text underline-offset-4 hover:underline">{{ __('auth.back_to_login') }}</a>
</p>
@endif
</div>
</main>
</div>