Redesign: Login-Seite an Wizard-Design angepasst
Eigenes HTML-Layout ohne Sidebar, mw-* CSS-Klassen, gleiches Logo und Karten-Design wie der Setup-Wizard. Icons als Inline-SVG da app.js (Phosphor) auf der Login-Seite nicht geladen wird. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>main
parent
3869f6e67f
commit
085f27d67c
|
|
@ -1,77 +1,17 @@
|
|||
{{-- resources/views/auth/login.blade.php --}}
|
||||
@extends('layouts.blank')
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Anmelden · Mailwolt</title>
|
||||
@vite(['resources/css/app.css'])
|
||||
@livewireStyles
|
||||
</head>
|
||||
<body style="margin:0;background:var(--mw-bg);color:var(--mw-t1);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',sans-serif;font-size:13.5px;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;align-items:center;justify-content:center;
|
||||
background-image:radial-gradient(900px 600px at 15% 0%,rgba(99,102,241,.07),transparent),radial-gradient(700px 500px at 85% 100%,rgba(59,130,246,.05),transparent)">
|
||||
|
||||
@section('title', 'Login')
|
||||
|
||||
@section('content')
|
||||
<div class="flex items-center justify-center p-6 w-full">
|
||||
<livewire:auth.login-form />
|
||||
</div>
|
||||
@endsection
|
||||
{{-- resources/views/auth/login.blade.php --}}
|
||||
{{--@extends('layouts.app')--}}
|
||||
|
||||
{{--@section('title', 'Login')--}}
|
||||
|
||||
{{--@section('content')--}}
|
||||
{{-- <div class="min-h-[86vh] grid place-items-center px-4--}}
|
||||
{{-- bg-[radial-gradient(1200px_600px_at_10%_-10%,rgba(59,130,246,.08),transparent),--}}
|
||||
{{-- radial-gradient(900px_500px_at_90%_0%,rgba(99,102,241,.06),transparent)]">--}}
|
||||
|
||||
{{-- <div class="nx-card w-full max-w-[520px]">--}}
|
||||
{{-- --}}{{-- Header-Chip + Icon --}}
|
||||
{{-- <div class="flex items-center justify-between mb-5">--}}
|
||||
{{-- <span class="nx-chip">Erster Login</span>--}}
|
||||
{{-- <i class="ph ph-lock-simple text-white/60"></i>--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
{{-- <p class="nx-subtle mb-7">--}}
|
||||
{{-- Melde dich mit dem einmaligen Bootstrap-Konto an, um den Setup-Wizard zu starten.--}}
|
||||
{{-- </p>--}}
|
||||
|
||||
{{-- --}}{{-- Fehler (optional) --}}
|
||||
{{-- @if(session('error'))--}}
|
||||
{{-- <div class="nx-alert mb-6">--}}
|
||||
{{-- <i class="ph ph-warning-circle text-rose-300"></i>--}}
|
||||
{{-- <div>--}}
|
||||
{{-- <p class="font-medium">Anmeldung fehlgeschlagen</p>--}}
|
||||
{{-- <p class="text-sm/5 text-rose-200/90">{{ session('error') }}</p>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{-- @endif--}}
|
||||
|
||||
{{-- --}}{{-- Formular --}}
|
||||
{{-- <form method="POST" action="{{ route('login') }}" class="Space-y-5">--}}
|
||||
{{-- @csrf--}}
|
||||
|
||||
{{-- <label class="nx-label" for="email">E-Mail</label>--}}
|
||||
{{-- <input id="email" name="email" type="email" autocomplete="username" autofocus--}}
|
||||
{{-- class="nx-input" value="{{ old('email') }}"/>--}}
|
||||
|
||||
{{-- <label class="nx-label" for="password">Passwort</label>--}}
|
||||
{{-- <div class="relative">--}}
|
||||
{{-- <input id="password" name="password" type="password" autocomplete="current-password" class="nx-input pr-10"/>--}}
|
||||
{{-- <button type="button" class="nx-eye" onclick="this.previousElementSibling.type = this.previousElementSibling.type==='password'?'text':'password'">--}}
|
||||
{{-- <i class="ph ph-eye text-white/60"></i>--}}
|
||||
{{-- </button>--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
{{-- <div class="flex items-center justify-between pt-1">--}}
|
||||
{{-- <label class="inline-flex items-center gap-2 text-sm text-white/70">--}}
|
||||
{{-- <input type="checkbox" name="remember" class="nx-check"> Session merken--}}
|
||||
{{-- </label>--}}
|
||||
{{-- <a class="nx-link" href="#">Zugang zurücksetzen</a>--}}
|
||||
{{-- </div>--}}
|
||||
|
||||
{{-- <button type="submit" class="nx-btn w-full">Anmelden</button>--}}
|
||||
{{-- </form>--}}
|
||||
|
||||
{{-- --}}{{-- Optional: Provider-Buttons --}}
|
||||
{{-- --}}{{-- <div class="nx-divider">oder verbinden via</div>--}}
|
||||
{{-- <div class="grid grid-cols-2 gap-3 mt-4">--}}
|
||||
{{-- <button class="nx-btn-ghost"><i class="ph ph-google-logo mr-2"></i> Google</button>--}}
|
||||
{{-- <button class="nx-btn-ghost"><i class="ph ph-github-logo mr-2"></i> GitHub</button>--}}
|
||||
{{-- </div> --}}
|
||||
{{-- </div>--}}
|
||||
{{-- </div>--}}
|
||||
{{--@endsection--}}
|
||||
@livewireScripts
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,120 +1,113 @@
|
|||
<div class="w-full #min-h-[86vh] grid place-items-center
|
||||
bg-[radial-gradient(1200px_600px_at_10%_-10%,rgba(59,130,246,.08),transparent),
|
||||
radial-gradient(900px_500px_at_90%_0%,rgba(99,102,241,.06),transparent)]">
|
||||
<div style="width:100%;max-width:420px;padding:24px 16px">
|
||||
|
||||
{{-- Banner (dismissbar) --}}
|
||||
{{-- Logo --}}
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:32px;justify-content:center">
|
||||
<div style="width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px rgba(99,102,241,.4)">
|
||||
<svg width="16" height="16" viewBox="0 0 18 18" fill="none">
|
||||
<path d="M9 2L15.5 5.5v7L9 16 2.5 12.5v-7L9 2Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M9 6L12 7.5v3L9 12 6 10.5v-3L9 6Z" fill="white" opacity=".9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:14px;font-weight:700;letter-spacing:.3px;color:var(--mw-t1)">MAILWOLT</div>
|
||||
<div style="font-size:11px;color:var(--mw-t4);margin-top:-1px">Control Panel</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Setup-Done Banner --}}
|
||||
@if($showBanner && $banner)
|
||||
<div class="max-w-[520px] mb-5 rounded-2xl border border-emerald-400/30 text-emerald-300 bg-emerald-500/10 p-4 #md:p-5 shadow backdrop-blur"
|
||||
role="status" aria-live="polite">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="shrink-0 mt-0.5">
|
||||
<i class="ph ph-check-circle text-emerald-100 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold text-emerald-100">
|
||||
{{ $banner['title'] ?? 'Erfolgreich registriert' }}
|
||||
</div>
|
||||
<div class="mt-0.5 text-sm text-emerald-200">
|
||||
{{ $banner['message'] ?? 'Dein Konto ist bereit. Melde dich jetzt an.' }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:14px;padding:12px 14px;border-radius:9px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.07);display:flex;align-items:flex-start;gap:10px">
|
||||
<svg width="15" height="15" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;color:#4ade80"><path d="M2 7.5l3 3 7-7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<div>
|
||||
<div style="font-size:12.5px;font-weight:600;color:rgba(134,239,172,.95)">{{ $banner['title'] ?? 'Einrichtung abgeschlossen' }}</div>
|
||||
@if(!empty($banner['message']))
|
||||
<div style="font-size:11.5px;color:rgba(134,239,172,.7);margin-top:2px">{{ $banner['message'] }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="nx-card w-full max-w-[520px]">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<span class="nx-chip">Erster Login</span>
|
||||
<i class="ph ph-lock-simple text-white/60"></i>
|
||||
{{-- Karte --}}
|
||||
<div style="background:var(--mw-bg2);border:1px solid var(--mw-b2);border-radius:14px;padding:28px 24px">
|
||||
|
||||
<div style="margin-bottom:20px">
|
||||
<div style="font-size:15px;font-weight:600;color:var(--mw-t1)">Anmelden</div>
|
||||
<div style="font-size:12px;color:var(--mw-t4);margin-top:3px">Melde dich mit deinem Account an</div>
|
||||
</div>
|
||||
{{-- globale Fehlermeldung --}}
|
||||
|
||||
{{-- Fehler --}}
|
||||
@if($error)
|
||||
<div class="nx-alert mb-6">
|
||||
<i class="ph ph-warning-circle text-rose-300"></i>
|
||||
<div>
|
||||
<p class="font-medium">Anmeldung fehlgeschlagen</p>
|
||||
<p class="text-sm/5 text-rose-200/90">{{ $error }}</p>
|
||||
</div>
|
||||
<div style="margin-bottom:16px;padding:10px 12px;border-radius:8px;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.07);display:flex;align-items:center;gap:8px">
|
||||
<svg width="13" height="13" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;color:#f87171"><circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.3"/><path d="M7 4.5v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="7" cy="9.5" r=".7" fill="currentColor"/></svg>
|
||||
<span style="font-size:12px;color:#f87171">{{ $error }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form wire:submit.prevent="login" class="space-y-5">
|
||||
<form wire:submit.prevent="login" style="display:flex;flex-direction:column;gap:16px">
|
||||
|
||||
<div>
|
||||
<label class="nx-label" for="email">E-Mail / Benutzername</label>
|
||||
<input id="name" type="name"
|
||||
<label class="mw-modal-label">E-Mail / Benutzername</label>
|
||||
<input type="text"
|
||||
wire:model.defer="name"
|
||||
autocomplete="username" autofocus
|
||||
class="nx-input @error('name') input-error @enderror">
|
||||
@error('name')
|
||||
<p class="field-error #mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
autocomplete="username"
|
||||
autofocus
|
||||
class="mw-modal-input @error('name') border-red-500/50 @enderror"
|
||||
placeholder="admin@example.com">
|
||||
@error('name') <div class="mw-modal-error">{{ $message }}</div> @enderror
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<label class="nx-label" for="password">Passwort</label>
|
||||
<div class="relative">
|
||||
<input id="password" type="{{ $show ? 'text' : 'password' }}"
|
||||
<label class="mw-modal-label">Passwort</label>
|
||||
<div style="position:relative">
|
||||
<input id="lf-password"
|
||||
type="password"
|
||||
wire:model.defer="password"
|
||||
autocomplete="current-password"
|
||||
class="nx-input pr-10 @error('password') input-error @enderror">
|
||||
<button type="button" class="nx-eye"
|
||||
onclick="togglePassword('password', this)">
|
||||
<i class="ph ph-eye text-white/60"></i>
|
||||
class="mw-modal-input @error('password') border-red-500/50 @enderror"
|
||||
style="padding-right:38px"
|
||||
placeholder="••••••••••">
|
||||
<button type="button"
|
||||
onclick="(function(btn){var i=document.getElementById('lf-password'),s=btn.querySelector('.ico-show'),h=btn.querySelector('.ico-hide');i.type=i.type==='password'?'text':'password';s.style.display=i.type==='text'?'none':'block';h.style.display=i.type==='text'?'block':'none';})(this)"
|
||||
style="position:absolute;right:0;top:0;height:100%;width:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--mw-t4)">
|
||||
<svg class="ico-show" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg class="ico-hide" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('password')
|
||||
<p class="field-error mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('password') <div class="mw-modal-error">{{ $message }}</div> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between pt-1">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" wire:model.live="remember" class="peer hidden">
|
||||
<span
|
||||
class="w-5 h-5 flex items-center justify-center rounded border border-white/30 bg-white/5 peer-checked:bg-emerald-500/20 peer-checked:border-emerald-400 transition">
|
||||
<i class="ph ph-check text-emerald-400 text-xs hidden peer-checked:inline nx-check"></i>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
||||
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<input type="checkbox" wire:model.live="remember" style="display:none" id="lf-remember">
|
||||
<span onclick="document.getElementById('lf-remember').click()"
|
||||
style="width:16px;height:16px;border-radius:4px;border:1.5px solid var(--mw-b2);background:var(--mw-bg3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;{{ $remember ? 'background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.6)' : '' }}">
|
||||
@if($remember)
|
||||
<svg width="9" height="9" viewBox="0 0 9 9" fill="none"><path d="M1.5 4.5l2 2 4-4" stroke="#a5b4fc" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
@endif
|
||||
</span>
|
||||
<span class="text-sm text-white/70">Merken</span>
|
||||
<span style="font-size:12px;color:var(--mw-t4)">Merken</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="nx-btn w-full" wire:loading.attr="disabled">
|
||||
<span wire:loading.remove>Anmelden</span>
|
||||
<span wire:loading class="inline-flex items-center gap-2">
|
||||
<svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
|
||||
<button type="submit"
|
||||
wire:loading.attr="disabled"
|
||||
class="mbx-btn-primary"
|
||||
style="width:100%;justify-content:center;font-size:13px;padding:9px 16px">
|
||||
<span wire:loading.remove wire:target="login">Anmelden</span>
|
||||
<span wire:loading wire:target="login" style="display:inline-flex;align-items:center;gap:6px">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" style="animation:spin .7s linear infinite">
|
||||
<path d="M10 6A4 4 0 1 1 6 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||||
</svg>
|
||||
wird geprüft…
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@if(\App\Models\Setting::signupAllowed())
|
||||
<div class="mt-6 text-sm text-white/70">
|
||||
Noch keinen Account? <a wire:navigate href="{{ route('signup') }}" class="nx-link">Zur Registiereung</a>
|
||||
<div style="margin-top:16px;text-align:center;font-size:12px;color:var(--mw-t4)">
|
||||
Noch keinen Account?
|
||||
<a wire:navigate href="{{ route('signup') }}" style="color:#a5b4fc;text-decoration:none">Zur Registrierung</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<script>
|
||||
function togglePassword(id, btn) {
|
||||
const input = document.getElementById(id);
|
||||
const icon = btn.querySelector('i');
|
||||
|
||||
if (input.type === 'password') {
|
||||
input.type = 'text';
|
||||
icon.classList.remove('ph-eye');
|
||||
icon.classList.add('ph-eye-slash');
|
||||
} else {
|
||||
input.type = 'password';
|
||||
icon.classList.remove('ph-eye-slash');
|
||||
icon.classList.add('ph-eye');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue