|
1 | | -<app-utm-modal-header [name]="user.id?'Edit user':'Create user'"></app-utm-modal-header> |
| 1 | +<app-utm-modal-header |
| 2 | + [name]="user.id ? 'Edit user' : 'Create user'" |
| 3 | +></app-utm-modal-header> |
2 | 4 | <div class="container-fluid p-3"> |
3 | | - <form #editForm="ngForm" (ngSubmit)="save()" class="form-user" name="editForm" novalidate role="form"> |
| 5 | + <form |
| 6 | + #editForm="ngForm" |
| 7 | + (ngSubmit)="save()" |
| 8 | + class="form-user" |
| 9 | + name="editForm" |
| 10 | + novalidate |
| 11 | + role="form" |
| 12 | + > |
4 | 13 | <div class="form-group"> |
5 | 14 | <label class="form-control-label">Login</label> |
6 | | - <input #loginInput="ngModel" [(ngModel)]="user.login" class="form-control" maxlength="50" |
7 | | - minlength="1" name="login" pattern="^[_.@A-Za-z0-9-]*$" required |
8 | | - type="text"> |
| 15 | + <input |
| 16 | + #loginInput="ngModel" |
| 17 | + [(ngModel)]="user.login" |
| 18 | + class="form-control" |
| 19 | + maxlength="50" |
| 20 | + minlength="1" |
| 21 | + name="login" |
| 22 | + pattern="^[_.@A-Za-z0-9-]*$" |
| 23 | + required |
| 24 | + type="text" |
| 25 | + /> |
9 | 26 |
|
10 | 27 | <div *ngIf="loginInput.dirty && loginInput.invalid"> |
11 | | - <small *ngIf="loginInput.errors.required" |
12 | | - class="form-text text-danger"> |
| 28 | + <small *ngIf="loginInput.errors.required" class="form-text text-danger"> |
13 | 29 | This field is required. |
14 | 30 | </small> |
15 | 31 |
|
16 | | - <small *ngIf="loginInput.errors.maxlength" |
17 | | - class="form-text text-danger"> |
| 32 | + <small |
| 33 | + *ngIf="loginInput.errors.maxlength" |
| 34 | + class="form-text text-danger" |
| 35 | + > |
18 | 36 | This field cannot be longer than 50 characters. |
19 | 37 | </small> |
20 | 38 |
|
21 | | - <small *ngIf="loginInput.errors.pattern" |
22 | | - class="form-text text-danger"> |
| 39 | + <small *ngIf="loginInput.errors.pattern" class="form-text text-danger"> |
23 | 40 | This field can only contain letters, digits and e-mail addresses. |
24 | 41 | </small> |
25 | 42 | </div> |
26 | 43 | </div> |
27 | 44 | <div class="form-group"> |
28 | 45 | <label class="form-control-label">First Name</label> |
29 | | - <input #firstNameInput="ngModel" [(ngModel)]="user.firstName" class="form-control" maxlength="50" |
30 | | - name="firstName" type="text"> |
| 46 | + <input |
| 47 | + #firstNameInput="ngModel" |
| 48 | + [(ngModel)]="user.firstName" |
| 49 | + class="form-control" |
| 50 | + maxlength="50" |
| 51 | + name="firstName" |
| 52 | + type="text" |
| 53 | + /> |
31 | 54 |
|
32 | 55 | <div *ngIf="firstNameInput.dirty && firstNameInput.invalid"> |
33 | | - <small *ngIf="firstNameInput.errors.maxlength" |
34 | | - class="form-text text-danger"> |
| 56 | + <small |
| 57 | + *ngIf="firstNameInput.errors.maxlength" |
| 58 | + class="form-text text-danger" |
| 59 | + > |
35 | 60 | This field cannot be longer than 50 characters. |
36 | 61 | </small> |
37 | 62 | </div> |
38 | 63 | </div> |
39 | 64 | <div class="form-group"> |
40 | 65 | <label>Last Name</label> |
41 | | - <input #lastNameInput="ngModel" [(ngModel)]="user.lastName" class="form-control" maxlength="50" |
42 | | - name="lastName" type="text"> |
| 66 | + <input |
| 67 | + #lastNameInput="ngModel" |
| 68 | + [(ngModel)]="user.lastName" |
| 69 | + class="form-control" |
| 70 | + maxlength="50" |
| 71 | + name="lastName" |
| 72 | + type="text" |
| 73 | + /> |
43 | 74 |
|
44 | 75 | <div *ngIf="lastNameInput.dirty && lastNameInput.invalid"> |
45 | | - <small *ngIf="lastNameInput.errors.maxlength" |
46 | | - class="form-text text-danger"> |
| 76 | + <small |
| 77 | + *ngIf="lastNameInput.errors.maxlength" |
| 78 | + class="form-text text-danger" |
| 79 | + > |
47 | 80 | This field cannot be longer than 50 characters. |
48 | 81 | </small> |
49 | 82 | </div> |
50 | 83 | </div> |
51 | 84 | <div class="form-group"> |
52 | 85 | <label class="form-control-label">Email</label> |
53 | | - <input #emailInput="ngModel" [(ngModel)]="user.email" class="form-control" email |
54 | | - maxlength="254" minlength="5" name="email" required type="email"> |
| 86 | + <input |
| 87 | + #emailInput="ngModel" |
| 88 | + [(ngModel)]="user.email" |
| 89 | + class="form-control" |
| 90 | + email |
| 91 | + maxlength="254" |
| 92 | + minlength="5" |
| 93 | + name="email" |
| 94 | + required |
| 95 | + type="email" |
| 96 | + /> |
55 | 97 |
|
56 | 98 | <div *ngIf="emailInput.dirty && emailInput.invalid"> |
57 | | - <small *ngIf="emailInput.errors.required" |
58 | | - class="form-text text-danger"> |
| 99 | + <small *ngIf="emailInput.errors.required" class="form-text text-danger"> |
59 | 100 | This field is required. |
60 | 101 | </small> |
61 | 102 |
|
62 | | - <small *ngIf="emailInput.errors.maxlength" |
63 | | - class="form-text text-danger"> |
| 103 | + <small |
| 104 | + *ngIf="emailInput.errors.maxlength" |
| 105 | + class="form-text text-danger" |
| 106 | + > |
64 | 107 | This field cannot be longer than 100 characters. |
65 | 108 | </small> |
66 | 109 |
|
67 | | - <small *ngIf="emailInput.errors.minlength" |
68 | | - class="form-text text-danger"> |
| 110 | + <small |
| 111 | + *ngIf="emailInput.errors.minlength" |
| 112 | + class="form-text text-danger" |
| 113 | + > |
69 | 114 | This field is required to be at least 5 characters. |
70 | 115 | </small> |
71 | 116 |
|
72 | | - <small *ngIf="emailInput.errors.email" |
73 | | - class="form-text text-danger"> |
| 117 | + <small *ngIf="emailInput.errors.email" class="form-text text-danger"> |
74 | 118 | Your email is invalid. |
75 | 119 | </small> |
76 | 120 | </div> |
77 | 121 | </div> |
| 122 | + <div class="form-group ml-12" *ngIf="!user.id"> |
| 123 | + <label |
| 124 | + for="localCreation" |
| 125 | + class="form-control-label d-flex justify-content-between align-items-center" |
| 126 | + > |
| 127 | + <span>Local creation (no email activation)</span> |
| 128 | + <input |
| 129 | + id="localCreation" |
| 130 | + class="form-check-input" |
| 131 | + name="localCreation" |
| 132 | + type="checkbox" |
| 133 | + [(ngModel)]="localCreation" |
| 134 | + /> |
| 135 | + </label> |
| 136 | + </div> |
| 137 | + <div class="form-group" *ngIf="localCreation && !user.id"> |
| 138 | + <label class="form-control-label">Password</label> |
| 139 | + <input |
| 140 | + #passwordInput="ngModel" |
| 141 | + [(ngModel)]="user.password" |
| 142 | + class="form-control" |
| 143 | + maxlength="100" |
| 144 | + minlength="4" |
| 145 | + name="password" |
| 146 | + required |
| 147 | + type="password" |
| 148 | + /> |
| 149 | + |
| 150 | + <div *ngIf="passwordInput.dirty && passwordInput.invalid"> |
| 151 | + <small |
| 152 | + *ngIf="passwordInput.errors.required" |
| 153 | + class="form-text text-danger" |
| 154 | + > |
| 155 | + This field is required. |
| 156 | + </small> |
| 157 | + |
| 158 | + <small |
| 159 | + *ngIf="passwordInput.errors.minlength" |
| 160 | + class="form-text text-danger" |
| 161 | + > |
| 162 | + This field is required to be at least 4 characters. |
| 163 | + </small> |
| 164 | + |
| 165 | + <small |
| 166 | + *ngIf="passwordInput.errors.maxlength" |
| 167 | + class="form-text text-danger" |
| 168 | + > |
| 169 | + This field cannot be longer than 100 characters. |
| 170 | + </small> |
| 171 | + </div> |
| 172 | + </div> |
78 | 173 | <div class="form-group"> |
79 | 174 | <label for="profile">Rol</label> |
80 | | - <select [(ngModel)]="user.authorities" required class="form-control" id="profile" multiple name="authority"> |
81 | | - <option *ngFor="let authority of authorities" [value]="authority">{{authority}}</option> |
| 175 | + <select |
| 176 | + [(ngModel)]="user.authorities" |
| 177 | + required |
| 178 | + class="form-control" |
| 179 | + id="profile" |
| 180 | + multiple |
| 181 | + name="authority" |
| 182 | + > |
| 183 | + <option *ngFor="let authority of authorities" [value]="authority"> |
| 184 | + {{ authority }} |
| 185 | + </option> |
82 | 186 | </select> |
83 | | - <small *ngIf="user.authorities && user.authorities.length === 0" |
84 | | - class="form-text text-danger"> |
| 187 | + <small |
| 188 | + *ngIf="user.authorities && user.authorities.length === 0" |
| 189 | + class="form-text text-danger" |
| 190 | + > |
85 | 191 | This field is required. You must select a role. |
86 | 192 | </small> |
87 | 193 | </div> |
88 | | - |
89 | 194 | </form> |
90 | 195 | <div class="button-container d-flex justify-content-end mt-4"> |
91 | | - <button (click)="activeModal.close()" class="btn utm-button utm-button-grey mr-3"> |
92 | | - <i class="icon-cancel-circle2"></i> |
93 | | - Cancel |
| 196 | + <button |
| 197 | + (click)="activeModal.close()" |
| 198 | + class="btn utm-button utm-button-grey mr-3" |
| 199 | + > |
| 200 | + <i class="icon-cancel-circle2"></i> Cancel |
94 | 201 | </button> |
95 | | - <button (click)="save()" |
96 | | - [disabled]="!editForm.valid" |
97 | | - class="btn utm-button utm-button-primary |
98 | | - d-flex justify-content-center |
99 | | - align-items-center"> |
100 | | - <i [ngClass]="isSaving?'icon-spinner2 spinner':'icon-user-plus'"> |
101 | | - </i> |
102 | | - {{user.id ? 'Edit user' : 'Create user'}} |
| 202 | + <button |
| 203 | + (click)="save()" |
| 204 | + [disabled]="!editForm.valid" |
| 205 | + class="btn utm-button utm-button-primary d-flex justify-content-center align-items-center" |
| 206 | + > |
| 207 | + <i [ngClass]="isSaving ? 'icon-spinner2 spinner' : 'icon-user-plus'"> </i |
| 208 | + > |
| 209 | + {{ user.id ? "Edit user" : "Create user" }} |
103 | 210 | </button> |
104 | 211 | </div> |
105 | 212 | </div> |
106 | | - |
|
0 commit comments