Initial commit
This commit is contained in:
+481
@@ -0,0 +1,481 @@
|
||||
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
|
||||
Reference in New Issue
Block a user