create-external-user.component.html 5.9 KB
Newer Older
1
<div class="mat-dialog-content-container">
2
    <h1 mat-dialog-title>{{(data === null ? 'lang.addOtp' : 'lang.updateOtp') | translate}}</h1>
3
4
5
6
7
    <div mat-dialog-content>
        <div *ngIf="loading" class="loading" style="display:flex;height:100%;">
            <mat-spinner style="margin:auto;"></mat-spinner>
        </div>
        <div *ngIf="!loading" class="userForm">
8
            <mat-form-field *ngIf="sources.length > 1" appearance="fill">
9
                <mat-label>{{ 'lang.source' | translate }}</mat-label>
10
11
12
                <mat-select #source [(ngModel)]="userOTP.sourceId" (selectionChange)="setCurrentSource($event.value)"
                    required>
                    <mat-option *ngFor="let source of sources" [value]="source.id">
13
14
15
16
                        {{ source.label }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
            <div style="display: flex;margin-bottom: 10px;" *ngIf="searchMode">
                <div style="flex: 1;">
                    <app-contact-autocomplete [exclusion]="'?noEntities=true&noContactsGroups=true'"
                        [inputMode]="true" style="width:100%;padding-bottom:10px;" (afterSelected)="getContact($event)">
                    </app-contact-autocomplete>
                </div>
                <div>
                    <button mat-icon-button color="primary" [title]="'lang.viewSuggestions' | translate" (click)="searchMode=!searchMode">
                        <mat-icon class="fa fa-users"></mat-icon>
                    </button>
                </div>
            </div>
            <ng-container *ngIf="!searchMode">
                <div class="formType">
                    <div class="formType-title">
                        {{'lang.suggestedCorrespondents' | translate}}
                    </div>
                    <div class="formType-content">
                        <div class="correspondent-list">
                            <div *ngIf="correspondentShorcuts.length === 0" class="empty">
                                {{'lang.noSuggestion' | translate}}
                            </div>
                            <mat-chip-list>
                                <mat-chip *ngFor="let shortcut of correspondentShorcuts" [title]="shortcut.title"
                                    (click)="setOtpInfoFromShortcut(shortcut)" style="cursor: pointer;font-size: 12px;min-height: 24px;">
                                    {{shortcut.label}}
                                </mat-chip>
                            </mat-chip-list>
                        </div>
                        <div>
                            <button mat-icon-button color="primary" [title]="'lang.searchCorrespondent' | translate" (click)="searchMode=!searchMode">
                                <mat-icon class="fa fa-search"></mat-icon>
                            </button>
                        </div>
                    </div>
                </div>
            </ng-container>
54
            <mat-form-field appearance="fill">
55
                <mat-label>{{'lang.firstname' | translate}}</mat-label>
56
                <input matInput #firstname type="text" maxlength="128" [(ngModel)]="userOTP.firstname" required>
57
            </mat-form-field>
58
            <mat-form-field appearance="fill">
59
                <mat-label>{{'lang.lastname' | translate}}</mat-label>
60
                <input matInput #lastname type="text" maxlength="128" [(ngModel)]="userOTP.lastname" required>
61
            </mat-form-field>
62
            <mat-form-field appearance="fill">
63
                <mat-label>{{'lang.phoneNumber' | translate}}</mat-label>
64
65
66
                <input matInput #phoneNumber type="text" [(ngModel)]="userOTP.phone"
                    (ngModelChange)="formatPhone($event)" pattern="^((\+)33)[1-9](\d{2}){4}$" required>
                <mat-hint align="end">{{ 'lang.frFormatPhone' | translate }}</mat-hint>
67
            </mat-form-field>
68
            <mat-form-field appearance="fill">
69
                <mat-label>{{'lang.email' | translate}}</mat-label>
70
71
                <input matInput #email type="email" [(ngModel)]="userOTP.email"
                    pattern="(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)" required>
72
            </mat-form-field>
73
74
            <mat-form-field floatLabel="always" appearance="fill">
                <mat-label>{{'lang.role' | translate}}</mat-label>
75
                <input matInput style="display: none;">
76
77
78
                <mat-radio-group #role style="display: flex" [(ngModel)]="userOTP.role" required>
                    <mat-radio-button *ngFor="let role of availableRoles" [value]="role.id" style="flex:1"
                        color="primary">
79
80
                        {{ role.label }}
                    </mat-radio-button>
81
                </mat-radio-group>
82
            </mat-form-field>
83
84
            <mat-form-field *ngIf="currentSource.length > 1 && userOTP.role !== 'visa'" appearance="fill">
                <mat-label>{{ 'lang.securityMode' | translate }}</mat-label>
85
86
                <mat-select #securityMode [(ngModel)]="userOTP.security" required>
                    <mat-option *ngFor="let mode of currentSource" [value]="mode">
87
88
89
90
                        {{ 'lang.' + mode | translate }}
                    </mat-option>
                </mat-select>
            </mat-form-field>
91
92
            <app-maarch-message *ngIf="userOTP.security" [mode]="'info'"
                [content]="(userOTP.role === 'visa' ? 'lang.otpVisaUser' : 'lang.securityModeInfo') | translate : {mode: userOTP.security}"></app-maarch-message>
93
94
95
96
        </div>
    </div>
    <span class="divider-modal"></span>
    <div mat-dialog-actions class="actions">
97
98
        <button mat-raised-button mat-button color="primary" [disabled]="loading || !isValidForm()"
            (click)="addOtpUser()">{{ (this.data === null ? 'lang.validate' : 'lang.update') | translate}}</button>
99
100
        <button mat-raised-button mat-button [mat-dialog-close]="">{{'lang.cancel' | translate}}</button>
    </div>
101
</div>