File
Implements
Methods
|
connexionlogin
|
connexionlogin()
|
|
|
|
|
|
getErrorAuth
|
getErrorAuth()
|
|
|
|
|
|
getErrorMessage
|
getErrorMessage()
|
|
|
|
Returns : "Impossible de trouver votre compte Beasy" | "" | "Adresse e-mail non valide"
|
|
email
|
Default value : new FormControl('', [Validators.required, Validators.email])
|
|
|
|
form
|
Type : any
|
Default value : {
email: '',
password: '',
}
|
|
|
|
hide
|
Default value : true
|
|
|
|
images
|
Type : []
|
Default value : [
{
imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
imageAlt: 'nature1',
},
{
imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
imageAlt: 'nature1',
},
]
|
|
|
|
isActive
|
Default value : false
|
|
|
|
msgAuth
|
Type : string
|
Default value : ''
|
|
|
|
password
|
Default value : new FormControl('', [Validators.required])
|
|
|
|
Private
router
|
Default value : inject(Router)
|
|
|
import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
FormControl,
FormsModule,
ReactiveFormsModule,
Validators,
} from '@angular/forms';
import { CarouselComponent } from '../../../shared/carousel/carousel.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { Router, RouterLink } from '@angular/router';
@Component({
selector: 'bgui-login-standard-user',
standalone: true,
imports: [
CommonModule,
CarouselComponent,
MatFormFieldModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
RouterLink,
FormsModule,
],
templateUrl: './login-standard-user.component.html',
styleUrls: ['./login-standard-user.component.scss'],
})
export class LoginStandardUserComponent implements OnInit {
images = [
{
imageSrc: './assets/images/carousel-auth/orange-with-variant.png',
imageAlt: 'nature1',
},
{
imageSrc: './assets/images/carousel-auth/silver-modern-with-variant.png',
imageAlt: 'nature1',
},
];
email = new FormControl('', [Validators.required, Validators.email]);
password = new FormControl('', [Validators.required]);
form: any = {
email: '',
password: '',
};
getErrorMessage() {
if (this.email.hasError('required')) {
return 'Impossible de trouver votre compte Beasy';
}
return this.email.hasError('email') ? 'Adresse e-mail non valide' : '';
}
getErrorAuth() {
this.msgAuth = '';
}
hide = true;
isActive = false;
msgAuth = '';
private router = inject(Router);
// constructor(private router:Router) {
// //...
// }
// eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
ngOnInit(): void {
//...
}
onSubmit(): void {
console.log(this.form);
this.connexionlogin();
}
connexionlogin() {
//console.log("Nous sommes ici");
if (
this.form.email === 'mrfrancice@gmail.com' &&
this.form.password === 'p@ssw0rd'
) {
localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('token', this.form.email);
// Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
console.log("Redirection vers 'dash'");
this.router.navigate(['/admin']);
//window.location.href = '/';
} else {
this.router.navigate(['/auth']);
this.msgAuth = 'Login ou PassWord incorrect...';
}
}
// deconnxionlogin()
// {
// localStorage.setItem('isLoggedIn', "false");
// localStorage.removeItem('token');
// // // Remplacez 'page-accueil' par l'URL de la page à laquelle vous souhaitez rediriger
// // console.log("Redirection vers 'dash'");
// // this.router.navigate(['/admin']);
// // //window.location.href = '/';
// }
}
<section class="fxt-template-animation fxt-template-layout20 imagedefont">
<div class="container">
<div
[class.mat-elevation-z1]="!isActive"
class="row fxt-bg-color fxt-templateshadow-01">
<div class="col-xl-7 col-lg-6 col-12 fxt-none-991 fxt-bg-img">
<bgui-carousel [images]="images" [autoSlide]="true"></bgui-carousel>
</div>
<div class="col-xl-5 col-lg-6 col-12">
<div class="fxt-content">
<div class="fxt-header">
<a href="#" class="fxt-logo"
><img
src="/assets/images/logo/logo-text-beasy.svg"
height="70"
alt="Logo"
/></a>
<h2>Bienvenue!</h2>
<p>Se connecter avec son compte</p>
<p style="color: red">{{ msgAuth }}</p>
<ul class="fxt-socials"></ul>
</div>
<div class="fxt-form">
<form
name="form"
#f="ngForm"
(ngSubmit)="f.form.valid && onSubmit()">
<div class="form-group">
<div class="fxt-transformY-50 fxt-transition-delay-1">
<mat-form-field class="gui-form-width" appearance="fill">
<mat-label>Identifiant</mat-label>
<input
(click)="getErrorAuth()"
matInput
placeholder="pat@example.com"
name="email"
[(ngModel)]="form.email"
required />
<!-- <mat-error *ngIf="email.invalid" >{{
getErrorMessage()
}}</mat-error> -->
</mat-form-field>
</div>
<div
class="form_error"
style="color: red"
*ngIf="
email.errors &&
f.submitted &&
email.touched &&
email.invalid
">
<div *ngIf="form.errors?.required">Email est Requis!</div>
</div>
</div>
<div class="form-group">
<div class="fxt-transformY-50 fxt-transition-delay-2">
<mat-form-field class="gui-form-width" appearance="fill">
<mat-label>Mot de passe</mat-label>
<input
matInput
[type]="hide ? 'password' : 'text'"
id="password"
name="password"
[(ngModel)]="form.password"
required
minlength="8" />
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide">
<mat-icon>{{
hide ? 'visibility_off' : 'visibility'
}}</mat-icon>
</button>
</mat-form-field>
</div>
<div class="form_error" style="color: red" *ngIf="f.submitted">
<div *ngIf="form.password.errors?.required">
Le mot de passe est obligatoire
</div>
<div *ngIf="form.password.errors?.minlength">
Le mot de passe doit contenir au moins 8 caractères
</div>
</div>
</div>
<div class="form-group">
<div class="fxt-transformY-50 fxt-transition-delay-3">
<div class="fxt-checkbox-area">
<div class="checkbox">
<mat-checkbox class="caption"
>Se souvenir de moi</mat-checkbox
>
</div>
<a href="auth/forgot-password" class="switcher-text"
>Mot de passe oublié?</a
>
</div>
</div>
</div>
<div class="form-group m-b-125">
<div class="fxt-transformY-50 fxt-transition-delay-4">
<button
(click)="connexionlogin()"
[disabled]="f.invalid"
[disabled]="!password"
mat-raised-button
shape-semi-round
color="primary"
class="w-100">
Connectez-vous
</button>
</div>
<!-- <div>
<div>Email:{{ form.email }}</div>
<div>passe:{{ form.password }}</div>
</div> -->
</div>
</form>
</div>
<div class="fxt-footer">
<div class="fxt-transformY-50 fxt-transition-delay-5">
<p>
Nouveau sur notre plateforme?<a
href="auth/register"
class="switcher-text2 inline-text"
>Créer un compte</a
>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
*{
font-family: 'Roboto';
}
.fxt-template-layout20 {
min-height: 100vh;
background-color: rgb(244, 246, 248);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
@media only screen and (max-width: 991px) {
padding: 15px;
}
@media only screen and (min-width: 1380px) {
.container {
max-width: 958.5px;
}
}
.fxt-checkbox-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.bgui-bg-color-grey {
background-color: #F4F5F7;
}
.fxt-bg-color {
background-color: #ffffff;
padding: 0;
}
.fxt-bg-img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 0;
padding: 15px;
}
.fxt-content {
border-radius: 15px 15px 15px 15px;
padding: 25px 10px 25px 0px;
width: 100%;
/* -webkit-box-shadow: 3px 0 79px 0 rgba(#000, 0.08);
box-shadow: 3px 0 79px 0 rgba(#000, 0.08);*/
@media only screen and (max-width: 1199px) {
padding: 100px 35px 70px 50px;
}
@media only screen and (max-width: 991px) {
padding: 100px 70px 70px 70px;
}
@media only screen and (max-width: 767px) {
padding: 80px 50px 50px 50px;
}
@media only screen and (max-width: 575px) {
padding: 60px 30px 30px 30px;
}
@media only screen and (max-width: 479px) {
padding: 50px 20px 20px 20px;
}
}
.fxt-templateshadow-01 {
border-radius: 15px;
width: 100%;
/* -webkit-box-shadow: 3px 0 79px 0 rgb(0 0 0 / 8%);
box-shadow: 3px 0 79px 0 rgb(0 0 0 / 8%);*/
}
.fxt-header {
text-align: left;
}
.fxt-logo {
display: block;
margin-bottom: 27px;
margin-left: auto;
margin-right: auto;
max-width: 40vw;
}
.fxt-form {
h2 {
text-align: center;
font-weight: 700;
margin-bottom: 25px;
}
.fxt-otp-logo {
margin-bottom: 20px;
display: block;
text-align: center;
}
.fxt-otp-label {
margin-bottom: 15px;
font-size: 18px;
font-weight: 500;
text-align: center;
width: 100%;
}
p {
font-size: 18px;
color: #111111;
text-align: center;
span {
display: block;
}
}
.form-group {
position: relative;
z-index: 1;
margin-bottom: 0.5rem;
}
.m-b-125 {
margin-bottom: 1.25rem;
}
.form-control {
min-height: 50px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #e7e7e7;
padding: 10px 15px;
color: #111111;
}
input::-webkit-input-placeholder {
color: #a1a1a1;
font-size: 15px;
font-weight: 300;
}
input::-moz-placeholder {
color: #a1a1a1;
font-size: 15px;
font-weight: 300;
}
input:-moz-placeholder {
color: #a1a1a1;
font-size: 15px;
font-weight: 300;
}
input:-ms-input-placeholder {
color: #a1a1a1;
font-size: 15px;
font-weight: 300;
}
.fxt-form-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px;
.fxt-form-col {
padding: 10px 5px;
text-align: center;
margin-right: 10px;
flex-basis: 0;
flex-grow: 1;
&:last-child {
margin-right: 0;
}
}
}
.fxt-form-btn {
margin-bottom: 10px;
}
}
.mat-form-field-appearance-fill .mat-form-field-flex {
border-radius: 8px 8px 0 0 !important;
padding: 0.4em 0.75em 0 0.75em !important;
}
.mat-raised-button{
line-height: 40px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
width: 100%;
margin-bottom: 10px;
}
.fxt-btn-fill {
font-family: 'Roboto', sans-serif;
cursor: pointer;
display: inline-block;
font-size: 17px;
font-weight: 500;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border: 0;
color: #fff;
border-radius: 3px;
background-color: #6b79fd;
padding: 10px 36px;
margin-bottom: 10px;
width: 100%;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&:hover {
background-color: #4f5fec;
border-color: #4f5fec;
}
&:focus {
outline: none;
}
}
.switcher-text {
font-size: 12px;
margin-bottom: 5px;
display: block;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&:hover {
color: #000000;
}
}
.switcher-text2 {
font-size: 15px;
display: inline-block;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
&.inline-text {
margin-left: 3px;
}
&:hover {
color: #000000;
}
}
.fxt-style-line {
overflow: hidden;
text-align: center;
h2 {
text-align: center;
font-weight: 300;
margin-bottom: 30px;
font-size: 20px;
color: #a4a4a4;
display: inline-block;
position: relative;
padding: 0 25px;
z-index: 1;
&:before {
display: inline-block;
content: "";
height: 1px;
width: 100%;
background-color: #ebebeb;
left: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
z-index: 1;
}
&:after {
display: inline-block;
content: "";
height: 1px;
width: 100%;
background-color: #ebebeb;
right: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
z-index: 1;
}
}
}
ul.fxt-socials {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: -5px;
margin-left: -5px;
margin-bottom: 20px;
li {
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
@media only screen and (max-width: 575px) {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
@media only screen and (max-width: 350px) {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
a {
border-radius: 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: flex-start;
-ms-flex-pack: flex-start;
justify-content: flex-start;
font-size: 14px;
height: 45px;
color: #ffffff;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
i {
border-radius: 2px 0 0 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 45px;
height: 45px;
}
span {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
}
li.fxt-facebook {
a {
i {
background-color: #4867aa;
}
&:hover {
background-color: #5676bb;
}
}
}
li.fxt-twitter {
a {
i {
background-color: #33ccff;
}
&:hover {
background-color: #3dc5f3;
}
}
}
li.fxt-google {
a {
i {
background-color: #db4437;
}
&:hover {
background-color: #e75042;
}
}
}
}
.checkbox {
padding-left: 5px;
margin-right: 30px;
margin-bottom: 5px;
label {
padding-left: 20px;
color: #a4a4a4;
margin-bottom: 0;
font-size: 12px;
position: relative;
&:before {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 4px;
left: 0;
margin-left: -5px;
border: 1px solid;
border-color: #dcdcdc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&:after {
position: absolute;
margin-left: -20px;
padding-left: 3px;
font-size: 10px;
color: #555555;
}
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked+label::after {
font-family: 'Font Awesome 5 Free';
content: "\f00c";
font-weight: 900;
color: #ffffff;
left: 15px;
top: 4px;
}
input[type="checkbox"]:checked+label::before {
background-color: #6b79fd;
border-color: #6b79fd;
}
}
.fxt-footer {
text-align: center;
.fxt-resend-wrap {
margin-bottom: 10px;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
font-size: 18px;
width: 100%;
}
.fxt-btn-resend {
margin-left: 3px;
box-shadow: none;
border: 0;
background-color: transparent;
cursor: pointer;
padding: 0;
text-decoration: underline;
transition: all 0.3s ease-in-out;
&:focus {
outline: none;
}
&:hover {
color: #000000;
}
}
.text-or {
margin-left: 3px;
color: #000000;
}
}
.gui-form-width {
display: block;
}
}
Legend
Html element with directive