Skip to content

Commit a3efb10

Browse files
ac-jorellanafCito
ac-jorellanaf
and
Cito
authored
Added notes regarding how long the IVA verification code takes to be sent (GSI-1946) (#225)
* Added notes regarding how long the IVA verification code takes to be sent Added showing the user titles in the IVA manager list * Implemented suggestions * Update src/app/verification-addresses/features/user-iva-list/user-iva-list.ts Co-authored-by: Christoph Zwerschke <c.zwerschke@dkfz-heidelberg.de> Signed-off-by: Jordy <31940280+ac-jorellanaf@users.noreply.github.com> * Changed style to note to match institutional email note --------- Signed-off-by: Jordy <31940280+ac-jorellanaf@users.noreply.github.com> Co-authored-by: Christoph Zwerschke <c.zwerschke@dkfz-heidelberg.de>
1 parent cd40480 commit a3efb10

File tree

6 files changed

+143
-124
lines changed

6 files changed

+143
-124
lines changed

‎src/app/portal/features/account/account.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h2>
77
<span class="flex flex-wrap gap-2 text-2xl"
88
><span>{{ fullName() }}</span>
99
@for (roleName of roleNames(); track roleName) {
10-
<mat-chip class="chip-tertiary">{{ roleName }}</mat-chip>
10+
<mat-chip class="chip-tertiary">{{ roleName }}</mat-chip>
1111
}
1212
</span>
1313
</h2>
@@ -29,7 +29,6 @@ <h2>
2929
You can change this email address in your
3030
<a
3131
appExtLink
32-
[inline]="true"
3332
class="text-quaternary hover:text-secondary focus:text-secondary"
3433
href="https://profile.aai.lifescience-ri.eu/profile"
3534
data-umami-event="Account Email Change Clicked"

‎src/app/shared/services/notification.spec.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,23 @@ describe('NotificationService', () => {
6565
expect(matSnackBar.openFromComponent).toHaveBeenCalledWith(
6666
CustomSnackBarComponent,
6767
{
68-
data: { message: 'Test warning message', type: 'warn' },
68+
data: { message: 'Test warning message', type: 'warning' },
6969
duration: 4000,
70-
panelClass: 'snackbar-warn',
70+
panelClass: 'snackbar-warning',
71+
horizontalPosition,
72+
verticalPosition,
73+
},
74+
);
75+
});
76+
77+
it('should call openFromComponent properly when showDanger is called', () => {
78+
service.showDanger('Test danger message');
79+
expect(matSnackBar.openFromComponent).toHaveBeenCalledWith(
80+
CustomSnackBarComponent,
81+
{
82+
data: { message: 'Test danger message', type: 'danger' },
83+
duration: 4000,
84+
panelClass: 'snackbar-danger',
7185
horizontalPosition,
7286
verticalPosition,
7387
},

‎src/app/shared/services/notification.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,17 @@ export class NotificationService {
4343
*/
4444
showWarning(message: string, duration: number = 4000): void {
4545
console.warn(message);
46-
this.#show(message, 'warn', duration);
46+
this.#show(message, 'warning', duration);
47+
}
48+
49+
/**
50+
* Show a danger message
51+
* @param message - the text to show to the user
52+
* @param duration - the duration in milliseconds to show the message
53+
*/
54+
showDanger(message: string, duration: number = 4000): void {
55+
console.warn(message);
56+
this.#show(message, 'danger', duration);
4757
}
4858

4959
/**
@@ -64,7 +74,7 @@ export class NotificationService {
6474
*/
6575
#show(
6676
message: string,
67-
type: 'ok' | 'info' | 'warn' | 'error',
77+
type: 'ok' | 'info' | 'warning' | 'danger' | 'error',
6878
duration: number | undefined,
6979
): void {
7080
this.#snackBar.openFromComponent(CustomSnackBarComponent, {

‎src/app/verification-addresses/features/iva-manager-list/iva-manager-list.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<a
2525
routerLink="/user-manager/{{ iva.user_id }}"
2626
data-umami-event="IVA Manager User Name Clicked"
27-
>{{ iva.user_name }}</a
27+
>{{ iva.user_title ? iva.user_title + ' ' + iva.user_name : iva.user_name
28+
}}</a
2829
><br />
2930
<span class="text-sm text-gray-600">({{ iva.user_email }})</span>
3031
</td>

‎src/app/verification-addresses/features/user-iva-list/user-iva-list.html‎

Lines changed: 105 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,114 @@
11
@if (ivasAreLoading()) {
2-
<p class="text-base">Loading your contact addresses..</p>
2+
<p class="text-base">Loading your contact addresses..</p>
33
} @else if (ivasError()) {
4-
<p class="font-bold text-red-600">
5-
Your contact addresses could not be loaded. Please try again later.
6-
</p>
7-
} @else {
8-
@if (!ivas().length) {
9-
<p class="text-base">
10-
You have not yet created any contact addresses. This is needed if you wish to
11-
download research data.
12-
</p>
13-
}
14-
<p class="pb-4 text-base">
15-
Adding new contact addresses is done via the button at the end of this section.
16-
After a new address is added, you must request verification of the address using the
17-
button next to the address. Removing a contact address is done through the deletion
18-
button to the right, but you will lose access to any datasets whose access was
19-
linked to that address.
20-
</p>
21-
@if (ivas().length) {
4+
<p class="font-bold text-red-600">
5+
Your contact addresses could not be loaded. Please try again later.
6+
</p>
7+
} @else { @if (!ivas().length) {
8+
<p class="text-base">
9+
You have not yet created any contact addresses. This is needed if you wish to download
10+
research data.
11+
</p>
12+
}
13+
<p class="text-base">
14+
Adding new contact addresses is done via the button at the end of this section. After
15+
a new address is added, you must request verification of the address using the button
16+
next to the address. Removing a contact address is done through the deletion button to
17+
the right, but you will lose access to any datasets whose access was linked to that
18+
address.
19+
</p>
20+
@if (ivas().length) {
21+
<div
22+
class="border-outline-dark mb-4 grid grid-cols-1 border-t [&_button>mat-icon]:-translate-y-0.75"
23+
>
24+
@for (iva of ivas(); track iva.id) {
25+
<div
26+
class="border-outline-dark grid grid-cols-12 items-center gap-2 border-b py-2 text-black"
27+
>
2228
<div
23-
class="border-outline-dark mb-4 grid grid-cols-1 border-t [&_button>mat-icon]:-translate-y-0.75"
29+
class="col-span-11 flex min-h-12 items-center md:col-span-6 lg:col-span-4 lg:row-span-1 lg:pe-4 xl:col-span-4 xl:pe-4 2xl:col-span-5"
30+
[class.md:row-span-2]="iva.state !== 'Verified'"
2431
>
25-
@for (iva of ivas(); track iva.id) {
26-
<div
27-
class="border-outline-dark grid grid-cols-12 items-center gap-2 border-b py-2 text-black"
28-
>
29-
<div
30-
class="col-span-11 flex min-h-12 items-center md:col-span-6 lg:col-span-4 lg:row-span-1 lg:pe-4 xl:col-span-4 xl:pe-4 2xl:col-span-5"
31-
[class.md:row-span-2]="iva.state !== 'Verified'"
32-
>
33-
<div>{{ (iva.type | IvaTypePipe).name }}: {{ iva.value }}</div>
34-
</div>
35-
<div
36-
mat-cell
37-
class="order-3 col-span-12 flex h-full items-center justify-center md:order-0 md:col-span-5 lg:col-span-3 xl:col-span-3 2xl:col-span-2"
38-
>
39-
<div class="min-w-64 text-center lg:text-start">
40-
@switch (iva.state) {
41-
@case ('Verified') {
42-
<div class="text-bold text-success text-base">
43-
Address has been verified
44-
<mat-icon class="align-bottom" fontIcon="verified_user"></mat-icon>
45-
</div>
46-
}
47-
@case ('Unverified') {
48-
<div class="text-bold text-error text-base">
49-
Needs verification
50-
<mat-icon class="align-bottom" fontIcon="gpp_bad"></mat-icon>
51-
</div>
52-
}
53-
@case ('CodeTransmitted') {
54-
<div class="text-bold text-warning text-base">
55-
Code has been sent
56-
<mat-icon class="align-bottom" fontIcon="pin"></mat-icon>
57-
</div>
58-
}
59-
@default {
60-
<div class="text-bold text-info text-base">
61-
Waiting for verification
62-
<mat-icon class="align-bottom" fontIcon="pending"></mat-icon>
63-
</div>
64-
}
65-
}
66-
</div>
67-
</div>
68-
<div
69-
mat-cell
70-
class="order-4 col-span-12 my-2 min-w-48 text-center md:order-3 md:col-span-5 md:col-start-7 md:my-0 lg:order-3 lg:col-span-4 lg:block xl:col-span-3 2xl:col-span-2"
71-
[class.md:hidden]="iva.state === 'Verified'"
72-
>
73-
@if (iva.state === 'Unverified') {
74-
<button
75-
(click)="requestVerification(iva)"
76-
class="w-full sm:w-64"
77-
mat-stroked-button
78-
data-umami-event="User IVA list Request Verification Clicked"
79-
>
80-
<mat-icon fontIcon="pin"></mat-icon> Request verification
81-
</button>
82-
} @else if (iva.state !== 'Verified') {
83-
<button
84-
(click)="enterVerificationCode(iva)"
85-
[disabled]="checkingIvaId()"
86-
class="w-full sm:w-64"
87-
mat-stroked-button
88-
data-umami-event="User IVA list Enter Verification Code Clicked"
89-
>
90-
<mat-icon fontIcon="dialpad"></mat-icon> Enter verification code
91-
</button>
92-
}
93-
</div>
94-
95-
<div
96-
class="order-2 flex h-12 items-center md:order-3 lg:order-4 lg:row-span-1 2xl:ps-6"
97-
[class.md:row-span-2]="iva.state !== 'Verified'"
98-
>
99-
<button
100-
(click)="deleteWhenConfirmed(iva)"
101-
mat-icon-button
102-
aria-label="Delete"
103-
data-umami-event="User IVA list Delete Clicked"
104-
>
105-
<mat-icon fontIcon="delete"></mat-icon>
106-
</button>
107-
</div>
32+
<div>{{ (iva.type | IvaTypePipe).name }}: {{ iva.value }}</div>
33+
</div>
34+
<div
35+
mat-cell
36+
class="order-3 col-span-12 flex h-full items-center justify-center md:order-0 md:col-span-5 lg:col-span-3 xl:col-span-3 2xl:col-span-2"
37+
>
38+
<div class="min-w-64 text-center lg:text-start">
39+
@switch (iva.state) { @case ('Verified') {
40+
<div class="text-bold text-success text-base">
41+
Address has been verified
42+
<mat-icon class="align-bottom" fontIcon="verified_user"></mat-icon>
43+
</div>
44+
} @case ('Unverified') {
45+
<div class="text-bold text-error text-base">
46+
Needs verification
47+
<mat-icon class="align-bottom" fontIcon="gpp_bad"></mat-icon>
48+
</div>
49+
} @case ('CodeTransmitted') {
50+
<div class="text-bold text-warning text-base">
51+
Code has been sent
52+
<mat-icon class="align-bottom" fontIcon="pin"></mat-icon>
53+
</div>
54+
} @default {
55+
<div class="text-bold text-info text-base">
56+
Waiting for verification
57+
<mat-icon class="align-bottom" fontIcon="pending"></mat-icon>
10858
</div>
59+
} }
60+
</div>
61+
</div>
62+
<div
63+
mat-cell
64+
class="order-4 col-span-12 my-2 min-w-48 text-center md:order-3 md:col-span-5 md:col-start-7 md:my-0 lg:order-3 lg:col-span-4 lg:block xl:col-span-3 2xl:col-span-2"
65+
[class.md:hidden]="iva.state === 'Verified'"
66+
>
67+
@if (iva.state === 'Unverified') {
68+
<button
69+
(click)="requestVerification(iva)"
70+
class="w-full sm:w-64"
71+
mat-stroked-button
72+
data-umami-event="User IVA list Request Verification Clicked"
73+
>
74+
<mat-icon fontIcon="pin"></mat-icon> Request verification
75+
</button>
76+
} @else if (iva.state !== 'Verified') {
77+
<button
78+
(click)="enterVerificationCode(iva)"
79+
[disabled]="checkingIvaId()"
80+
class="w-full sm:w-64"
81+
mat-stroked-button
82+
data-umami-event="User IVA list Enter Verification Code Clicked"
83+
>
84+
<mat-icon fontIcon="dialpad"></mat-icon> Enter verification code
85+
</button>
10986
}
11087
</div>
88+
89+
<div
90+
class="order-2 flex h-12 items-center md:order-3 lg:order-4 lg:row-span-1 2xl:ps-6"
91+
[class.md:row-span-2]="iva.state !== 'Verified'"
92+
>
93+
<button
94+
(click)="deleteWhenConfirmed(iva)"
95+
mat-icon-button
96+
aria-label="Delete"
97+
data-umami-event="User IVA list Delete Clicked"
98+
>
99+
<mat-icon fontIcon="delete"></mat-icon>
100+
</button>
101+
</div>
102+
</div>
111103
}
112-
<button
113-
(click)="enterNew()"
114-
mat-raised-button
115-
class="button-quaternary mt-4"
116-
data-umami-event="User IVA list Add Contact Clicked"
117-
>
118-
<mat-icon fontIcon="add"></mat-icon>Add contact address
119-
</button>
104+
</div>
105+
}
106+
<button
107+
(click)="enterNew()"
108+
mat-raised-button
109+
class="button-quaternary mt-4"
110+
data-umami-event="User IVA list Add Contact Clicked"
111+
>
112+
<mat-icon fontIcon="add"></mat-icon>Add contact address
113+
</button>
120114
}

‎src/app/verification-addresses/features/user-iva-list/user-iva-list.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,13 @@ export class UserIvaListComponent implements OnInit {
9595
const address = this.#ivaAddress(iva);
9696
this.#confirm.confirm({
9797
title: 'Request verification of your address',
98-
message:
99-
'We will send a verification code to the address selected for verification (' +
100-
address +
101-
'). Please allow some time for processing' +
102-
' your request. When the verification code has been transmitted,' +
103-
' you will also be notified via e-mail.',
98+
message: `We will send a verification code to the address selected for
99+
verification (${address}). <strong>Please allow some time for processing your
100+
request.</strong> When the verification code has been transmitted,
101+
you will also be notified via e-mail.<p
102+
class="text-error bg-warning/15 mt-3 p-3 font-bold rounded-xl">Note: Verification
103+
codes via SMS are currently sent out manually by our data stewards, therefore it
104+
may take up to 2-3 working days until you will receive your code.</p>`,
104105
callback: (confirmed) => {
105106
if (confirmed) this.#requestVerification(iva);
106107
},

0 commit comments

Comments
 (0)