Apply OIDC/user profile related changes to admin UI.

frontend/src/App.vue

@@ -13,16 +13,21 @@
         <navigation v-if="isMobile" :is-mobile="isMobile" :active-item="activeItem" :active-group="activeGroup"
           @toggleGroup="toggleGroup" @doLogout="doLogout" />
 
-        <b-navbar-dropdown v-else>
+        <b-navbar-dropdown class="user" tag="div" right v-else>
           <template v-if="profile.username" #label>
-            <div class="user-avatar">
+            <span class="user-avatar">
               <img v-if="profile.avatar" :src="profile.avatar" alt="" />
               <span v-else>{{ profile.username[0].toUpperCase() }}</span>
-            </div>
-            {{ profile.username }}
+            </span>
           </template>
+
+          <b-navbar-item class="user-name" tag="router-link" to="/user/profile">
+            <strong>{{ profile.username }}</strong>
+            <div class="is-size-7">{{ profile.name }}</div>
+          </b-navbar-item>
+
           <b-navbar-item href="#">
-            <router-link :to="`/user/profile`">
+            <router-link to="/user/profile">
               <b-icon icon="account-outline" /> {{ $t('users.profile') }}
             </router-link>
           </b-navbar-item>

frontend/src/assets/style.scss

@@ -135,23 +135,38 @@ section {
     background-color: #efefef;
   }
 
+.navbar-item.user {
+  .navbar-link:not(.is-arrowless)::after {
+    margin-top: -0.6rem;
+  }
+
+  .user-name {
+    display: block;
+    min-width: 150px;
+  }
+}
+
 .user-avatar {
   img {
     display: inline-block;
     border-radius: 100%;
-    width: 24px;
-    height: 24px;
+    width: 32px;
+    height: 32px;
+    max-height: none;
   }
   span {
     background-color: #ddd;
     border-radius: 100%;
-    width: 24px;
-    height: 24px;
+    width: 32px;
+    height: 32px;
     text-align: center;
     display: inline-block;
-    margin-right: 10px;
     font-size: 0.875rem;
-    line-height: 1.6;
+    font-weight: bold;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
@@ -169,6 +184,11 @@ section {
   }
 }
 
+.spaced-links a {
+  margin-right: 15px;
+  display: inline-block;
+}
+
 /* Two column sidebar+body layout */
 #app {
   min-height: 100%;
@@ -880,10 +900,6 @@ section.analytics {
     height: auto;
     min-height: 350px;
   }
-  .smtp-shortcuts a {
-    margin-right: 15px;
-    display: inline-block;
-  }
 }
 
 /* Logs */

frontend/src/views/RoleForm.vue

@@ -15,7 +15,7 @@
 
       <section expanded class="modal-card-body">
         <b-field :label="$t('globals.fields.name')" label-position="on-border">
-          <b-input :disabled="disabled" :maxlength="200" v-model="form.name" name="name" :ref="'focus'" required />
+          <b-input autofocus :disabled="disabled" :maxlength="200" v-model="form.name" name="name" ref="focus" required />
         </b-field>
 
         <div v-if="!disabled" class="box">

frontend/src/views/UserForm.vue

@@ -14,7 +14,7 @@
       </header>
       <section expanded class="modal-card-body">
         <b-field :label="$t('users.username')" label-position="on-border">
-          <b-input :maxlength="200" v-model="form.username" name="username" :ref="'focus'"
+          <b-input :maxlength="200" v-model="form.username" name="username" ref="focus" autofocus
             :placeholder="$t('users.username')" required :message="$t('users.usernameHelp')" autocomplete="off"
             pattern="[a-zA-Z0-9_\-\.]+$" />
         </b-field>
@@ -198,7 +198,7 @@ export default Vue.extend({
   },
 
   mounted() {
-    this.form = { ...this.form, ...this.$props.data, roleId: this.$props.data.role.id };
+    this.form = { ...this.form, ...this.$props.data };
 
     this.$api.getRoles();
 

frontend/src/views/UserProfile.vue

@@ -6,13 +6,13 @@
       @{{ form.username }}
     </h1>
 
-    <b-tag>{{ form.roleName }}</b-tag>
+    <b-tag>{{ form.role.name }}</b-tag>
 
     <br /><br /><br />
     <form @submit.prevent="onSubmit">
       <b-field v-if="form.type !== 'api'" :label="$t('subscribers.email')" label-position="on-border">
-        <b-input :maxlength="200" v-model="form.email" name="email" :placeholder="$t('subscribers.email')" required
-          autofocus />
+        <b-input :maxlength="200" v-model="form.email" name="email" :placeholder="$t('subscribers.email')"
+          :disabled="!form.passwordLogin" required autofocus />
       </b-field>
 
       <b-field :label="$t('globals.fields.name')" label-position="on-border">

frontend/src/views/Users.vue

@@ -86,7 +86,7 @@
 
       <b-table-column v-slot="props" field="last_login" :label="$t('users.lastLogin')" header-class="cy-updated_at"
         sortable>
-        {{ props.row.loggedinAt ? $utils.niceDate(props.row.loggedinAt) : '—' }}
+        {{ props.row.loggedinAt ? $utils.niceDate(props.row.loggedinAt, true) : '—' }}
       </b-table-column>
 
       <b-table-column v-slot="props" cell-class="actions" align="right">

frontend/src/views/settings/smtp.vue

@@ -66,7 +66,7 @@
                 </b-field>
               </div>
             </div><!-- auth -->
-            <div class="smtp-shortcuts is-size-7">
+            <div class="spaced-links is-size-7">
               <a href="#" @click.prevent="() => fillSettings(n, 'gmail')">Gmail</a>
               <a href="#" @click.prevent="() => fillSettings(n, 'ses')">Amazon SES</a>
               <a href="#" @click.prevent="() => fillSettings(n, 'mailgun')">Mailgun</a>