Commit 919c7070 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Add regex for firstname and lastname, add two different behavior to access...

Add regex for firstname and lastname, add two different behavior to access contact form, back button, remove lazy loading as it creates an error
parent 86116113
......@@ -3,10 +3,10 @@ import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AppRoutes } from './routes';
export const routes: Routes = [
{
path: AppRoutes.research.uri,
loadChildren: './geosource/geosource.module#GeosourceModule',
},
// {
// path: AppRoutes.research.uri,
// loadChildren: './geosource/geosource.module#GeosourceModule',
// },
];
@NgModule({
......
......@@ -15,7 +15,8 @@
<div class="field">
<label class="label" for="lastname" i18n="@@contact.lastname">Lastname</label>
<p class="control has-icons-right">
<input id="lastname" class="input" type="text" formControlName="lastname" [ngClass]="{'is-danger': fieldIsInvalid('lastname'), 'is-success': fieldIsValid('lastname')}">
<input id="lastname" class="input" type="text" formControlName="lastname" (keyup)="toUppercase('lastname')"
[ngClass]="{'is-danger': fieldIsInvalid('lastname'), 'is-success': fieldIsValid('lastname')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('lastname')">
<i class="fas fa-check-circle"></i>
</span>
......@@ -28,13 +29,17 @@
<div *ngIf="form.controls['lastname'].errors.required" i18n="@@contact.errors.missingLastname">
You must indicate a lastname.
</div>
<div *ngIf="form.controls['lastname'].errors.pattern" i18n="@@contact.errors.lastnamePattern">
Special characters are forbidden.
</div>
</div>
</div>
<div class="field">
<label class="label" for="firstname" i18n="@@contact.firstname">Firstname</label>
<p class="control has-icons-right">
<input id="firstname" class="input" type="text" formControlName="firstname" [ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}">
<input id="firstname" class="input" type="text" (keyup)="toUppercase('firstname')" formControlName="firstname"
[ngClass]="{'is-danger': fieldIsInvalid('firstname'), 'is-success': fieldIsValid('firstname')}">
<span class="icon is-small is-right has-text-success" *ngIf="fieldIsValid('firstname')">
<i class="fas fa-check-circle"></i>
</span>
......@@ -47,6 +52,9 @@
<div *ngIf="form.controls['firstname'].errors.required" i18n="@@contact.errors.missingFirstname">
You must indicate a firstname.
</div>
<div *ngIf="form.controls['lastname'].errors.pattern" i18n="@@contact.errors.firstnamePattern">
Special characters are forbidden.
</div>
</div>
</div>
......@@ -77,7 +85,8 @@
<label class="label" for="emailConfirmation" i18n="@@contact.emailConfirmation">Confirm your email
address</label>
<p class="control has-icons-right">
<input blockCopyPaste id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation" [ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
<input blockCopyPaste id="emailConfirmation" class="input" type="email" formControlName="emailConfirmation"
[ngClass]="{'is-danger': emailConfirmationError || fieldIsInvalid('emailConfirmation'), 'is-success': !emailConfirmationError && fieldIsValid('emailConfirmation')}">
<span class="icon is-small is-right has-text-success" *ngIf="!emailConfirmationError && fieldIsValid('emailConfirmation')">
<i class="fas fa-check-circle"></i>
</span>
......@@ -114,16 +123,18 @@
<label class="label" [for]="subjectLabelFor" i18n="@@contact.subject">Subject</label>
<div class="dropdown" [ngClass]="{'is-active': subjectDropdownState}" (clickOutside)="closeSubjectDropdown()">
<div class="dropdown-trigger" (click)="toggleSubject()">
<button id="subjectDropdown" type="button" class="button" aria-haspopup="true" aria-controls="dropdown-menu" [disabled]="formDisabled">
<button id="subjectDropdown" type="button" class="button" aria-haspopup="true" aria-controls="dropdown-menu"
[disabled]="formDisabled">
<span>{{ selectedSubject !== null && selectedSubject.value !== null ? selectedSubject.value : '---'}}</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<ul class="dropdown-content">
<li class="dropdown-item" *ngFor="let sub of subjects" (keydown.enter)="setSubject(sub)" (click)="setSubject(sub)" tabindex=0>
<li class="dropdown-item" *ngFor="let sub of subjects" (keydown.enter)="setSubject(sub)" (click)="setSubject(sub)"
tabindex=0>
{{ sub.value }}
</li>
</ul>
......@@ -167,7 +178,9 @@
</div>
<div class="has-text-right button-wrapper">
<button type="submit" class="button is-primary" [ngClass]="{'is-loading': formDisabled}" [disabled]="formIsInvalid() || formDisabled" i18n="@@contact.send">Send</button>
<button class="button button-gl is-outlined" type="button" [disabled]="formDisabled" (click)="cancel()" i18n="@@contact.cancel">Cancel</button>
<button type="submit" class="button button-gl" [ngClass]="{'is-loading': formDisabled}" [disabled]="formIsInvalid() || formDisabled"
i18n="@@contact.send">Send</button>
</div>
</div>
</div>
......
......@@ -56,6 +56,14 @@ h3 {
cursor: pointer;
background-color: lightgrey;
}
.button-gl {
width:8rem;
&:first-of-type {
margin-right: 1.25rem;
}
}
}
.title-label.is-danger {
......
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { EmailService, NotificationService } from '../../services';
import { EmailService, NotificationService, NavigationHistoryService } from '../../services';
import { Email } from '../../models';
import { subjects as Subjects, feedbackMessages } from '../../../../i18n/contact/contact';
import { Router, ActivatedRoute } from '@angular/router';
import { AppRoutes } from '../../../routes';
@Component({
selector: 'app-contact',
......@@ -15,17 +17,24 @@ export class ContactComponent implements OnInit {
subjectDropdownState = false;
subjects: Subject[] = Subjects; // Keep this line in order to access the subjects in the html template
selectedSubject: Subject = null;
displaySubjectInput = false;
constructor(
private _fb: FormBuilder,
private _emailService: EmailService,
private _notificationService: NotificationService,
private _navigationHistoryService: NavigationHistoryService,
private _router: Router,
private _route: ActivatedRoute,
) {
this.form = this._fb.group(
{
firstname: ['', [Validators.required]],
lastname: ['', Validators.required],
firstname: ['', [
Validators.required,
Validators.pattern('([A-ZÀ-ÖØ-Ý][a-zà-öø-ýÿA-ZÀ-ÖØ-Ý]*)([ \'-][a-zA-ZÀ-ÖØ-öø-ýÿ]*)*'),
]],
lastname: ['', [Validators.required,
Validators.pattern('([A-ZÀ-ÖØ-Ý][a-zà-öø-ýÿA-ZÀ-ÖØ-Ý]*)([ \'-][a-zA-ZÀ-ÖØ-öø-ýÿ]*)*'),
]],
email: ['', [Validators.required, Validators.email]],
emailConfirmation: ['', [Validators.required, Validators.email]],
subject: ['', Validators.required],
......@@ -33,32 +42,43 @@ export class ContactComponent implements OnInit {
});
}
ngOnInit() {}
ngOnInit() {
this._route.queryParams.subscribe((params) => {
if (params.subject) {
this.selectedSubject = this.subjects.find(sub => sub.key === 'other');
this.form.controls.subject.patchValue(params.subject);
} else {
this.selectedSubject = null;
}
});
}
send() {
const email = new Email(this.form.value);
this.form.disable();
this._emailService.send(email).subscribe(
(res) => {
this.form.enable();
this._notificationService.notify(
{
type: 'success',
message: feedbackMessages.success,
},
);
this.form.reset();
},
(err) => {
this.form.enable();
this._notificationService.notify(
{
type: 'error',
message: feedbackMessages.error,
},
);
},
);
if (!this.formIsInvalid) {
const email = new Email(this.form.value);
this.form.disable();
this._emailService.send(email).subscribe(
(res) => {
this.form.enable();
this._notificationService.notify(
{
type: 'success',
message: feedbackMessages.success,
},
);
this.form.reset();
},
(err) => {
this.form.enable();
this._notificationService.notify(
{
type: 'error',
message: feedbackMessages.error,
},
);
},
);
}
}
get emailConfirmationIsCorrect(): boolean {
......@@ -107,10 +127,17 @@ export class ContactComponent implements OnInit {
if (this.selectedSubject.key === 'other') {
this.form.controls.subject.patchValue('');
this.form.controls.subject.reset();
this.displaySubjectInput = true;
} else {
this.form.controls.subject.patchValue(this.selectedSubject.value);
this.displaySubjectInput = false;
}
}
cancel() {
const previous = this._navigationHistoryService.getFromLast(1);
if (previous !== null) {
this._router.navigateByUrl(previous);
} else {
this._router.navigateByUrl(AppRoutes.home.uri);
}
}
......@@ -121,6 +148,16 @@ export class ContactComponent implements OnInit {
get formDisabled(): boolean {
return this.form.disabled;
}
get displaySubjectInput(): boolean {
return (this.selectedSubject && this.selectedSubject.key) === 'other' ? true : false;
}
toUppercase(controlName: string) {
const input = this.form.controls[controlName].value;
const uppercased = input.substring(0, 1).toUpperCase() + input.substring(1);
this.form.controls[controlName].patchValue(uppercased);
}
}
interface Subject {
......
......@@ -47,7 +47,8 @@
{{ generalInfo['parent'].keyTitle }}
</div>
<div class="column is-10 is-size-7 even">
<a [routerLink]="['/', AppRoutes.research.uri, AppRoutes.datasets.uri, generalInfo['parent'].uuid]">{{ generalInfo['parent'].title }}</a>
<a [routerLink]="['/', AppRoutes.research.uri, AppRoutes.datasets.uri, generalInfo['parent'].uuid]">{{
generalInfo['parent'].title }}</a>
</div>
</ng-container>
</div>
......@@ -85,8 +86,14 @@
</ng-container>
</div>
</div>
<div class="contact">
<div class="columns is-marginless">
<div class="column is-12 title is-size-7">
Vous avez des questions sur ce jeu de données? <a class="link-red" [routerLink]="['/', AppRoutes.contact.uri]" [queryParams]="{ subject: metadata.title }">Contactez-nous.</a>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
</ng-container>
\ No newline at end of file
......@@ -36,7 +36,7 @@ div.unitary-description:not(:first-of-type) {
}
.children , .general-info, .articles {
.children , .general-info, .articles, .contact {
.column {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
......
......@@ -6,7 +6,7 @@ import { AppRoutes } from '../routes';
export const routes: Routes = [
{
path: '',
path: AppRoutes.research.uri,
component: ResearchComponent,
data: {
title: AppRoutes.research.title,
......
......@@ -307,6 +307,10 @@
<source>You must indicate your lastname.</source>
<target>You must indicate your lastname.</target>
</trans-unit>
<trans-unit id="contact.errors.forbiddenCharacters" datatype="html">
<source>Special characters are forbidden.</source>
<target>Special characters are forbidden.</target>
</trans-unit>
<trans-unit id="contact.firstname" datatype="html">
<source>Firstname</source>
<target>Firstname</target>
......@@ -363,6 +367,10 @@
<source>Send</source>
<target>Send</target>
</trans-unit>
<trans-unit id="contact.cancel" datatype="html">
<source>Cancel</source>
<target>Cancel</target>
</trans-unit>
</body>
</file>
</xliff>
......@@ -3,7 +3,8 @@
// 2. Set your own initial variables
$main: #17252b;
$red: #d5232a;
$green: #04BA5B ;
$green: #04BA5B;
$dark-blue: #333745;
$app-background-color: rgb(252, 252, 252);
......
......@@ -154,4 +154,32 @@ a:hover {
}
}
.button-gl {
background: linear-gradient(to bottom, #ff6459, $red);
border-radius: 2px;
border-width: 0;
font-size: $size-6;
color: white;
text-transform: uppercase;
&:hover, &:focus {
color:white;
background: $red;
}
&.is-outlined {
border: 2px solid $dark-blue;
font-weight: bold;
color: $dark-blue;
background: transparent;
&:hover, &:focus {
border-color: $red;
}
}
}
.link-red {
color: $red;
text-decoration: underline;
}
@import "./scss/wordpress-style";
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment