parent.form.ts 7.34 KB
Newer Older
1
import { Component, OnInit, OnDestroy, Injectable, ViewChild, ElementRef, Renderer } from '@angular/core';
2
import { Router } from '@angular/router';
3
import { BehaviorSubject, Subscription, Observable } from 'rxjs/Rx';
4
import { VALID_EMAIL_PATTERN, VALID_NAMES_PATTERN } from '../../constants';
5
6
7
8
9
10
11
12
13
14
15
16
17
import { HelperDataService } from '../../services/helper-data-service';

import {
    FormBuilder,
    FormGroup,
    FormControl,
    FormArray,
    Validators,
} from '@angular/forms';
import {AppSettings} from '../../app.settings';

@Component({
    selector: 'parent-form',
18
    templateUrl: 'parent.form.html'
19
20
})

21
@Injectable() export default class ParentForm implements OnInit, OnDestroy {
22
23
24
25
26

    public formGroup: FormGroup;
    private respond: any;
    private epalUserData$: BehaviorSubject<any>;
    private epalUserDataSub: Subscription;
27
28
    private userEmailSub: Subscription;
    private verificationCodeSent: BehaviorSubject<boolean>;
29
30
31
    private showLoader: BehaviorSubject<boolean>;
    private modalTitle: BehaviorSubject<string>;
    private modalText: BehaviorSubject<string>;
32
33
34
    private verificationCodeVerified: BehaviorSubject<boolean>;
    private userEmailEnabled: BehaviorSubject<boolean>;
    @ViewChild('userEmail') userEmail: ElementRef;
35
    public isModalShown: BehaviorSubject<boolean>;
36
37
38

       constructor(private fb: FormBuilder,
                private router: Router,
39
40
41
42
43
                private hds: HelperDataService,
                private rd: Renderer) {
            this.verificationCodeSent = new BehaviorSubject(false);
            this.verificationCodeVerified = new BehaviorSubject(false);
            this.userEmailEnabled = new BehaviorSubject(false);
44
            this.isModalShown = new BehaviorSubject(false);
45
46
47
48
49
50
            this.formGroup = this.fb.group({
                 userName: ['', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
                 userSurname: ['', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
                 userFathername: ['', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
                 userMothername: ['', [Validators.pattern(VALID_NAMES_PATTERN),Validators.required]],
                 userEmail: [{value: '', disabled: true}, [Validators.pattern(VALID_EMAIL_PATTERN),Validators.required]],
51
                 verificationCode: ['', []]
52
                 });
53
54
55
56
            this.epalUserData$ = new BehaviorSubject(<any>{userEmail: '', userName: '', userSurname: '', userFathername: '', userMothername: ''});
            this.showLoader = new BehaviorSubject(false);
            this.modalTitle =  new BehaviorSubject("");
            this.modalText =  new BehaviorSubject("");
57
        }
58
59
60

    public showModal():void {
        console.log("about to show modal");
61
        (<any>$('#emaiSentNotice')).modal('show');
62
63
64
    }

    public hideModal():void {
65
        (<any>$('#emaiSentNotice')).modal('hide');
66
67
68
69
70
71
    }

    public onHidden():void {
        this.isModalShown.next(false);
    }

72
    ngOnInit() {
73
74
        (<any>$('#emaiSentNotice')).appendTo("body");

75
76
77
78
79
80
81
82
83
84
85
86
87
        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);
            }
88

89
90
91
92
93
94
            if (typeof(x.userEmail) !== 'undefined' && x.userEmail.length > 0)
                this.userEmailEnabled.next(false);
            else {
                this.enableUserEmail();
                this.userEmailEnabled.next(true);
            }
95

96
        });
97

98

99
        this.userEmailSub = this.formGroup.get('userEmail').valueChanges.subscribe(
100
            x => {
101
                if (this.formGroup.get('userEmail').value === '') {
102
103
104
105
106
107
108
                    this.enableUserEmail();
                }
            }
        );
    }

    ngOnDestroy() {
109
        (<any>$('#emaiSentNotice')).remove();
110
111
        if (this.epalUserDataSub) this.epalUserDataSub.unsubscribe();
        if (this.userEmailSub) this.epalUserDataSub.unsubscribe();
112
        this.epalUserData$.unsubscribe();
113
114
115
    }

    sendVerificationCode() {
116
        this.showLoader.next(true);
117
        this.hds.sendVerificationCode(this.formGroup.value.userEmail)
118
119
120
            .then(res => {
                this.verificationCodeSent.next(true);
                this.verificationCodeVerified.next(false);
121
                this.disableUserEmail();
122
123
124
                this.showLoader.next(false);
                this.modalTitle.next("Αποστολή Κωδικού Επαλήθευσης");
                this.modalText.next("Έγινε αποστολή κωδικού επαλήθευσης στη διεύθυνση που δηλώσατε. Ελέγξτε το email σας! Αντιγράψτε τον κωδικό που σας στείλαμε στο πεδίο 'Κωδικός Επαλήθευσης' και επιλέξτε 'Αποστολή Κωδικού Επαλήθευσης'");
125
                this.showModal();
126
            })
127
128
129
130
            .catch(err => {
                console.log(err);
                this.showLoader.next(false);
            });
131
132
133
    }

    verifyVerificationCode() {
134
        this.showLoader.next(true);
135
        this.hds.verifyVerificationCode(this.formGroup.value.verificationCode)
136
137
            .then(res => {
                this.verificationCodeVerified.next((<any>res).verificationCodeVerified);
138
                this.formGroup.value.userEmail=(<any>res).userEmail;
139
140
141
                this.showLoader.next(false);
                this.modalTitle.next("Επιτυχής επαλήθευση");
                this.modalText.next("Έγινε επαλήθευση του email σας. Μπορείτε να συνεχίσετε συμπληρώνοντας σωστά και τα υπόλοιπα στοιχεία σας και επιλέγοντας 'Συνέχεια'.");
142
                this.showModal();
143
            })
144
145
146
147
            .catch(err => {
                console.log(err);
                this.showLoader.next(false);
            });
148
149
    }

150
    saveProfileAndContinue() {
151
        this.showLoader.next(true);
152
153
        this.hds.saveProfile(this.formGroup.value)
            .then(res => {
154
                this.showLoader.next(false);
155
                this.router.navigate(['/epal-class-select']);})
156
157
158
159
            .catch(err => {
                this.showLoader.next(false);
                console.log(err)
            });
160
    }
161
162
163

    enableUserEmail() {
        this.userEmailEnabled.next(true);
164
        this.formGroup.get("userEmail").enable({emitEvent: false});
165
166
167
168
169
        this.rd.invokeElementMethod(this.userEmail.nativeElement,'focus');
    }

    disableUserEmail() {
        this.userEmailEnabled.next(false);
170
171
172
173
174
175
176
        this.formGroup.get("userEmail").disable({emitEvent: false});
    }

    resetUserEmail() {
        this.userEmailEnabled.next(false);
        this.formGroup.get("userEmail").setValue(this.epalUserData$.getValue().userEmail);
        this.formGroup.get("userEmail").disable({emitEvent: false});
177
    }
178
}