chore: add more informative error message to login screen

SteKoe · SteKoe · commit d26a0683f540 · 2022-09-30T10:45:17.000+02:00
diff --git a/spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.vue b/spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.vue
@@ -38,7 +38,7 @@
         />
         <p
           class="text-sm"
-          v-text="message"
+          v-html="message"
         />
       </div>
     </div>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.de.json
@@ -22,6 +22,7 @@
     "execution_failed": "Ausführung fehlgeschlagen.",
     "execution_successful": "Ausführung erfolgreich.",
     "failed": "Fehlgeschlagen",
+    "fetching_data": "Lade Daten...",
     "fetch_failed": "Abruf der Daten fehlgeschlagen.",
     "float": "Float",
     "hours": "{count} Stunde | {count} Stunden",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/i18n/i18n.en.json
@@ -28,6 +28,7 @@
     "execution_failed": "Execution failed",
     "execution_successful": "Execution successful",
     "failed": "Failed",
+    "fetching_data": "Fetching data...",
     "fetch_failed": "Fetching of data failed.",
     "float": "Float",
     "filter": "Filter",
diff --git a/spring-boot-admin-server-ui/src/main/frontend/index.html b/spring-boot-admin-server-ui/src/main/frontend/index.html
@@ -16,7 +16,7 @@
 
 <!DOCTYPE html>
 <html class="h-full">
-<head >
+<head>
     <base th:href="${baseUrl}" href="/">
     <meta charset="utf-8">
     <title th:text="${uiSettings.title}">Spring Boot Admin</title>
@@ -34,7 +34,7 @@
     <link th:each="cssExtension : ${cssExtensions}" th:href="'extensions/' + ${cssExtension.resourcePath}" rel="stylesheet">
 
 </head>
-<body>
+<body class="h-full">
     <div id="app"></div>
 
     <script lang="javascript" src="sba-settings.js"></script>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.de.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.de.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Anmelden",
-    "invalid_username_or_password": "Benutzername oder Passwort falsch",
     "logout_successful": "Erfolgreich abgemeldet",
     "remember_me": "Angemeldet bleiben",
+    "error": {
+      "invalid_username_or_password": "Benutzername oder Passwort falsch"
+    },
     "placeholder": {
       "username": "Benutzername",
       "password": "Passwort"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.en.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.en.json
@@ -1,9 +1,12 @@
 {
   "login": {
     "button_login": "Login",
-    "invalid_username_or_password": "Invalid username or password",
     "logout_successful": "Logout successful",
     "remember_me": "Remember me",
+    "error": {
+      "login_required": "Login required to access the resource <em>(Error: {code})</em>.",
+      "invalid_username_or_password": "Invalid username or password"
+    },
     "placeholder": {
       "username": "Username",
       "password": "Password"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.es.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.es.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Ingresar",
-    "invalid_username_or_password": "Usuario o contraseña inválida",
     "logout_successful": "Logout exitoso",
     "remember_me": "Recordarme",
+    "error": {
+      "invalid_username_or_password": "Usuario o contraseña inválida"
+    },
     "placeholder": {
       "username": "Usuario",
       "password": "Contraseña"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.fr.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.fr.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Se Connecter",
-    "invalid_username_or_password": "Nom d'utilisateur ou mot de passe incorrect",
     "logout_successful": "Déconnexion réussie",
     "remember_me": "Se souvenir de moi",
+    "error": {
+      "invalid_username_or_password": "Nom d'utilisateur ou mot de passe incorrect"
+    },
     "placeholder": {
       "username": "Nom d'utilisateur",
       "password": "Mot de passe"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.is.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.is.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Skrá inn",
-    "invalid_username_or_password": "Notandanafn eða lykilorð rángt",
     "logout_successful": "Skráð út",
     "remember_me": "Mundu eftir mér",
+    "error": {
+      "invalid_username_or_password": "Notandanafn eða lykilorð rángt"
+    },
     "placeholder": {
       "username": "Notandanafn",
       "password": "Lykilorð"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.ko.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.ko.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "로그인",
-    "invalid_username_or_password": "잘못된 사용자명 또는 암호 입니다.",
     "logout_successful": "로그아웃을 성공했습니다.",
     "remember_me": "사용자 기억",
+    "error": {
+      "invalid_username_or_password": "잘못된 사용자명 또는 암호 입니다."
+    },
     "placeholder": {
       "username": "사용자명",
       "password": "암호"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.pt-BR.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.pt-BR.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Entrar",
-    "invalid_username_or_password": "Usuário ou senha inválidos",
     "logout_successful": "Logout com sucesso",
     "remember_me": "Me lembrar",
+    "error": {
+      "invalid_username_or_password": "Usuário ou senha inválidos"
+    },
     "placeholder": {
       "username": "Nome do usuário",
       "password": "Senha"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.ru.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.ru.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "Войти",
-    "invalid_username_or_password": "Неверные имя пользователя или пароль",
     "logout_successful": "Вы успешно вышли из системы",
     "remember_me": "Запомнить меня",
+    "error": {
+      "invalid_username_or_password": "Неверные имя пользователя или пароль"
+    },
     "placeholder": {
       "username": "Имя пользователя",
       "password": "Пароль"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.zh-CN.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.zh-CN.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "登录",
-    "invalid_username_or_password": "无效的用户名或密码",
     "logout_successful": "注销成功",
     "remember_me": "记住用户",
+    "error": {
+      "invalid_username_or_password": "无效的用户名或密码"
+    },
     "placeholder": {
       "username": "用户名",
       "password": "密码"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.zh-TW.json b/spring-boot-admin-server-ui/src/main/frontend/login/login.i18n.zh-TW.json
@@ -1,9 +1,11 @@
 {
   "login": {
     "button_login": "登入",
-    "invalid_username_or_password": "無效的使用者名稱或密碼",
     "logout_successful": "登出成功",
     "remember_me": "記住我",
+    "error": {
+      "invalid_username_or_password": "無效的使用者名稱或密碼"
+    },
     "placeholder": {
       "username": "使用者名稱",
       "password": "密碼"
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.stories.js b/spring-boot-admin-server-ui/src/main/frontend/login/login.stories.js
@@ -6,8 +6,10 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { Login },
-  setup() { return { args }; },
+  components: {Login},
+  setup() {
+    return {args};
+  },
   template: '<Login v-bind="args" />',
 });
 
diff --git a/spring-boot-admin-server-ui/src/main/frontend/login/login.vue b/spring-boot-admin-server-ui/src/main/frontend/login/login.vue
@@ -1,20 +1,20 @@
 <template>
   <form
-    method="post"
     class="w-5/6 md:1/2 max-w-lg"
+    method="post"
   >
     <sba-panel>
       <input
         v-if="csrf"
-        type="hidden"
         :name="csrf.parameterName"
         :value="csrf.token"
+        type="hidden"
       >
       <div class="flex text-lg pb-3 items-center">
         <img
           v-if="icon"
-          class="w-8 h-8 mr-2"
           :src="icon"
+          class="w-8 h-8 mr-2"
         >
         <h1
           class="title has-text-primary"
@@ -30,23 +30,23 @@
             :error="error"
           />
           <sba-alert
-            :severity="Severity.INFO"
             :error="logout"
+            :severity="Severity.INFO"
           />
           <div
-            class="pb-4 form-group"
             :class="{'has-errors': error}"
+            class="pb-4 form-group"
           >
             <sba-input
-              type="text"
+              :label="t('login.placeholder.username')"
               name="username"
-              :label="$t('login.placeholder.username')"
+              type="text"
             />
             <sba-input
-              type="password"
-              name="password"
+              :label="t('login.placeholder.password')"
               autocomplete="current-password"
-              :label="$t('login.placeholder.password')"
+              name="password"
+              type="password"
             />
           </div>
         </div>
@@ -55,60 +55,68 @@
       <template #footer>
         <div class="text-right">
           <sba-button>
-            {{ $t('login.button_login') }}
+            {{ t('login.button_login') }}
           </sba-button>
         </div>
       </template>
     </sba-panel>
   </form>
 </template>
 
-<script>
+<script setup>
 import SbaPanel from "../components/sba-panel.vue";
 import SbaInput from "../components/sba-input.vue";
 import SbaButton from "../components/sba-button.vue";
 import SbaAlert, {Severity} from "../components/sba-alert.vue";
 import SbaWave from "../components/sba-wave.vue";
+import {computed} from "vue";
+import {useI18n} from "vue-i18n";
 
-export default {
-  components: {SbaWave, SbaAlert, SbaButton, SbaInput, SbaPanel},
-  props: {
-    param: {
-      type: Object,
-      default: () => ({})
-    },
-    icon: {
-      type: String,
-      default: undefined
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    csrf: {
-      type: Object,
-      default: undefined
-    },
-    theme: {
-      type: Object,
-      default: undefined
-    }
+const i18n = useI18n();
+const t = i18n.t;
+
+const props = defineProps({
+  param: {
+    type: Object,
+    default: () => ({})
   },
-  data() {
-    return {
-      Severity,
-      background: this.theme?.background,
-    }
+  icon: {
+    type: String,
+    default: undefined
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  csrf: {
+    type: Object,
+    default: undefined
   },
-  computed: {
-    error() {
-      return (this.param.error !== undefined) ? this.$t('login.invalid_username_or_password') : undefined;
-    },
-    logout() {
-      return (this.param.logout !== undefined) ? this.$t('login.logout_successful') : undefined;
+  theme: {
+    type: Object,
+    default: undefined
+  }
+})
+
+const background = props.theme.background;
+
+const error = computed(() => {
+  let errors = props.param.error;
+
+  if (Array.isArray(errors)) {
+    if (errors.includes("401")) {
+      return t('login.error.login_required', {code: errors[0]});
+    } else {
+      return t('login.invalid_username_or_password');
     }
+  } else {
+    return undefined;
   }
-}
+})
+
+const logout = computed(() => {
+  return (props.param.logout !== undefined) ? t('login.logout_successful') : undefined
+})
 </script>
 
 <style scoped>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/services/instance.js b/spring-boot-admin-server-ui/src/main/frontend/services/instance.js
@@ -20,7 +20,6 @@ import logtail from '../utils/logtail';
 import {concat, from, ignoreElements, Observable} from '../utils/rxjs';
 import uri from '../utils/uri';
 import saveAs from 'file-saver';
-import {useToast} from "vue-toast-notification";
 
 const actuatorMimeTypes = [
   'application/vnd.spring-boot.actuator.v2+json',
@@ -80,7 +79,7 @@ class Instance {
   }
 
   async fetchHealth() {
-    return await this.axios.get(uri`actuator/health`, { validateStatus: null } );
+    return await this.axios.get(uri`actuator/health`, {validateStatus: null});
   }
 
   async fetchEnv(name) {
diff --git a/spring-boot-admin-server-ui/src/main/frontend/shell/index.vue b/spring-boot-admin-server-ui/src/main/frontend/shell/index.vue
@@ -21,7 +21,7 @@
       :error="error"
       :applications-initialized="applicationsInitialized"
     />
-    <div class="mt-14">
+    <div class="sba-container">
       <router-view
         :applications="applications"
         :error="error"
@@ -48,3 +48,10 @@ defineProps({
 
 const {applications} = useApplicationStore();
 </script>
+
+<style scoped>
+.sba-container {
+  @apply pt-14;
+  height: 100%;
+}
+</style>
diff --git a/spring-boot-admin-server-ui/src/main/frontend/utils/axios.js b/spring-boot-admin-server-ui/src/main/frontend/utils/axios.js
@@ -21,10 +21,9 @@ axios.defaults.xsrfHeaderName = sbaConfig.csrf.headerName;
 
 export const redirectOn401 = (predicate = () => true) => error => {
   if (error.response && error.response.status === 401 && predicate(error)) {
-    window.location.assign(`login?redirectTo=${encodeURIComponent(window.location.href)}`);
+    window.location.assign(`login?redirectTo=${encodeURIComponent(window.location.href)}&error=401`);
   }
   return Promise.reject(error);
-
 };
 
 const instance = axios.create({withCredentials: true, headers: {'Accept': 'application/json'}});
diff --git a/spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sba-instance-section.vue b/spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sba-instance-section.vue
