482 lines
24 KiB
JavaScript
482 lines
24 KiB
JavaScript
import {
|
|
DefaultValueAccessor,
|
|
FormBuilder,
|
|
FormControlName,
|
|
FormGroupDirective,
|
|
NgControlStatus,
|
|
NgControlStatusGroup,
|
|
ReactiveFormsModule,
|
|
Validators,
|
|
ɵNgNoValidate
|
|
} from "./chunk-VD6QIYHN.js";
|
|
import {
|
|
getErrorMessage
|
|
} from "./chunk-QDZ3GX5R.js";
|
|
import {
|
|
NzMessageService
|
|
} from "./chunk-GJYGTZ7J.js";
|
|
import {
|
|
AuthService,
|
|
NzIconDirective,
|
|
NzIconModule,
|
|
Router
|
|
} from "./chunk-2TRRHRR7.js";
|
|
import "./chunk-EDRPZB37.js";
|
|
import {
|
|
Component,
|
|
inject,
|
|
setClassMetadata,
|
|
signal,
|
|
ɵsetClassDebugInfo,
|
|
ɵɵProvidersFeature,
|
|
ɵɵadvance,
|
|
ɵɵconditional,
|
|
ɵɵconditionalCreate,
|
|
ɵɵdefineComponent,
|
|
ɵɵelement,
|
|
ɵɵelementEnd,
|
|
ɵɵelementStart,
|
|
ɵɵgetCurrentView,
|
|
ɵɵlistener,
|
|
ɵɵnextContext,
|
|
ɵɵproperty,
|
|
ɵɵresetView,
|
|
ɵɵrestoreView,
|
|
ɵɵtext
|
|
} from "./chunk-WI7WFVZR.js";
|
|
import "./chunk-WDMUDEB6.js";
|
|
|
|
// src/app/pages/auth/auth.ts
|
|
function AuthPage_Conditional_6_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " Bienvenue, connectez-vous ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_7_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " Cr\xE9ez votre compte ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_8_Conditional_5_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "span", 13);
|
|
\u0275\u0275text(1, "Email invalide");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
}
|
|
function AuthPage_Conditional_8_Conditional_10_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "span", 13);
|
|
\u0275\u0275text(1, "Mot de passe requis (min. 6 caract\xE8res)");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
}
|
|
function AuthPage_Conditional_8_Conditional_12_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " Connexion... ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_8_Conditional_13_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " Se Connecter \u2192 ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_8_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
const _r1 = \u0275\u0275getCurrentView();
|
|
\u0275\u0275elementStart(0, "form", 8);
|
|
\u0275\u0275listener("ngSubmit", function AuthPage_Conditional_8_Template_form_ngSubmit_0_listener() {
|
|
\u0275\u0275restoreView(_r1);
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
return \u0275\u0275resetView(ctx_r1.login());
|
|
});
|
|
\u0275\u0275elementStart(1, "div", 9)(2, "div", 10);
|
|
\u0275\u0275element(3, "span", 11)(4, "input", 12);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(5, AuthPage_Conditional_8_Conditional_5_Template, 2, 0, "span", 13);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(6, "div", 9)(7, "div", 10);
|
|
\u0275\u0275element(8, "span", 14)(9, "input", 15);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(10, AuthPage_Conditional_8_Conditional_10_Template, 2, 0, "span", 13);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(11, "button", 16);
|
|
\u0275\u0275conditionalCreate(12, AuthPage_Conditional_8_Conditional_12_Template, 1, 0)(13, AuthPage_Conditional_8_Conditional_13_Template, 1, 0);
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275elementStart(14, "div", 17);
|
|
\u0275\u0275text(15, " Pas encore de compte ? ");
|
|
\u0275\u0275elementStart(16, "button", 18);
|
|
\u0275\u0275listener("click", function AuthPage_Conditional_8_Template_button_click_16_listener() {
|
|
\u0275\u0275restoreView(_r1);
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
return \u0275\u0275resetView(ctx_r1.toggleMode());
|
|
});
|
|
\u0275\u0275text(17, "S'inscrire");
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
\u0275\u0275property("formGroup", ctx_r1.loginForm);
|
|
\u0275\u0275advance(5);
|
|
\u0275\u0275conditional(ctx_r1.loginForm.controls.email.invalid && ctx_r1.loginForm.controls.email.touched ? 5 : -1);
|
|
\u0275\u0275advance(5);
|
|
\u0275\u0275conditional(ctx_r1.loginForm.controls.password.invalid && ctx_r1.loginForm.controls.password.touched ? 10 : -1);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275property("disabled", ctx_r1.loading());
|
|
\u0275\u0275advance();
|
|
\u0275\u0275conditional(ctx_r1.loading() ? 12 : 13);
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Conditional_5_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "span", 13);
|
|
\u0275\u0275text(1, "Nom requis (min. 2 caract\xE8res)");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Conditional_10_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "span", 13);
|
|
\u0275\u0275text(1, "Email invalide");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Conditional_15_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "span", 13);
|
|
\u0275\u0275text(1, "Mot de passe requis (min. 6 caract\xE8res)");
|
|
\u0275\u0275elementEnd();
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Conditional_17_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " Cr\xE9ation... ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Conditional_18_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275text(0, " S'inscrire \u2192 ");
|
|
}
|
|
}
|
|
function AuthPage_Conditional_9_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
const _r3 = \u0275\u0275getCurrentView();
|
|
\u0275\u0275elementStart(0, "form", 8);
|
|
\u0275\u0275listener("ngSubmit", function AuthPage_Conditional_9_Template_form_ngSubmit_0_listener() {
|
|
\u0275\u0275restoreView(_r3);
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
return \u0275\u0275resetView(ctx_r1.register());
|
|
});
|
|
\u0275\u0275elementStart(1, "div", 9)(2, "div", 10);
|
|
\u0275\u0275element(3, "span", 19)(4, "input", 20);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(5, AuthPage_Conditional_9_Conditional_5_Template, 2, 0, "span", 13);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(6, "div", 9)(7, "div", 10);
|
|
\u0275\u0275element(8, "span", 11)(9, "input", 12);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(10, AuthPage_Conditional_9_Conditional_10_Template, 2, 0, "span", 13);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(11, "div", 9)(12, "div", 10);
|
|
\u0275\u0275element(13, "span", 14)(14, "input", 21);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275conditionalCreate(15, AuthPage_Conditional_9_Conditional_15_Template, 2, 0, "span", 13);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(16, "button", 16);
|
|
\u0275\u0275conditionalCreate(17, AuthPage_Conditional_9_Conditional_17_Template, 1, 0)(18, AuthPage_Conditional_9_Conditional_18_Template, 1, 0);
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275elementStart(19, "div", 17);
|
|
\u0275\u0275text(20, " D\xE9j\xE0 un compte ? ");
|
|
\u0275\u0275elementStart(21, "button", 18);
|
|
\u0275\u0275listener("click", function AuthPage_Conditional_9_Template_button_click_21_listener() {
|
|
\u0275\u0275restoreView(_r3);
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
return \u0275\u0275resetView(ctx_r1.toggleMode());
|
|
});
|
|
\u0275\u0275text(22, "Se connecter");
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
const ctx_r1 = \u0275\u0275nextContext();
|
|
\u0275\u0275property("formGroup", ctx_r1.registerForm);
|
|
\u0275\u0275advance(5);
|
|
\u0275\u0275conditional(ctx_r1.registerForm.controls.name.invalid && ctx_r1.registerForm.controls.name.touched ? 5 : -1);
|
|
\u0275\u0275advance(5);
|
|
\u0275\u0275conditional(ctx_r1.registerForm.controls.email.invalid && ctx_r1.registerForm.controls.email.touched ? 10 : -1);
|
|
\u0275\u0275advance(5);
|
|
\u0275\u0275conditional(ctx_r1.registerForm.controls.password.invalid && ctx_r1.registerForm.controls.password.touched ? 15 : -1);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275property("disabled", ctx_r1.loading());
|
|
\u0275\u0275advance();
|
|
\u0275\u0275conditional(ctx_r1.loading() ? 17 : 18);
|
|
}
|
|
}
|
|
function AuthPage_Conditional_11_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275element(0, "span", 6);
|
|
}
|
|
}
|
|
function AuthPage_Conditional_12_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275element(0, "span", 7);
|
|
}
|
|
}
|
|
var AuthPage = class _AuthPage {
|
|
fb = inject(FormBuilder);
|
|
router = inject(Router);
|
|
authService = inject(AuthService);
|
|
message = inject(NzMessageService);
|
|
mode = signal("login", ...ngDevMode ? [{ debugName: "mode" }] : []);
|
|
loading = signal(false, ...ngDevMode ? [{ debugName: "loading" }] : []);
|
|
isDark = signal(true, ...ngDevMode ? [{ debugName: "isDark" }] : []);
|
|
loginForm = this.fb.group({
|
|
email: ["", [Validators.required, Validators.email]],
|
|
password: ["", [Validators.required, Validators.minLength(6)]]
|
|
});
|
|
registerForm = this.fb.group({
|
|
name: ["", [Validators.required, Validators.minLength(2)]],
|
|
email: ["", [Validators.required, Validators.email]],
|
|
password: ["", [Validators.required, Validators.minLength(6)]]
|
|
});
|
|
toggleMode() {
|
|
this.mode.set(this.mode() === "login" ? "register" : "login");
|
|
}
|
|
toggleTheme() {
|
|
const html = document.documentElement;
|
|
if (html.classList.contains("dark")) {
|
|
html.classList.remove("dark");
|
|
this.isDark.set(false);
|
|
} else {
|
|
html.classList.add("dark");
|
|
this.isDark.set(true);
|
|
}
|
|
}
|
|
login() {
|
|
if (this.loginForm.invalid) {
|
|
Object.values(this.loginForm.controls).forEach((c) => c.markAsTouched());
|
|
return;
|
|
}
|
|
const { email, password } = this.loginForm.value;
|
|
this.loading.set(true);
|
|
this.authService.login(email, password).subscribe({
|
|
next: () => {
|
|
this.loading.set(false);
|
|
this.router.navigate(["/catalog"]);
|
|
},
|
|
error: (err) => {
|
|
this.loading.set(false);
|
|
this.message.error(getErrorMessage(err, "Email ou mot de passe incorrect"));
|
|
}
|
|
});
|
|
}
|
|
register() {
|
|
if (this.registerForm.invalid) {
|
|
Object.values(this.registerForm.controls).forEach((c) => c.markAsTouched());
|
|
return;
|
|
}
|
|
const { name, email, password } = this.registerForm.value;
|
|
this.loading.set(true);
|
|
this.authService.register(name, email, password).subscribe({
|
|
next: () => {
|
|
this.loading.set(false);
|
|
this.message.success("Compte cr\xE9\xE9 avec succ\xE8s !");
|
|
this.mode.set("login");
|
|
this.loginForm.patchValue({ email, password: "" });
|
|
},
|
|
error: (err) => {
|
|
this.loading.set(false);
|
|
this.message.error(getErrorMessage(err, "Erreur lors de la cr\xE9ation du compte"));
|
|
}
|
|
});
|
|
}
|
|
static \u0275fac = function AuthPage_Factory(__ngFactoryType__) {
|
|
return new (__ngFactoryType__ || _AuthPage)();
|
|
};
|
|
static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _AuthPage, selectors: [["app-auth"]], features: [\u0275\u0275ProvidersFeature([NzMessageService])], decls: 13, vars: 4, consts: [[1, "auth-page"], [1, "auth-container"], [1, "auth-logo"], [1, "logo-title"], [1, "logo-subtitle"], ["aria-label", "Toggle theme", 1, "theme-toggle", 3, "click"], ["nz-icon", "", "nzType", "bulb", "nzTheme", "fill"], ["nz-icon", "", "nzType", "bulb", "nzTheme", "outline"], [1, "auth-form", 3, "ngSubmit", "formGroup"], [1, "input-group"], [1, "input-wrapper"], ["nz-icon", "", "nzType", "mail", "nzTheme", "outline", 1, "input-icon"], ["type", "email", "formControlName", "email", "placeholder", "Adresse email", "autocomplete", "email", 1, "auth-input"], [1, "field-error"], ["nz-icon", "", "nzType", "lock", "nzTheme", "outline", 1, "input-icon"], ["type", "password", "formControlName", "password", "placeholder", "Mot de passe", "autocomplete", "current-password", 1, "auth-input"], ["type", "submit", 1, "auth-btn", 3, "disabled"], [1, "auth-switch"], ["type", "button", 1, "switch-btn", 3, "click"], ["nz-icon", "", "nzType", "user", "nzTheme", "outline", 1, "input-icon"], ["type", "text", "formControlName", "name", "placeholder", "Nom complet", "autocomplete", "name", 1, "auth-input"], ["type", "password", "formControlName", "password", "placeholder", "Mot de passe", "autocomplete", "new-password", 1, "auth-input"]], template: function AuthPage_Template(rf, ctx) {
|
|
if (rf & 1) {
|
|
\u0275\u0275elementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1", 3);
|
|
\u0275\u0275text(4, "MetaCourse");
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(5, "p", 4);
|
|
\u0275\u0275conditionalCreate(6, AuthPage_Conditional_6_Template, 1, 0)(7, AuthPage_Conditional_7_Template, 1, 0);
|
|
\u0275\u0275elementEnd()();
|
|
\u0275\u0275conditionalCreate(8, AuthPage_Conditional_8_Template, 18, 5);
|
|
\u0275\u0275conditionalCreate(9, AuthPage_Conditional_9_Template, 23, 6);
|
|
\u0275\u0275elementEnd();
|
|
\u0275\u0275elementStart(10, "button", 5);
|
|
\u0275\u0275listener("click", function AuthPage_Template_button_click_10_listener() {
|
|
return ctx.toggleTheme();
|
|
});
|
|
\u0275\u0275conditionalCreate(11, AuthPage_Conditional_11_Template, 1, 0, "span", 6)(12, AuthPage_Conditional_12_Template, 1, 0, "span", 7);
|
|
\u0275\u0275elementEnd()();
|
|
}
|
|
if (rf & 2) {
|
|
\u0275\u0275advance(6);
|
|
\u0275\u0275conditional(ctx.mode() === "login" ? 6 : 7);
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275conditional(ctx.mode() === "login" ? 8 : -1);
|
|
\u0275\u0275advance();
|
|
\u0275\u0275conditional(ctx.mode() === "register" ? 9 : -1);
|
|
\u0275\u0275advance(2);
|
|
\u0275\u0275conditional(ctx.isDark() ? 11 : 12);
|
|
}
|
|
}, dependencies: [ReactiveFormsModule, \u0275NgNoValidate, DefaultValueAccessor, NgControlStatus, NgControlStatusGroup, FormGroupDirective, FormControlName, NzIconModule, NzIconDirective], styles: ["\n\n.auth-page[_ngcontent-%COMP%] {\n background-color: var(--bg);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n position: relative;\n}\n.auth-container[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 360px;\n}\n.auth-logo[_ngcontent-%COMP%] {\n text-align: center;\n margin-bottom: 40px;\n}\n.logo-icon[_ngcontent-%COMP%] {\n width: 64px;\n height: 64px;\n background-color: var(--primary);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n font-size: 28px;\n color: var(--primary-fg);\n}\n.logo-title[_ngcontent-%COMP%] {\n font-size: 28px;\n font-weight: 800;\n color: var(--text);\n margin: 0 0 8px;\n letter-spacing: -0.5px;\n}\n.logo-subtitle[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--text-muted);\n margin: 0;\n}\n.auth-form[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n}\n.input-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.input-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n}\n.input-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 14px;\n color: var(--text-muted);\n font-size: 16px;\n z-index: 1;\n}\n.auth-input[_ngcontent-%COMP%] {\n width: 100%;\n background-color: var(--card);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n padding: 14px 14px 14px 42px;\n color: var(--text);\n font-size: 15px;\n outline: none;\n transition: border-color 0.2s;\n}\n.auth-input[_ngcontent-%COMP%]:focus {\n border-color: #1abc9c;\n}\n.auth-input[_ngcontent-%COMP%]::placeholder {\n color: var(--text-muted);\n}\n.field-error[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #ff4d4f;\n padding-left: 4px;\n}\n.auth-btn[_ngcontent-%COMP%] {\n width: 100%;\n background-color: var(--primary);\n color: var(--primary-fg);\n border: none;\n border-radius: 12px;\n padding: 16px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n margin-top: 4px;\n transition: opacity 0.2s;\n}\n.auth-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n opacity: 0.85;\n}\n.auth-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.auth-switch[_ngcontent-%COMP%] {\n text-align: center;\n font-size: 14px;\n color: var(--text-muted);\n}\n.switch-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: #1abc9c;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n padding: 0;\n margin-left: 4px;\n text-decoration: underline;\n}\n.theme-toggle[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 44px;\n height: 44px;\n background-color: var(--card);\n border: 1px solid var(--border);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n color: var(--text);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s;\n}\n.theme-toggle[_ngcontent-%COMP%]:hover {\n transform: scale(1.1);\n}\n/*# sourceMappingURL=auth.css.map */"] });
|
|
};
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(AuthPage, [{
|
|
type: Component,
|
|
args: [{ selector: "app-auth", imports: [ReactiveFormsModule, NzIconModule], providers: [NzMessageService], template: `<div class="auth-page">
|
|
<div class="auth-container">
|
|
<div class="auth-logo">
|
|
<h1 class="logo-title">MetaCourse</h1>
|
|
<p class="logo-subtitle">
|
|
@if (mode() === 'login') {
|
|
Bienvenue, connectez-vous
|
|
} @else {
|
|
Cr\xE9ez votre compte
|
|
}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
@if (mode() === 'login') {
|
|
<form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">
|
|
<div class="input-group">
|
|
<div class="input-wrapper">
|
|
<span nz-icon nzType="mail" nzTheme="outline" class="input-icon"></span>
|
|
<input
|
|
type="email"
|
|
formControlName="email"
|
|
placeholder="Adresse email"
|
|
class="auth-input"
|
|
autocomplete="email"
|
|
/>
|
|
</div>
|
|
@if (loginForm.controls.email.invalid && loginForm.controls.email.touched) {
|
|
<span class="field-error">Email invalide</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<div class="input-wrapper">
|
|
<span nz-icon nzType="lock" nzTheme="outline" class="input-icon"></span>
|
|
<input
|
|
type="password"
|
|
formControlName="password"
|
|
placeholder="Mot de passe"
|
|
class="auth-input"
|
|
autocomplete="current-password"
|
|
/>
|
|
</div>
|
|
@if (loginForm.controls.password.invalid && loginForm.controls.password.touched) {
|
|
<span class="field-error">Mot de passe requis (min. 6 caract\xE8res)</span>
|
|
}
|
|
</div>
|
|
|
|
<button type="submit" class="auth-btn" [disabled]="loading()">
|
|
@if (loading()) {
|
|
Connexion...
|
|
} @else {
|
|
Se Connecter →
|
|
}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="auth-switch">
|
|
Pas encore de compte ?
|
|
<button type="button" class="switch-btn" (click)="toggleMode()">S'inscrire</button>
|
|
</div>
|
|
}
|
|
|
|
<!-- Register Form -->
|
|
@if (mode() === 'register') {
|
|
<form [formGroup]="registerForm" (ngSubmit)="register()" class="auth-form">
|
|
<div class="input-group">
|
|
<div class="input-wrapper">
|
|
<span nz-icon nzType="user" nzTheme="outline" class="input-icon"></span>
|
|
<input
|
|
type="text"
|
|
formControlName="name"
|
|
placeholder="Nom complet"
|
|
class="auth-input"
|
|
autocomplete="name"
|
|
/>
|
|
</div>
|
|
@if (registerForm.controls.name.invalid && registerForm.controls.name.touched) {
|
|
<span class="field-error">Nom requis (min. 2 caract\xE8res)</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<div class="input-wrapper">
|
|
<span nz-icon nzType="mail" nzTheme="outline" class="input-icon"></span>
|
|
<input
|
|
type="email"
|
|
formControlName="email"
|
|
placeholder="Adresse email"
|
|
class="auth-input"
|
|
autocomplete="email"
|
|
/>
|
|
</div>
|
|
@if (registerForm.controls.email.invalid && registerForm.controls.email.touched) {
|
|
<span class="field-error">Email invalide</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<div class="input-wrapper">
|
|
<span nz-icon nzType="lock" nzTheme="outline" class="input-icon"></span>
|
|
<input
|
|
type="password"
|
|
formControlName="password"
|
|
placeholder="Mot de passe"
|
|
class="auth-input"
|
|
autocomplete="new-password"
|
|
/>
|
|
</div>
|
|
@if (registerForm.controls.password.invalid && registerForm.controls.password.touched) {
|
|
<span class="field-error">Mot de passe requis (min. 6 caract\xE8res)</span>
|
|
}
|
|
</div>
|
|
|
|
<button type="submit" class="auth-btn" [disabled]="loading()">
|
|
@if (loading()) {
|
|
Cr\xE9ation...
|
|
} @else {
|
|
S'inscrire →
|
|
}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="auth-switch">
|
|
D\xE9j\xE0 un compte ?
|
|
<button type="button" class="switch-btn" (click)="toggleMode()">Se connecter</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Theme Toggle -->
|
|
<button class="theme-toggle" (click)="toggleTheme()" aria-label="Toggle theme">
|
|
@if (isDark()) {
|
|
<span nz-icon nzType="bulb" nzTheme="fill"></span>
|
|
} @else {
|
|
<span nz-icon nzType="bulb" nzTheme="outline"></span>
|
|
}
|
|
</button>
|
|
</div>
|
|
`, styles: ["/* src/app/pages/auth/auth.css */\n.auth-page {\n background-color: var(--bg);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n position: relative;\n}\n.auth-container {\n width: 100%;\n max-width: 360px;\n}\n.auth-logo {\n text-align: center;\n margin-bottom: 40px;\n}\n.logo-icon {\n width: 64px;\n height: 64px;\n background-color: var(--primary);\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n font-size: 28px;\n color: var(--primary-fg);\n}\n.logo-title {\n font-size: 28px;\n font-weight: 800;\n color: var(--text);\n margin: 0 0 8px;\n letter-spacing: -0.5px;\n}\n.logo-subtitle {\n font-size: 14px;\n color: var(--text-muted);\n margin: 0;\n}\n.auth-form {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 20px;\n}\n.input-group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n}\n.input-icon {\n position: absolute;\n left: 14px;\n color: var(--text-muted);\n font-size: 16px;\n z-index: 1;\n}\n.auth-input {\n width: 100%;\n background-color: var(--card);\n border: 1.5px solid var(--border);\n border-radius: 12px;\n padding: 14px 14px 14px 42px;\n color: var(--text);\n font-size: 15px;\n outline: none;\n transition: border-color 0.2s;\n}\n.auth-input:focus {\n border-color: #1abc9c;\n}\n.auth-input::placeholder {\n color: var(--text-muted);\n}\n.field-error {\n font-size: 12px;\n color: #ff4d4f;\n padding-left: 4px;\n}\n.auth-btn {\n width: 100%;\n background-color: var(--primary);\n color: var(--primary-fg);\n border: none;\n border-radius: 12px;\n padding: 16px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n margin-top: 4px;\n transition: opacity 0.2s;\n}\n.auth-btn:hover:not(:disabled) {\n opacity: 0.85;\n}\n.auth-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.auth-switch {\n text-align: center;\n font-size: 14px;\n color: var(--text-muted);\n}\n.switch-btn {\n background: none;\n border: none;\n color: #1abc9c;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n padding: 0;\n margin-left: 4px;\n text-decoration: underline;\n}\n.theme-toggle {\n position: fixed;\n bottom: 24px;\n right: 24px;\n width: 44px;\n height: 44px;\n background-color: var(--card);\n border: 1px solid var(--border);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-size: 18px;\n color: var(--text);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s;\n}\n.theme-toggle:hover {\n transform: scale(1.1);\n}\n/*# sourceMappingURL=auth.css.map */\n"] }]
|
|
}], null, null);
|
|
})();
|
|
(() => {
|
|
(typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(AuthPage, { className: "AuthPage", filePath: "src/app/pages/auth/auth.ts", lineNumber: 16 });
|
|
})();
|
|
|
|
// src/app/pages/auth/auth.routes.ts
|
|
var AUTH_ROUTES = [
|
|
{ path: "", component: AuthPage }
|
|
];
|
|
export {
|
|
AUTH_ROUTES
|
|
};
|
|
//# sourceMappingURL=chunk-IOBMADH6.js.map
|