fixed loading spinner in parent-form. Also added loading where appropriate....

fixed loading spinner in parent-form. Also added loading where appropriate. Styled modal and applied reusability
parent 3ae81cb8
......@@ -43,7 +43,7 @@ function epal_mail($key, &$message, $params) {
switch ($key) {
case 'send_verification_code':
$message['from'] = \Drupal::config('system.site')->get('mail');
$message['subject'] = t('Email Confirmation Needed', $options);
$message['subject'] = t('Σύστημα υποβολής αιτήσεων εγγραφής σε ΕΠΑΛ: Επιβεβαίωση e-mail', $options);
$message['body'][] = $params['message'];
break;
}
......
......@@ -34,7 +34,7 @@ class CurrentUser extends ControllerBase
$container->get('entity_type.manager'),
$container->get('database'),
$container->get('logger.factory')
);
);
}
public function getLoginInfo(Request $request)
......@@ -59,7 +59,7 @@ class CurrentUser extends ControllerBase
], Response::HTTP_OK);
} else if ($userRole === 'applicant') {
break;
}
}
}
......@@ -174,7 +174,7 @@ class CurrentUser extends ControllerBase
$module = 'epal';
$key = 'send_verification_code';
$to = $email;
$params['message'] = 'verification code=' . $vc;
$params['message'] = 'Κωδικός επαλήθευσης=' . $vc;
$langcode = $user->getPreferredLangcode();
$send = true;
......
<div class = "loading" *ngIf="(epalUserData$ | async) === {}"></div>
<div class = "loading" *ngIf="(epalUserData$ | async).userEmail === '' || (showLoader | async) === true"></div>
<div id="emaiSentNotice" (onHidden)="onHidden()" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Αποστολή Κωδικού Επαλήθευσης</h4>
<div class="modal-header modal-header-success">
<h3 class="modal-title pull-left"><i class="fa fa-check-square-o"></i>&nbsp;&nbsp;{{ modalTitle | async }}</h3>
<button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
<span aria-hidden="true">&times;</span>
<span aria-hidden="true"><i class="fa fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<p>Έγινε αποστολή κωδικού επαλήθευσης στη διεύθυνση που δηλώσατε</p>
<p><strong>Ελέγξτε το email σας!</strong> Αντιγράψτε τον κωδικό που σας στείλαμε εδώ και επιλέξτε "Αποστολή Κωδικού Επαλήθευσης"</p>
<p>{{ modalText | async }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Κλείσιμο</button>
</div>
</div>
</div>
</div>
<div style="min-height: 500px; margin-bottom: 30px;">
<form [formGroup]="formGroup">
<div class="form-group">
......@@ -122,3 +124,4 @@
</div>
</div>
</form>
</div>
import { Component, OnInit, OnDestroy, Injectable, ViewChild, ElementRef, Renderer } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs/Rx';
import { BehaviorSubject, Subscription, Observable } from 'rxjs/Rx';
import { VALID_EMAIL_PATTERN, VALID_NAMES_PATTERN } from '../../constants';
import { HelperDataService } from '../../services/helper-data-service';
......@@ -26,6 +26,9 @@ import {AppSettings} from '../../app.settings';
private epalUserDataSub: Subscription;
private userEmailSub: Subscription;
private verificationCodeSent: BehaviorSubject<boolean>;
private showLoader: BehaviorSubject<boolean>;
private modalTitle: BehaviorSubject<string>;
private modalText: BehaviorSubject<string>;
private verificationCodeVerified: BehaviorSubject<boolean>;
private userEmailEnabled: BehaviorSubject<boolean>;
@ViewChild('userEmail') userEmail: ElementRef;
......@@ -37,7 +40,6 @@ import {AppSettings} from '../../app.settings';
private rd: Renderer) {
this.verificationCodeSent = new BehaviorSubject(false);
this.verificationCodeVerified = new BehaviorSubject(false);
this.userEmailEnabled = new BehaviorSubject(false);
this.isModalShown = new BehaviorSubject(false);
this.formGroup = this.fb.group({
......@@ -48,7 +50,10 @@ import {AppSettings} from '../../app.settings';
userEmail: [{value: '', disabled: true}, [Validators.pattern(VALID_EMAIL_PATTERN),Validators.required]],
verificationCode: ['', []]
});
this.epalUserData$ = new BehaviorSubject({});
this.epalUserData$ = new BehaviorSubject(<any>{userEmail: '', userName: '', userSurname: '', userFathername: '', userMothername: ''});
this.showLoader = new BehaviorSubject(false);
this.modalTitle = new BehaviorSubject("");
this.modalText = new BehaviorSubject("");
}
public showModal():void {
......@@ -67,31 +72,29 @@ import {AppSettings} from '../../app.settings';
ngOnInit() {
(<any>$('#emaiSentNotice')).appendTo("body");
this.epalUserDataSub = this.hds.getEpalUserData().subscribe(
x => {
this.epalUserDataSub = this.hds.getEpalUserData().subscribe(x => {
this.epalUserData$.next(x);
this.formGroup.get('userEmail').setValue(x.userEmail);
this.formGroup.get('userName').setValue(x.userName);
this.formGroup.get('userSurname').setValue(x.userSurname);
this.formGroup.get('userFathername').setValue(x.userFathername);
this.formGroup.get('userMothername').setValue(x.userMothername);
if (typeof(x.verificationCodeVerified) !== 'undefined' && x.verificationCodeVerified === "1") {
this.verificationCodeVerified.next(true);
} else {
this.verificationCodeVerified.next(false);
}
this.epalUserData$.next(x);
this.formGroup.get('userEmail').setValue(x.userEmail);
this.formGroup.get('userName').setValue(x.userName);
this.formGroup.get('userSurname').setValue(x.userSurname);
this.formGroup.get('userFathername').setValue(x.userFathername);
this.formGroup.get('userMothername').setValue(x.userMothername);
if (typeof(x.verificationCodeVerified) !== 'undefined' && x.verificationCodeVerified === "1") {
this.verificationCodeVerified.next(true);
} else {
this.verificationCodeVerified.next(false);
}
if (typeof(x.userEmail) !== 'undefined' && x.userEmail.length > 0)
this.userEmailEnabled.next(false);
else {
this.enableUserEmail();
this.userEmailEnabled.next(true);
}
if (typeof(x.userEmail) !== 'undefined' && x.userEmail.length > 0)
this.userEmailEnabled.next(false);
else {
this.enableUserEmail();
this.userEmailEnabled.next(true);
}
});
}
);
this.userEmailSub = this.formGroup.get('userEmail').valueChanges.subscribe(
x => {
......@@ -106,28 +109,42 @@ import {AppSettings} from '../../app.settings';
(<any>$('#emaiSentNotice')).remove();
if (this.epalUserDataSub) this.epalUserDataSub.unsubscribe();
if (this.userEmailSub) this.epalUserDataSub.unsubscribe();
this.epalUserData$.unsubscribe();
}
sendVerificationCode() {
this.showLoader.next(true);
this.hds.sendVerificationCode(this.formGroup.value.userEmail)
.then(res => {
this.verificationCodeSent.next(true);
this.verificationCodeVerified.next(false);
this.disableUserEmail();
this.showLoader.next(false);
this.modalTitle.next("Αποστολή Κωδικού Επαλήθευσης");
this.modalText.next("Έγινε αποστολή κωδικού επαλήθευσης στη διεύθυνση που δηλώσατε. Ελέγξτε το email σας! Αντιγράψτε τον κωδικό που σας στείλαμε στο πεδίο 'Κωδικός Επαλήθευσης' και επιλέξτε 'Αποστολή Κωδικού Επαλήθευσης'");
this.showModal();
// (<any>$('#emaiSentNotice')).modal('show');
})
.catch(err => {console.log(err)});
.catch(err => {
console.log(err);
this.showLoader.next(false);
});
}
verifyVerificationCode() {
this.showLoader.next(true);
this.hds.verifyVerificationCode(this.formGroup.value.verificationCode)
.then(res => {
this.verificationCodeVerified.next((<any>res).verificationCodeVerified);
this.formGroup.value.userEmail=(<any>res).userEmail;
this.showLoader.next(false);
this.modalTitle.next("Επιτυχής επαλήθευση");
this.modalText.next("Έγινε επαλήθευση του email σας. Μπορείτε να συνεχίσετε συμπληρώνοντας σωστά και τα υπόλοιπα στοιχεία σας και επιλέγοντας 'Συνέχεια'.");
this.showModal();
})
.catch(err => {console.log(err)});
.catch(err => {
console.log(err);
this.showLoader.next(false);
});
}
saveProfileAndContinue() {
......
......@@ -176,18 +176,18 @@
background-color: #fd9665;
}
.changecolor
.changecolor
{
color: red;
}
.changelistcolor
.changelistcolor
{
color:red!important ;
}
.aastyle{
color:black!important ;
color:black!important ;
}
.roundedNumber{
......@@ -223,3 +223,64 @@ overflow-x: scroll;
.d3-chart .axis text {
fill: #999;
}
.modal-header-success {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #5cb85c;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-warning {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #f0ad4e;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-danger {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #d9534f;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-info {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #5bc0de;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.modal-header-primary {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #428bca;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
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