labarchives-login.component.ts 5.15 KB
Newer Older
1
2
3
4
import {Output, EventEmitter, Component, OnInit, Inject, Injector} from '@angular/core';
import {FormGroup, FormControl, Validators, NgForm} from '@angular/forms';
import {SimpleComponent} from '../shared/form/field-simple.component';
import {FieldBase} from '../shared/form/field-base';
Moises Sacal's avatar
Moises Sacal committed
5

Moises Sacal's avatar
Moises Sacal committed
6
7
declare var jQuery: any;

8
9
import {LabarchivesService} from "../labarchives.service";

10
export class LabarchivesLoginField extends FieldBase<any> {
Moises Sacal's avatar
Moises Sacal committed
11
12
13

  valid = true;
  username: string;
Moises Sacal's avatar
Moises Sacal committed
14
15
16
17
18
19
  columns: object[];
  usernameLabel: string;
  passwordLabel: string;
  loginLabel: string;
  helpLoginLabel: string;
  helpLoginLabelList: object[];
Moises Sacal's avatar
Moises Sacal committed
20
21
  loginHelpImage: string;
  loginHelpImageAlt: string;
Moises Sacal's avatar
Moises Sacal committed
22
23
  password: string;
  submitted = false;
24
  errorMessage: string = undefined;
Moises Sacal's avatar
Moises Sacal committed
25
  closeLabel: string;
Moises Sacal's avatar
Moises Sacal committed
26
27

  user: any;
Moises Sacal's avatar
Moises Sacal committed
28
  loggedIn: boolean;
29
  labarchivesService: LabarchivesService;
Moises Sacal's avatar
Moises Sacal committed
30
31
32

  @Output() userLogin = new EventEmitter<any>();

33
34
  constructor(options: any, injector: any) {
    super(options, injector);
Moises Sacal's avatar
Moises Sacal committed
35
36
37
    this.columns = options['columns'] || [];
    this.usernameLabel = options['usernameLabel'] || 'Username';
    this.passwordLabel = options['passwordLabel'] || 'Password';
Moises Sacal's avatar
Moises Sacal committed
38
39
    this.loginLabel = options['loginLabel'] || 'Login';
    this.helpLoginLabel = options['helpLoginLabel'] || '';
Moises Sacal's avatar
Moises Sacal committed
40
    this.helpLoginLabelList = options['helpLoginLabelList'] || [];
Moises Sacal's avatar
Moises Sacal committed
41
    this.loginHelpImageAlt = options['loginHelpImageAlt'] || 'labarchives help login';
Moises Sacal's avatar
Moises Sacal committed
42
43
    this.loginHelpImage = options['loginHelpImage'] || this.loginHelpImageAlt;
    this.closeLabel = options['closeLabel'] || 'Close';
44
    this.labarchivesService = this.getFromInjector(LabarchivesService);
45
46
  }

47
48
49
50
51
52
53
54
  async login(form) {
    const formValid = this.loginValid(form);
    if (formValid === '') {
      // TODO: Investigate this. Using this method to remove the trailing Base64 equals ==
      form.password = form.password.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');
      this.user = {username: form.username, password: form.password};
      const login = await this.labarchivesService.login(this.user.username, this.user.password);
      if (login.status) {
Moises Sacal's avatar
Moises Sacal committed
55
        this.loggedIn = true;
56
57
        this.userLogin.emit(login.labUser);
        this.submitted = true;
Moises Sacal's avatar
Moises Sacal committed
58
        this.errorMessage = null;
59
60
61
62
63
64
65
      } else {
        this.errorMessage = login.message;
      }

    } else {
      this.errorMessage = formValid;
    }
Moises Sacal's avatar
Moises Sacal committed
66
67
  }

68
69
70
71
72
73
74
75
  loginValid(form) {
    if (!form.username) {
      return 'Please include username';
    }
    if (!form.password) {
      return 'Please include username';
    }
    return '';
Moises Sacal's avatar
Moises Sacal committed
76
77
  }

Moises Sacal's avatar
Moises Sacal committed
78
79
80
81
  loginViaInstitution() {
    jQuery('#institutionModal').modal('show');
  }

Moises Sacal's avatar
Moises Sacal committed
82
}
83
84
85
86

@Component({
  selector: 'ws-labarchiveslogin',
  template: `
87
    <div class="row">
Moises Sacal's avatar
Moises Sacal committed
88
      <div *ngIf="!field.loggedIn" class="col-md-6 col-md-offset-2">
89
90
91
92
93
94
95
96
97
98
99
100
        <form #form="ngForm">
          <div class="form-group">
            <label>{{ field.usernameLabel }}</label>
            <input type="text" class="form-control" ngModel name="username"
                   attr.aria-label="{{ field.usernameLabel }}">
          </div>
          <div class="form-group">
            <label>{{ field.passwordLabel }}</label>
            <input type="password" class="form-control" ngModel name="password"
                   attr.aria-label="{{ field.passwordLabel }}">
          </div>
          <div class="form-row">
Moises Sacal's avatar
Moises Sacal committed
101
102
            <p>
              <button (click)="field.login(form.value)" type="submit" [disabled]="!field.valid" class="btn btn-primary">
Moises Sacal's avatar
Moises Sacal committed
103
                {{ field.loginLabel }}
Moises Sacal's avatar
Moises Sacal committed
104
              </button>
Moises Sacal's avatar
Moises Sacal committed
105
106
              <!--or-->
              <!--<button (click)="field.loginViaInstitution()" type="submit" [disabled]="!field.valid"-->
Moises Sacal's avatar
Moises Sacal committed
107
108
              <!--class="btn btn-info">-->
              <!--Login trough UTS-->
Moises Sacal's avatar
Moises Sacal committed
109
              <!--</button>-->
Moises Sacal's avatar
Moises Sacal committed
110
            </p>
111
          </div>
Moises Sacal's avatar
Moises Sacal committed
112
113
114
          <div class="form-row">
            <div class="alert alert-danger" *ngIf="field.errorMessage">{{ field.errorMessage }}</div>
          </div>
115
116
117
118
          <div>
            <p></p>
          </div>
        </form>
Moises Sacal's avatar
Moises Sacal committed
119
120
121
122
123
124
125
126
127
128
129
130
        <div *ngIf="!field.loggedIn" class="col-md-12">
          <div class="form-row col-md-6">
            <p>{{ field.helpLoginLabel }}</p>
            <ul>
              <li *ngFor="let help of field.helpLoginLabelList">{{ help }}</li>
            </ul>
            <div class="form-row col-md-6">
              <img alt="{{ field.loginHelpImageAlt }}" [src]="field.loginHelpImage"
                   style="padding: 4px; border: dotted 1px #ccc;"/>
            </div>
          </div>
        </div>
131
      </div>
132
    </div>
Moises Sacal's avatar
Moises Sacal committed
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
    <div id="institutionModal" class="modal fade">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Login via UTS</h4>
          </div>
          <div class="modal-body">
            <p>Login not available please use Key method</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ field.closeLabel }}</button>
          </div>
        </div>
      </div>
    </div>
148
149
150
151
152
153
154
155
  `
})
export class LabarchivesLoginComponent extends SimpleComponent {
  field: LabarchivesLoginField;

  ngOnInit() {
  }
}