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

drupal/modules/epal/epal.module

@@ -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;
     }

drupal/modules/epal/src/Controller/CurrentUser.php

@@ -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;
 

source/components/student-application-form/parent.form.html

-<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>

source/components/student-application-form/parent.form.ts

 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() {

source/containers/globalstyles.css

@@ -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;
+}