From 0cceafa394bb4fc0fce4fa12eff70c3af988f760 Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Tue, 14 Nov 2023 16:23:02 +0000
Subject: [PATCH 1/2] Update embedded login dialog following UX review

---
 .../pkg/epinio/components/LoginDialog.vue     | 215 ++++++++++++++++++
 dashboard/pkg/epinio/dialog/LoginDialog.vue   | 199 ----------------
 dashboard/pkg/epinio/l10n/en-us.yaml          |  20 +-
 dashboard/pkg/epinio/login/epinio.vue         |   2 +-
 dashboard/pkg/epinio/pages/index.vue          |  37 ++-
 5 files changed, 255 insertions(+), 218 deletions(-)
 create mode 100644 dashboard/pkg/epinio/components/LoginDialog.vue
 delete mode 100644 dashboard/pkg/epinio/dialog/LoginDialog.vue

diff --git a/dashboard/pkg/epinio/components/LoginDialog.vue b/dashboard/pkg/epinio/components/LoginDialog.vue
new file mode 100644
index 0000000..ed1fe26
--- /dev/null
+++ b/dashboard/pkg/epinio/components/LoginDialog.vue
@@ -0,0 +1,215 @@
+<script>
+import epinioAuth, { EpinioAuthTypes } from '../utils/auth';
+import Password from '@shell/components/form/Password';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { Banner } from '@components/Banner';
+import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
+
+const PROVIDER_TYPES = {
+  LOCAL: 'local',
+  DEX:   'dex',
+};
+
+export default {
+  name: 'LoginDialog',
+
+  components: {
+    Banner, LabeledInput, Password
+  },
+
+  props: {
+    cluster: {
+      type:     Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      selectedTab:      '',
+      username:         '',
+      password:         '',
+      PROVIDER_TYPES,
+      selectedAuthType: null,
+      errors:           [],
+      stringify,
+      busy:             false,
+    };
+  },
+
+  mounted() {
+    if (!this.cluster.oidcEnabled) {
+      this.selectedAuthType = PROVIDER_TYPES.LOCAL;
+    } else {
+      this.selectedAuthType = PROVIDER_TYPES.DEX;
+    }
+  },
+
+  methods: {
+    selectType(type) {
+      this.errors = [];
+      this.selectedAuthType = type;
+    },
+
+    async login(provider) {
+      this.busy = true;
+      this.errors = [];
+      const errors = [];
+
+      try {
+        switch (provider) {
+        case PROVIDER_TYPES.LOCAL:
+
+          if (!this.username) {
+            errors.push('Username');
+          }
+          if (!this.password) {
+            errors.push('Password');
+          }
+          if (errors.length) {
+            throw new Error(`${ errors.join('/') } Required`);
+          }
+
+          await epinioAuth.login(this.cluster.createAuthConfig(EpinioAuthTypes.LOCAL, {
+            username: this.username,
+            password: this.password,
+            $axios:   this.$axios,
+          }));
+          break;
+        case PROVIDER_TYPES.DEX:
+          await epinioAuth.login(this.cluster.createAuthConfig(EpinioAuthTypes.DEX));
+
+          break;
+        default:
+          throw new Error(`Unknown log in type: ${ this.selectedTab }`);
+        }
+        this.cluster.loggedIn = true;
+
+        this.$router.push({
+          name:   'epinio-c-cluster-dashboard',
+          params: { cluster: this.cluster.id }
+        });
+      } catch (err) {
+        this.errors.push(...exceptionToErrorsArray(err));
+      }
+
+      this.busy = false;
+    },
+
+  }
+};
+</script>
+
+<template>
+  <div class="login-dialog">
+    <div v-if="errors.length">
+      <div
+        v-for="(err, idx) in errors"
+        :key="idx"
+      >
+        <Banner
+          color="error"
+          :label="stringify(err.Message || err)"
+        />
+      </div>
+    </div>
+    <div v-if="selectedAuthType === PROVIDER_TYPES.DEX">
+      <button
+        ref="btn"
+        :class="{'disabled': busy}"
+        class="btn bg-primary"
+        style="font-size: 18px;"
+        @click="!busy && login(PROVIDER_TYPES.DEX)"
+      >
+        {{ t('epinio.login.genericProvider') }}
+      </button>
+    </div>
+    <div
+      v-if="selectedAuthType === PROVIDER_TYPES.LOCAL"
+      class="local"
+    >
+      <form>
+        <div class="mb-20">
+          <LabeledInput
+            id="username"
+            ref="username"
+            v-model.trim="username"
+            :label="t('login.username')"
+            autocomplete="epinio-username"
+            :required="true"
+          />
+        </div>
+        <div class="mb-20">
+          <Password
+            id="password"
+            ref="password"
+            v-model="password"
+            :label="t('login.password')"
+            autocomplete="epinio-password"
+            :required="true"
+          />
+        </div>
+      </form>
+      <button
+        ref="btn"
+        class="btn bg-primary"
+        :class="{'disabled': busy}"
+        style="font-size: 18px;"
+        @click="!busy && login(PROVIDER_TYPES.LOCAL)"
+      >
+        {{ t('login.loginWithLocal') }}
+      </button>
+    </div>
+
+    <div
+      v-if="selectedAuthType === PROVIDER_TYPES.DEX"
+      class="mt-20 text-center"
+    >
+      <a
+        :class="{'disabled': busy}"
+        role="button"
+        @click="!busy && selectType(PROVIDER_TYPES.LOCAL)"
+      >
+        {{ t('login.useLocal') }}
+      </a>
+    </div>
+    <div
+      v-if="cluster.oidcEnabled && selectedAuthType === PROVIDER_TYPES.LOCAL"
+      class="mt-20 text-center"
+    >
+      <a
+        :class="{'disabled': busy}"
+        role="button"
+        @click="!busy && selectType(PROVIDER_TYPES.DEX)"
+      >
+        {{ t('epinio.login.useGenericProvider', {}) }}
+      </a>
+    </div>
+  </div>
+</template>
+<style lang='scss' scoped>
+$min-width: 400px;
+
+.login-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 240px;
+
+  .banner {
+    min-width: $min-width;
+  }
+
+  .local {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .labeled-input, .password {
+      min-width: $min-width;
+    }
+  }
+}
+</style>
diff --git a/dashboard/pkg/epinio/dialog/LoginDialog.vue b/dashboard/pkg/epinio/dialog/LoginDialog.vue
deleted file mode 100644
index 833b947..0000000
--- a/dashboard/pkg/epinio/dialog/LoginDialog.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<script>
-import GenericPrompt from '@shell/dialog/GenericPrompt';
-import Tabbed from '@shell/components/Tabbed/index.vue';
-import Tab from '@shell/components/Tabbed/Tab.vue';
-import epinioAuth, { EpinioAuthTypes } from '../utils/auth';
-import Password from '@shell/components/form/Password';
-import { LabeledInput } from '@components/Form/LabeledInput';
-
-export default {
-  name: 'LoginDialog',
-
-  components: {
-    GenericPrompt, Tabbed, Tab, LabeledInput, Password
-  },
-
-  props: {
-    resources: {
-      type:     Array,
-      required: true
-    }
-  },
-
-  data() {
-    return {
-      selectedTab: '',
-      username:    '',
-      password:    '',
-      config:      {
-        applyMode:   'login',
-        applyAction: this.login,
-      },
-      tab: {
-        local: 'local',
-        dex:   'dex'
-      }
-    };
-  },
-
-  computed: {
-    cluster() {
-      return this.resources[0];
-    }
-  },
-
-  mounted() {
-    if (!this.cluster.oidcEnabled) {
-      this.selectedTab = this.tab.local;
-    }
-  },
-
-  methods: {
-    async login() {
-      const errors = [];
-
-      switch (this.selectedTab) {
-      case this.tab.local:
-        if (!this.username) {
-          errors.push('Username');
-        }
-        if (!this.password) {
-          errors.push('Password');
-        }
-        if (errors.length) {
-          return Promise.reject(new Error(`${ errors.join('/') } Required`));
-        }
-
-        await epinioAuth.login(this.cluster.createAuthConfig(EpinioAuthTypes.LOCAL, {
-          username: this.username,
-          password: this.password,
-          $axios:   this.$axios,
-        }));
-        break;
-      case this.tab.dex:
-        await epinioAuth.login(this.cluster.createAuthConfig(EpinioAuthTypes.DEX));
-
-        break;
-      default:
-        throw new Error(`Unknown log in type: ${ this.selectedTab }`);
-      }
-
-      this.cluster.loggedIn = true;
-
-      this.$router.push({
-        name:   'epinio-c-cluster-dashboard',
-        params: { cluster: this.cluster.id }
-      });
-    },
-
-    tabChanged({ selectedName }) {
-      this.selectedTab = selectedName;
-    },
-
-    close() {
-      this.$emit('close', false);
-    }
-  }
-};
-</script>
-
-<template>
-  <GenericPrompt
-    v-bind="config"
-    @close="close"
-  >
-    <h4
-      slot="title"
-      class="text-default-text login-dialog__title"
-    >
-      {{ t('epinio.login.modal.title') }}
-    </h4>
-
-    <template slot="body">
-      <Tabbed
-        v-if="cluster.oidcEnabled"
-        @changed="tabChanged"
-      >
-        <Tab
-          label-key="epinio.login.modal.local.tabLabel"
-          :name="tab.local"
-          :weight="3"
-          class="login-dialog__tab"
-        >
-          <form>
-            <div class="span-10 offset-1">
-              <div class="mb-20">
-                <LabeledInput
-                  id="username"
-                  ref="username"
-                  v-model.trim="username"
-                  data-testid="local-login-username"
-                  :label="t('login.username')"
-                  autocomplete="epinio-username"
-                  :required="true"
-                />
-              </div>
-              <div class="">
-                <Password
-                  id="password"
-                  ref="password"
-                  v-model="password"
-                  data-testid="local-login-password"
-                  :label="t('login.password')"
-                  autocomplete="epinio-password"
-                  :required="true"
-                />
-              </div>
-            </div>
-          </form>
-        </Tab>
-        <Tab
-          label-key="epinio.login.modal.dex.tabLabel"
-          :name="tab.dex"
-          :weight="2"
-          class="login-dialog__tab"
-        >
-          <p>
-            {{ t('epinio.login.modal.dex.prompt') }}
-          </p>
-        </Tab>
-      </Tabbed>
-      <form v-else>
-        <div class="span-10 offset-1 mt-15">
-          <div class="mb-20">
-            <LabeledInput
-              id="username"
-              ref="username"
-              v-model.trim="username"
-              data-testid="local-login-username"
-              :label="t('login.username')"
-              autocomplete="epinio-username"
-              :required="true"
-            />
-          </div>
-          <div class="">
-            <Password
-              id="password"
-              ref="password"
-              v-model="password"
-              data-testid="local-login-password"
-              :label="t('login.password')"
-              autocomplete="epinio-password"
-              :required="true"
-            />
-          </div>
-        </div>
-      </form>
-    </template>
-  </GenericPrompt>
-</template>
-<style lang='scss' scoped>
-.login-dialog {
-  &__title {
-    margin-bottom: 0;
-  }
-  &__tab {
-    min-height: 145px;
-  }
-}
-</style>
diff --git a/dashboard/pkg/epinio/l10n/en-us.yaml b/dashboard/pkg/epinio/l10n/en-us.yaml
index 90de0ae..fc0d1ab 100644
--- a/dashboard/pkg/epinio/l10n/en-us.yaml
+++ b/dashboard/pkg/epinio/l10n/en-us.yaml
@@ -49,6 +49,15 @@ asyncButton:
     action: Log In
     success: Log In
     waiting: Log In
+  refresh:
+    action: 'Refresh'
+    actionIcon: refresh
+    error: 'Refresh'
+    errorIcon: error
+    success: 'Refreshed'
+    successIcon: checkmark
+    waiting: 'Refreshing'
+    waitingIcon: refresh
 epinio:
   label: Epinio
   about:
@@ -367,16 +376,9 @@ epinio:
   warnings:
     noNamespace: There are no namespaces. Please create one before proceeding
   login:
-    modal:
-      title: Log In
-      local:
-        tabLabel: Local
-      dex:
-        tabLabel: Auth Provider
-        prompt: Login via Auth Provider
+    genericProvider: Log in with Auth Provider
+    useGenericProvider: Use Auth Provider
 model:
   authConfig:
     provider:
       epinio: Auth Provider
-login:
-  genericProvider: Log in with Auth Provider
diff --git a/dashboard/pkg/epinio/login/epinio.vue b/dashboard/pkg/epinio/login/epinio.vue
index e37a348..893c8a9 100644
--- a/dashboard/pkg/epinio/login/epinio.vue
+++ b/dashboard/pkg/epinio/login/epinio.vue
@@ -60,7 +60,7 @@ export default {
       :disabled="$fetchState.pending"
       @click="login"
     >
-      {{ t('login.genericProvider') }}
+      {{ t('epinio.login.genericProvider') }}
     </button>
   </div>
 </template>
diff --git a/dashboard/pkg/epinio/pages/index.vue b/dashboard/pkg/epinio/pages/index.vue
index 4cad827..b89858f 100644
--- a/dashboard/pkg/epinio/pages/index.vue
+++ b/dashboard/pkg/epinio/pages/index.vue
@@ -10,7 +10,8 @@ import AsyncButton from '@shell/components/AsyncButton.vue';
 import { _MERGE } from '@shell/plugins/dashboard-store/actions';
 import epinioAuth, { EpinioAuthTypes } from '../utils/auth';
 import EpinioCluster, { EpinioInfoPath } from '../models/cluster';
-import PromptModal from '@shell/components/PromptModal.vue';
+import LoginDialog from '../components/LoginDialog.vue';
+import Dialog from '@shell/components/Dialog.vue';
 
 interface Data {
   clustersSchema: any;
@@ -19,7 +20,7 @@ interface Data {
 // Data, Methods, Computed, Props
 export default Vue.extend<Data, any, any, any>({
   components: {
-    AsyncButton, Loading, Link, ResourceTable, PromptModal
+    AsyncButton, Loading, Link, ResourceTable, LoginDialog, Dialog
   },
 
   layout: 'plain',
@@ -34,7 +35,8 @@ export default Vue.extend<Data, any, any, any>({
     return {
       clustersSchema: this.$store.getters[`${ EPINIO_MGMT_STORE }/schemaFor`](EPINIO_TYPES.CLUSTER),
       version:        null,
-      infoUrl:        EpinioInfoPath
+      infoUrl:        EpinioInfoPath,
+      currentCluster: {},
     };
   },
 
@@ -125,13 +127,14 @@ export default Vue.extend<Data, any, any, any>({
           params: { cluster: c.id }
         });
       } else {
-        await this.$store.dispatch('epinio/promptModal', {
-          resources:  c,
-          component:  'LoginDialog',
-          modalWidth: '450px',
-        }, { root: true });
+        this.currentCluster = c;
+        this.$modal.show('epinio-login-dialog');
       }
     },
+
+    closeDialog() {
+      this.$modal.hide('epinio-login-dialog');
+    }
   }
 
 });
@@ -194,7 +197,23 @@ export default Vue.extend<Data, any, any, any>({
         </template>
       </ResourceTable>
     </div>
-    <PromptModal />
+    <Dialog
+      name="epinio-login-dialog"
+      :title="''"
+      style="width:'340px'"
+    >
+      <template #buttons>
+        <button
+          class="btn role-secondary"
+          @click="closeDialog(false)"
+        >
+          {{ t('generic.cancel') }}
+        </button>
+      </template>
+      <template>
+        <LoginDialog :cluster="currentCluster" />
+      </template>
+    </Dialog>
   </div>
 </template>
 

From 6680ccce9b5871a0723e0d4cdff8dca78dd16a6d Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Thu, 16 Nov 2023 16:26:48 +0000
Subject: [PATCH 2/2] Remove the local user part of log in button if that's the
 only option

---
 dashboard/pkg/epinio/components/LoginDialog.vue | 2 +-
 dashboard/pkg/epinio/l10n/en-us.yaml            | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/dashboard/pkg/epinio/components/LoginDialog.vue b/dashboard/pkg/epinio/components/LoginDialog.vue
index ed1fe26..dd435d9 100644
--- a/dashboard/pkg/epinio/components/LoginDialog.vue
+++ b/dashboard/pkg/epinio/components/LoginDialog.vue
@@ -157,7 +157,7 @@ export default {
         style="font-size: 18px;"
         @click="!busy && login(PROVIDER_TYPES.LOCAL)"
       >
-        {{ t('login.loginWithLocal') }}
+        {{ t(cluster.oidcEnabled ? 'login.loginWithLocal' : 'epinio.login.login') }}
       </button>
     </div>
 
diff --git a/dashboard/pkg/epinio/l10n/en-us.yaml b/dashboard/pkg/epinio/l10n/en-us.yaml
index fc0d1ab..13190ce 100644
--- a/dashboard/pkg/epinio/l10n/en-us.yaml
+++ b/dashboard/pkg/epinio/l10n/en-us.yaml
@@ -376,6 +376,7 @@ epinio:
   warnings:
     noNamespace: There are no namespaces. Please create one before proceeding
   login:
+    login: Log in
     genericProvider: Log in with Auth Provider
     useGenericProvider: Use Auth Provider
 model: