You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
174 lines
11 KiB
HTML
174 lines
11 KiB
HTML
<div class="card">
|
|
<div class="well d-flex flex-column justify-content-center">
|
|
<p class="h5 text-center mb-4">Sign up</p>
|
|
<p class="text-center mb-4" style="padding-top: 2%;">Êtes-vous <strong>Parrain</strong> ou <strong>Commercant</strong> ?</p>
|
|
|
|
<label>
|
|
<form class="form-inline d-flex flex-row justify-content-center">
|
|
<div class="md-form" style="padding-left: 2%;">
|
|
<input name="group2" type="radio" class="with-gap" id="parrain" (click)="ngOnDestroy()" value="Parrain" [(ngModel)]="currentUser.status">
|
|
<label for="parrain">Parrain</label>
|
|
</div>
|
|
<div class="md-form" style="padding-left: 5%;">
|
|
<input name="group2" type="radio" class="with-gap" id="commercant" (click)="ngOnDestroy()" value="Commercant" [(ngModel)]="currentUser.status">
|
|
<label for="commercant">Commercant</label>
|
|
</div>
|
|
</form>
|
|
</label>
|
|
<!--Si cest un parrain-->
|
|
<div class="wow fadeInUp" *ngIf="currentUser.status === 'Parrain'">
|
|
<form (keydown)="keyDownFunctionParrain($event)">
|
|
<div class="md-form">
|
|
<i class="fa fa-user prefix grey-text"></i>
|
|
<input type="text" id="orangeForm-Familyname" [(ngModel)]="parrain.familyname" placeholder="Nom de famille" name="familyname">
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-user prefix grey-text"></i>
|
|
<input type="text" id="orangeForm-Firstname" [(ngModel)]="parrain.firstname" placeholder="Prénom" name="firstname">
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-file-picture-o prefix grey-text"></i>
|
|
<input type="file" id="orangeForm-File" accept="image/jpeg, image/png" name="file" (click)="fileOKPar()" style="padding-top: 1%;">
|
|
</div>
|
|
<form class="form-inline">
|
|
<div class="md-form">
|
|
<i class="fa fa-venus-mars prefix grey-text"></i>
|
|
<input name="group3" type="radio" class="with-gap" id="homme" value="Homme" [(ngModel)]="parrain.sex">
|
|
<label for="homme">Homme</label>
|
|
</div>
|
|
<div class="md-form" style="padding-left: 2%;">
|
|
<input name="group3" type="radio" class="with-gap" id="femme" value="Femme" [(ngModel)]="parrain.sex">
|
|
<label for="femme">Femme</label>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="md-form birthdayPar">
|
|
<i class="fa fa-birthday-cake prefix grey-text"></i>
|
|
<input type="date" id="orangeForm-Birthday" class="col-md-2" [(ngModel)]="parrain.birthday" placeholder="Date de naissance" required min="minDateTimeTest" max="maxDateTimeTest" name="birthday" #birthday="ngModel">
|
|
<div *ngIf="(validationBirthdayParrain()) && (birthday.dirty || birthday.touched)" class="alert alert-danger">
|
|
Votre date de naissance doit être comprise entre <strong><i>01/01/1917 et 01/01/2117</i></strong>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md-form">
|
|
<i class="fa fa-tty prefix grey-text"></i>
|
|
<input type="tel" id="orangeForm-Username" required pattern=".{9,}\w[0-9]*" [(ngModel)]="parrain.telephone" placeholder="Téléphone" name="telephone" #telephone="ngModel">
|
|
<div *ngIf="telephone.errors && telephone.errors.pattern && (telephone.dirty || telephone.touched)" class="alert alert-danger">
|
|
Votre <strong>téléphone</strong> doit avoir 10 chiffres au minimum
|
|
</div>
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-envelope prefix grey-text"></i>
|
|
<input type="email" id="orangeForm-email" [(ngModel)]="parrain.email" placeholder="Email" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
|
|
<div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)" class="alert alert-danger">
|
|
Votre <strong>email</strong> est requis et doit avoir ce format : <strong><i>john@parrain.fr</i></strong>.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix grey-text"></i>
|
|
<input id="orangeForm-pass" type="password" [(ngModel)]="parrain.password" placeholder="Mot de passe" name="password" #password= "ngModel" required minlength="5">
|
|
<div *ngIf="password.errors && (password.dirty || password.touched)" class="alert alert-danger">
|
|
Votre <strong>mot de passe</strong> doit avoir 5 caractères au minimum.
|
|
</div>
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix grey-text"></i>
|
|
<input id="orangeForm-passC" type="password" [(ngModel)]="ConfirmPasswordParrain" placeholder="Confirmer votre mot de passe" name="confirmPassword" #confirmPassword="ngModel">
|
|
<div *ngIf="(parrain.password != ConfirmPasswordParrain) && (confirmPassword.touched)" class="alert alert-danger">
|
|
Ecrivez le même <strong><i>mot de passe</i></strong>.
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<input type="file" name="file-1[]" id="orangeForm-File" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
|
|
<label class="waves-effect" for="orangeForm-File"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choisir image</span></label>
|
|
-->
|
|
<label>
|
|
En cliquant sur Créer un compte, vous acceptez nos Conditions
|
|
et indiquez que vous aves lu notre Politique d'utilisation des
|
|
données, y compris notre Utilisation des cookies.
|
|
</label>
|
|
<div class="text-center" style="margin-top:5%">
|
|
<button class="btn btn-deep-orange" [disabled]="filePar || !birthday.touched || (birthday.touched && validationBirthdayParrain()) || email.errors || password.errors || (parrain.password != ConfirmPasswordParrain) || parrain.familyname == '' || parrain.firstname == '' || parrain.sex == '' || test" (click)="register()">S'inscrire</button>
|
|
<!--<button class="btn btn-cyan" (click)="loadHomeComponent()">Back</button>-->
|
|
<div *ngIf="echecRegisterPar" class="alert alert-danger">
|
|
Erreur: Un compte avec cet <strong>email</strong> existe déjà.
|
|
</div>
|
|
<div *ngIf="(echecRegisterCom !== true) && test" class="alert alert-success">
|
|
<strong><i>{{parrain.familyname}} {{parrain.firstname}}, </i></strong> votre compte à bien été créé, un email de validation vient de vous être envoyé à l'adresse <strong><i>{{parrain.email}}</i></strong> !
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--Fin Si cest un parrain-->
|
|
|
|
<!--Si cest un commercant-->
|
|
<div class="wow fadeInUp" *ngIf="currentUser.status === 'Commercant'">
|
|
<form (keydown)="keyDownFunctionCommercant($event)">
|
|
<div class="md-form">
|
|
<i class="fa fa-institution prefix grey-text"></i>
|
|
<input type="text" id="orangeForm-Familyname" [(ngModel)]="commercant.raisonSociale" placeholder="Raison sociale" name="raisonSociale">
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-user prefix grey-text"></i>
|
|
<input type="text" id="orangeForm-Firstname" [(ngModel)]="commercant.commercialName" placeholder="Nom de l'entreprise" name="commercialName">
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-file-picture-o prefix grey-text"></i>
|
|
<input type="file" id="orangeForm-File" accept="image/jpeg, image/png" (click)="fileOKCom()" required style="padding-top: 1%;">
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-info prefix grey-text"></i>
|
|
<input type="number" id="orangeForm-Username" [(ngModel)]="commercant.siret" placeholder="Siret" required pattern=".{13,}" minlength="14" name="siret" #siret="ngModel">
|
|
<div *ngIf="siret.errors && siret.errors.pattern && (siret.dirty || siret.touched)" class="alert alert-danger">
|
|
Votre <strong>siret</strong> doit avoir 14 chiffres au minimum.
|
|
</div>
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-envelope prefix grey-text"></i>
|
|
<input type="email" id="orangeForm-email" [(ngModel)]="commercant.email" placeholder="Email" name="email" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" #email="ngModel">
|
|
<div *ngIf="email.errors && email.errors.pattern && (email.dirty || email.touched)" class="alert alert-danger">
|
|
Votre <strong>email</strong> est requis et doit avoir ce format : <strong><i>john@commercant.fr</i></strong>.
|
|
</div>
|
|
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix grey-text"></i>
|
|
<input id="orangeForm-pass" type="password" [(ngModel)]="commercant.password" placeholder="Mot de passe" name="password" #password= "ngModel" required minlength="5">
|
|
<div *ngIf="password.errors && (password.dirty || password.touched)" class="alert alert-danger">
|
|
Votre <strong>mot de passe</strong> doit avoir 5 caractères au minimum.
|
|
</div>
|
|
</div>
|
|
<div class="md-form">
|
|
<i class="fa fa-lock prefix grey-text"></i>
|
|
<input id="orangeForm-passC" type="password" [(ngModel)]="ConfirmPasswordCommercant" placeholder="Confirmer votre mot de passe" name="confirmPassword" #confirmPassword="ngModel">
|
|
<div *ngIf="(commercant.password != ConfirmPasswordCommercant) && (confirmPassword.touched)" class="alert alert-danger">
|
|
Ecrivez le même <strong><i>mot de passe</i></strong>.
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<input type="file" name="file-1[]" id="orangeForm-File" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
|
|
<label class="waves-effect" for="orangeForm-File"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Choisir image</span></label>
|
|
-->
|
|
<label>
|
|
En cliquant sur Créer un compte, vous acceptez nos Conditions
|
|
et indiquez que vous aves lu notre Politique d'utilisation des
|
|
données, y compris notre Utilisation des cookies.
|
|
</label>
|
|
<div class="text-center" style="margin-top:5%">
|
|
<button class="btn btn-deep-orange" [disabled]="fileCom || email.errors || password.errors || siret.errors || commercant.raisonSociale == '' || commercant.commercialName == '' || (commercant.password != ConfirmPasswordCommercant) || test" (click)="register()">S'inscrire</button>
|
|
<!--<button class="btn btn-cyan" (click)="loadHomeComponent()">Back</button>-->
|
|
<div *ngIf="echecRegisterCom" class="alert alert-danger">
|
|
Erreur: Un compte avec cet <strong>email</strong> existe déjà.
|
|
</div>
|
|
<div *ngIf="test && (echecRegisterCom !== true)" class="alert alert-success">
|
|
<strong><i>{{commercant.commercialName}}, </i></strong> votre compte à bien été créé, un email de validation vient de vous être envoyé à l'adresse <strong><i>{{commercant.email}}</i></strong> !
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--Fin Si cest un commercant-->
|
|
</div>
|
|
</div>
|