sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added dynamic login page

Browse Source
This commit is contained in:
sanchezvem
2026-03-24 11:35:26 +01:00
parent 692e2aef82
commit d7a6d363f8
5 changed files with 106 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/sign-on-form/sign-on-form.component.html
+28
View File
@@ -0,0 +1,28 @@
<form [formGroup]="userForm">
<ion-item lines="none">
<ion-label position="stacked">Prénom</ion-label>
<ion-input placeholder="Prénom" formControlName="firstName"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Nom</ion-label>
<ion-input placeholder="Nom de famille" formControlName="name"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Pseudo</ion-label>
<ion-input placeholder="Nom d'utilisateur" formControlName="username"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Adresse email</ion-label>
<ion-input placeholder="Email" formControlName="email"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Mot de passe</ion-label>
<ion-input type="password" placeholder="MotDePasse1234" formControlName="password">
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
</ion-input>
</ion-item>
</form>
src/app/components/sign-on-form/sign-on-form.component.scss
+28
View File
@@ -0,0 +1,28 @@
/* Style global des items */
ion-item {
--background: #ffffff;
margin-bottom: 4px;
}
/* Label */
ion-label {
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
/* Input */
ion-input{
--padding-start: 10px;
--padding-end: 10px;
--padding-top: 0;
--padding-bottom: 0;
border: solid 1px #000;
border-radius: 10px;
font-size: 14px;
}
/* Button */
ion-button:active {
transform: scale(0.98);
}
src/app/components/sign-on-form/sign-on-form.component.ts
+22
View File
@@ -0,0 +1,22 @@
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {IonicModule} from "@ionic/angular";
@Component({
selector: 'app-sign-on-form',
templateUrl: './sign-on-form.component.html',
styleUrls: ['./sign-on-form.component.scss'],
imports: [
IonicModule,
ReactiveFormsModule
]
})
export class SignOnFormComponent {
userForm: FormGroup = new FormGroup({
firstName: new FormControl<string>(null, [Validators.required]),
name: new FormControl<string>(null, [Validators.required]),
username: new FormControl<string>(null, [Validators.required]),
email: new FormControl<string>(null, [Validators.required]),
password: new FormControl<string>(null, [Validators.required]),
})
}
src/app/pages/login/login.component.html
+14 -14
View File
@@ -1,28 +1,28 @@
<div class="flex flex-col items-center justify-center min-h-screen p-6 space-y-4">
<img src="BeReady.png" alt="BeReady-Logo" class="w-1/3 max-w-xs">
<!-- <p class="text-3xl font-extrabold text-center text-black">-->
<!-- BeReady-->
<!-- </p>-->
<p class="text-gray-500 text-sm text-center w-3/5 leading-snug relative">
Prêt à défier tes potes et prouver que t’es le meilleur ?
<img src="blob.svg" class="absolute -top-150 -left-50 -right-50 max-w-[200vw] -z-1">
</p>
<app-login-form class="mb-9"></app-login-form>
@if (authState()) {
<app-login-form class="mb-9"></app-login-form>
<ion-button class="w-10/12 mt-0 border-0" color="primary">
<p class="text-white font-bold m-0">Se connecter</p>
</ion-button>
<ion-button class="w-10/12 mt-0 border-0" color="primary">
<p class="text-white font-bold m-0">Se connecter</p>
</ion-button>
<div class="flex items-center w-10/12">
<div class="flex-1 border-b border-gray-400"></div>
<span class="px-2 text-gray-400 font-bold">ou</span>
<div class="flex-1 border-b border-gray-400"></div>
</div>
<div class="flex items-center w-10/12">
<div class="flex-1 border-b border-gray-400"></div>
<span class="px-2 text-gray-400 font-bold">ou</span>
<div class="flex-1 border-b border-gray-400"></div>
</div>
} @else {
<app-sign-on-form></app-sign-on-form>
}
<ion-button class="w-10/12 mt-0" color="secondary">
<ion-button class="w-10/12 mt-0" color="secondary" (click)="createAccount()">
<p class="text-black font-bold m-0">Créer un compte</p>
</ion-button>
</div>
src/app/pages/login/login.component.ts
+14 -7
View File
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import {Component, signal} from '@angular/core';
import {IonicModule} from "@ionic/angular";
import {LoginFormComponent} from "../../components/login-form/login-form.component";
import {SignOnFormComponent} from "../../components/sign-on-form/sign-on-form.component";
@Component({
selector: 'app-login',
@@ -8,13 +9,19 @@ import {LoginFormComponent} from "../../components/login-form/login-form.compone
styleUrls: ['./login.component.scss'],
imports: [
IonicModule,
LoginFormComponent
LoginFormComponent,
SignOnFormComponent
]
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {}
export class LoginComponent {
authState = signal<boolean>(true)
createAccount(): void {
if (this.authState()) {
this.authState.set(false);
}else
if (this.authState() == false) {
this.authState.set(true);
}
}
}