|
7 | 7 | </template> |
8 | 8 | </app-section> |
9 | 9 | </app-container> |
10 | | - |
11 | | - <app-container> |
12 | | - <app-section class="p-4"> |
13 | | - <div class="flex flex-column align-items-center row-gap-3 text-center"> |
14 | | - <PAvatar |
15 | | - v-if="user" |
16 | | - :label="$filters.getAvatar(user?.email, user?.username)" |
17 | | - size="xlarge" |
18 | | - shape="circle" |
19 | | - :pt="{ |
20 | | - root: { |
21 | | - class: 'font-semibold text-color-forest' |
22 | | - } |
23 | | - }" |
24 | | - /> |
25 | | - <h3 class="headline-h2" data-cy="profile-username"> |
26 | | - {{ user?.username }} |
27 | | - </h3> |
28 | | - <p |
29 | | - class="m-0 paragraph-p6 overflow-wrap-anywhere" |
30 | | - data-cy="profile-email" |
| 10 | + <template v-if="user"> |
| 11 | + <app-container> |
| 12 | + <app-section class="p-4"> |
| 13 | + <div |
| 14 | + class="flex flex-column align-items-center row-gap-3 text-center" |
31 | 15 | > |
32 | | - <i |
33 | | - v-if="!user?.verified_email" |
34 | | - v-tooltip.top="{ |
35 | | - value: 'Email verification status' |
| 16 | + <PAvatar |
| 17 | + :label="$filters.getAvatar(user?.email, profile?.name)" |
| 18 | + size="xlarge" |
| 19 | + shape="circle" |
| 20 | + :pt="{ |
| 21 | + root: { |
| 22 | + class: 'font-semibold text-color-forest' |
| 23 | + } |
36 | 24 | }" |
37 | | - class="ti ti-alert-circle-filled" |
38 | | - style="color: var(--grape-color)" |
39 | | - ></i> |
40 | | - {{ user?.email }} |
41 | | - </p> |
42 | | - <dl class="profile-view-detail-list grid grid-nogutter paragraph-p5"> |
43 | | - <div |
44 | | - class="col-6 flex flex-column align-items-start text-left flex-wrap" |
| 25 | + /> |
| 26 | + <h3 class="headline-h2" data-cy="profile-name"> |
| 27 | + {{ |
| 28 | + profile?.name |
| 29 | + ? `${profile.name} (${user?.username})` |
| 30 | + : user.username |
| 31 | + }} |
| 32 | + </h3> |
| 33 | + <p |
| 34 | + class="m-0 paragraph-p6 overflow-wrap-anywhere" |
| 35 | + data-cy="profile-email" |
45 | 36 | > |
46 | | - <dt class="paragraph-p6 opacity-80 mb-2">Full name</dt> |
47 | | - <dd class="font-semibold" data-cy="profile-name"> |
48 | | - {{ profile?.name || '-' }} |
49 | | - </dd> |
50 | | - </div> |
51 | | - <div class="col-6 flex flex-column align-items-end"> |
52 | | - <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt> |
53 | | - <dd class="font-semibold" data-cy="profile-registered"> |
54 | | - {{ $filters.date(user?.registration_date) }} |
55 | | - </dd> |
56 | | - </div> |
57 | | - </dl> |
58 | | - </div> |
59 | | - </app-section> |
60 | | - </app-container> |
61 | | - <app-container v-if="userStore.loggedUser?.id !== user?.id"> |
62 | | - <app-section> |
63 | | - <template #title>Advanced</template> |
64 | | - |
65 | | - <app-settings :items="settingsItems"> |
66 | | - <template #notifications> |
67 | | - <div class="flex-shrink-0 paragraph-p1"> |
68 | | - <PInputSwitch |
69 | | - :model-value="profile?.receive_notifications" |
70 | | - disabled |
71 | | - /> |
72 | | - </div> |
73 | | - </template> |
74 | | - <template #adminAccess> |
75 | | - <div class="flex-shrink-0 paragraph-p1"> |
| 37 | + <i |
| 38 | + v-if="!user?.verified_email" |
| 39 | + v-tooltip.top="{ |
| 40 | + value: 'Email verification status' |
| 41 | + }" |
| 42 | + class="ti ti-alert-circle-filled" |
| 43 | + style="color: var(--grape-color)" |
| 44 | + ></i> |
| 45 | + {{ user?.email }} |
| 46 | + </p> |
| 47 | + <dl class="profile-view-detail-list grid grid-nogutter paragraph-p5"> |
76 | 48 | <div |
77 | | - class="flex align-items-center flex-shrink-0" |
78 | | - data-cy="profile-notification" |
| 49 | + class="col-6 flex flex-column align-items-start text-left flex-wrap" |
79 | 50 | > |
| 51 | + <dt class="paragraph-p6 opacity-80 mb-2">Last signed in</dt> |
| 52 | + <dd class="font-semibold" data-cy="profile-last-signed-in"> |
| 53 | + {{ $filters.date(user.last_signed_in) || '-' }} |
| 54 | + </dd> |
| 55 | + </div> |
| 56 | + <div class="col-6 flex flex-column align-items-end"> |
| 57 | + <dt class="paragraph-p6 opacity-80 mb-2">Registered</dt> |
| 58 | + <dd class="font-semibold" data-cy="profile-registered"> |
| 59 | + {{ $filters.date(user?.registration_date) }} |
| 60 | + </dd> |
| 61 | + </div> |
| 62 | + </dl> |
| 63 | + </div> |
| 64 | + </app-section> |
| 65 | + </app-container> |
| 66 | + <app-container v-if="userStore.loggedUser?.id !== user?.id"> |
| 67 | + <app-section> |
| 68 | + <template #title>Advanced</template> |
| 69 | + |
| 70 | + <app-settings :items="settingsItems"> |
| 71 | + <template #notifications> |
| 72 | + <div class="flex-shrink-0 paragraph-p1"> |
| 73 | + <PInputSwitch |
| 74 | + :model-value="profile?.receive_notifications" |
| 75 | + disabled |
| 76 | + /> |
| 77 | + </div> |
| 78 | + </template> |
| 79 | + <template #adminAccess> |
| 80 | + <div class="flex-shrink-0 paragraph-p1"> |
| 81 | + <div |
| 82 | + class="flex align-items-center flex-shrink-0" |
| 83 | + data-cy="profile-notification" |
| 84 | + > |
| 85 | + <PButton |
| 86 | + :severity="user?.is_admin ? 'danger' : 'warning'" |
| 87 | + :disabled=" |
| 88 | + !instanceStore.configData?.enable_superadmin_assignment |
| 89 | + " |
| 90 | + @click="switchAdminAccess" |
| 91 | + :label=" |
| 92 | + !user?.is_admin |
| 93 | + ? 'Grant admin access' |
| 94 | + : 'Revoke admin access' |
| 95 | + " |
| 96 | + /> |
| 97 | + </div> |
| 98 | + </div> |
| 99 | + </template> |
| 100 | + <template #accountActivation> |
| 101 | + <div class="flex-shrink-0"> |
80 | 102 | <PButton |
81 | | - :severity="user?.is_admin ? 'danger' : 'warning'" |
82 | | - :disabled=" |
83 | | - !instanceStore.configData?.enable_superadmin_assignment |
84 | | - " |
85 | | - @click="switchAdminAccess" |
| 103 | + @click="changeStatusDialog" |
| 104 | + :severity="user?.active ? 'warning' : 'secondary'" |
86 | 105 | :label=" |
87 | | - !user?.is_admin |
88 | | - ? 'Grant admin access' |
89 | | - : 'Revoke admin access' |
| 106 | + user?.active ? 'Deactivate account' : 'Activate account' |
90 | 107 | " |
| 108 | + class="w-auto mr-1" |
91 | 109 | /> |
92 | 110 | </div> |
93 | | - </div> |
94 | | - </template> |
95 | | - <template #accountActivation> |
96 | | - <div class="flex-shrink-0"> |
97 | | - <PButton |
98 | | - @click="changeStatusDialog" |
99 | | - :severity="user?.active ? 'warning' : 'secondary'" |
100 | | - :label=" |
101 | | - user?.active ? 'Deactivate account' : 'Activate account' |
102 | | - " |
103 | | - class="w-auto mr-1" |
104 | | - /> |
105 | | - </div> |
106 | | - </template> |
107 | | - <template #deleteAccount> |
108 | | - <div class="flex-shrink-0"> |
109 | | - <PButton |
110 | | - @click="confirmDeleteUser" |
111 | | - severity="danger" |
112 | | - data-cy="profile-close-account-btn" |
113 | | - label="Delete account" |
114 | | - /> |
115 | | - </div> |
116 | | - </template> |
117 | | - </app-settings> |
118 | | - </app-section> |
119 | | - </app-container> |
| 111 | + </template> |
| 112 | + <template #deleteAccount> |
| 113 | + <div class="flex-shrink-0"> |
| 114 | + <PButton |
| 115 | + @click="confirmDeleteUser" |
| 116 | + severity="danger" |
| 117 | + data-cy="profile-close-account-btn" |
| 118 | + label="Delete account" |
| 119 | + /> |
| 120 | + </div> |
| 121 | + </template> |
| 122 | + </app-settings> |
| 123 | + </app-section> |
| 124 | + </app-container> |
| 125 | + </template> |
120 | 126 | </admin-layout> |
121 | 127 | </template> |
122 | 128 |
|
|
0 commit comments