404
\ No newline at end of file + diff --git a/src/app/core/components/not-found/not-found.component.ts b/src/app/core/components/not-found/not-found.component.ts index dcd9f8b..281545d 100644 --- a/src/app/core/components/not-found/not-found.component.ts +++ b/src/app/core/components/not-found/not-found.component.ts @@ -2,18 +2,16 @@ import { Component } from '@angular/core'; import { CommonModule, Location } from '@angular/common'; import { RouterLink } from '@angular/router'; +import { ButtonComponent } from '../../../shared/components/ui/button/button.component'; + @Component({ selector: 'app-not-found', - imports: [ - CommonModule - - ], + imports: [CommonModule, ButtonComponent,RouterLink], templateUrl: './not-found.component.html', - styleUrl: './not-found.component.css' + styleUrl: './not-found.component.css', }) export class NotFoundComponent { - - constructor(private location: Location) { } + constructor(private location: Location) {} /** * Navigiert den Benutzer eine Seite in der Browser-Historie zurück. @@ -21,4 +19,4 @@ export class NotFoundComponent { goBack(): void { this.location.back(); } -} \ No newline at end of file +} diff --git a/src/app/features/auth/_auth-common.css b/src/app/features/auth/_auth-common.css deleted file mode 100644 index 35d1dfb..0000000 --- a/src/app/features/auth/_auth-common.css +++ /dev/null @@ -1,85 +0,0 @@ -/* src\app\features\auth\_auth-common.css */ -/* ================================================================================= - * GEMEINSAME STILE FÜR DAS AUTH-FEATURE - * ================================================================================= */ - -/* -- Globale Layout-Elemente -- */ -.component-header { - text-align: center; - margin-bottom: 2rem; -} -.auth-title { - font-size: 1.75rem; - font-weight: 700; - color: var(--color-text); - margin-bottom: 0.5rem; -} -.auth-subtitle { - color: var(--color-text-light); - font-size: 1rem; -} - -/* -- Formular-Basiselemente & Helfer -- */ -form { - display: flex; - flex-direction: column; - gap: 1.25rem; -} -.btn-full-width { - width: 100%; -} -.btn-icon-left { - display: flex; - justify-content: center; - align-items: center; - gap: 0.75rem; -} -.error-text { - color: var(--color-danger); - font-size: 0.85rem; - padding-top: 0.25rem; -} -.info-text { - color: var(--color-text-light); - text-align: center; - line-height: 1.6; -} - -/* -- Links & Footer -- */ -.link { - color: var(--color-primary); - font-weight: 500; - text-decoration: none; - font-size: 0.9rem; - transition: color var(--transition-speed); -} -.link:hover { - text-decoration: underline; - color: var(--color-primary-dark); -} -.footer-link { - text-align: center; - margin-top: 1.5rem; - color: var(--color-text-light); - font-size: 0.95rem; -} - -/* -- Visueller Trenner ("oder") -- */ -.divider-or { - display: flex; - align-items: center; - text-align: center; - color: var(--color-text-light); - font-size: 0.85rem; - font-weight: 500; - margin: 0.5rem 0; -} -.divider-or::before, -.divider-or::after { - content: ''; - flex: 1; - border-bottom: 1px solid var(--color-border); -} -.divider-or:not(:empty)::before { margin-right: 1em; } -.divider-or:not(:empty)::after { margin-left: 1em; } - diff --git a/src/app/features/auth/auth.routes.ts b/src/app/features/auth/auth.routes.ts index 500bc7e..2a26115 100644 --- a/src/app/features/auth/auth.routes.ts +++ b/src/app/features/auth/auth.routes.ts @@ -6,6 +6,8 @@ import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component'; import { ResetPasswordComponent } from './components/reset-password/reset-password.component'; +import { VerifyEmailComponent } from './components/verify-email/verify-email.component'; +import { NotFoundComponent } from '../../core/components/not-found/not-found.component'; export const AUTH_ROUTES: Routes = [ { @@ -26,6 +28,11 @@ export const AUTH_ROUTES: Routes = [ component: ResetPasswordComponent, title: 'Neues Passwort', }, + { + path: 'verify-email/:token', + component: VerifyEmailComponent, + title: 'Email bestätigen', + }, ], }, ]; diff --git a/src/app/features/auth/components/auth-layout/auth-layout.component.css b/src/app/features/auth/components/auth-layout/auth-layout.component.css index 090e40b..092e7c7 100644 --- a/src/app/features/auth/components/auth-layout/auth-layout.component.css +++ b/src/app/features/auth/components/auth-layout/auth-layout.component.css @@ -1,39 +1,56 @@ -/* src\app\features\auth\components\auth-layout\auth-layout.component.css */ -/* Stile NUR für den äußeren Rahmen aller Auth-Seiten */ +/* ================================================================================= + FINALES & ZENTRALISIERTES STYLING FÜR DAS AUTH-LAYOUT +================================================================================== */ + +:host ::ng-deep .form-content-wrapper { + flex-grow: 1; /* Sorgt dafür, dass der Inhalt den Platz füllt */ +} + +:host ::ng-deep .verify-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +:host ::ng-deep .verify-content app-icon { + font-size: 64px; + color: var(--color-primary); + margin-bottom: 1.5rem; +} +:host ::ng-deep .verify-content .info-text.small { + font-size: 0.9rem; +} + +/* 1. Basis-Layout für den Container und die Karte */ :host { display: block; width: 100%; min-height: 100vh; background-color: var(--color-body-bg); } - .auth-container { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } - .auth-card { - padding: 2rem; width: 100%; max-width: 450px; animation: fade-in 0.5s ease-out forwards; } - .auth-header { text-align: center; - margin-bottom: 0.5rem; + margin-bottom: 1.5rem; } - -.auth-logo { +.auth-header app-icon { + font-size: 48px; display: inline-block; padding: 0.75rem; background: var(--color-primary-gradient); color: #fff; border-radius: 50%; } - @keyframes fade-in { from { opacity: 0; @@ -44,3 +61,94 @@ transform: translateY(0); } } + +/* 2. Flexbox-Layout für den Karteninhalt (DER ENTSCHEIDENDE TEIL) */ +/* Wir verwenden ::ng-deep, damit diese Layout-Regeln auf die projizierten Inhalte wirken. */ +:host ::ng-deep .auth-content { + display: flex; + flex-direction: column; + height: 100%; +} + +/* 3. Stile für die gemeinsamen Elemente innerhalb der Auth-Seiten */ +:host ::ng-deep .component-header { + text-align: center; + margin-bottom: 2rem; +} +:host ::ng-deep .auth-title { + font-size: 1.75rem; + font-weight: 700; + color: var(--color-text); + margin-bottom: 0.5rem; +} +:host ::ng-deep .auth-subtitle { + color: var(--color-text-light); + font-size: 1rem; +} + +/* Der - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/features/auth/components/login/login.component.ts b/src/app/features/auth/components/login/login.component.ts index ab8f6cb..1354bf3 100644 --- a/src/app/features/auth/components/login/login.component.ts +++ b/src/app/features/auth/components/login/login.component.ts @@ -28,6 +28,8 @@ import { FormFieldComponent } from '../../../../shared/components/form/form-fiel export class LoginComponent { loginForm: FormGroup; + + constructor(private fb: FormBuilder) { this.loginForm = this.fb.group({ email: ['', [Validators.required, Validators.email]], diff --git a/src/app/features/auth/components/register/register.component.css b/src/app/features/auth/components/register/register.component.css index 50996d4..e69de29 100644 --- a/src/app/features/auth/components/register/register.component.css +++ b/src/app/features/auth/components/register/register.component.css @@ -1,8 +0,0 @@ -/* src\app\features\auth\components\register\register.component.css */ -@import '../../_auth-common.css'; - -/* Stile NUR für die Registrierungs-Seite */ -:host { display: block; width: 100%; } - -/* Diese Komponente hat momentan keine spezifischen Extra-Stile, - aber die Datei ist da, falls welche benötigt werden. */ \ No newline at end of file diff --git a/src/app/features/auth/components/register/register.component.html b/src/app/features/auth/components/register/register.component.html index 88edad2..504d7c3 100644 --- a/src/app/features/auth/components/register/register.component.html +++ b/src/app/features/auth/components/register/register.component.html @@ -4,34 +4,44 @@