UI: Add option to Login to a specific Project view via setting on config.json (apache#10935)

* UI: Login to a specific Project view

* Fix project icon

* Add the option to display project on login on the config.json file

---------

Co-authored-by: Pearl Dsilva <[email protected]>

Author: 2 people

ui/public/config.json

@@ -96,6 +96,7 @@
   "basicZoneEnabled": true,
   "multipleServer": false,
   "allowSettingTheme": true,
+  "displayProjectFieldOnLogin": false,
   "imageSelectionInterface": "modern",
   "showUserCategoryForModernImageSelection": true,
   "showAllCategoryForModernImageSelection": false,

ui/src/views/auth/Login.vue

@@ -91,6 +91,18 @@
             type="text"
             :placeholder="$t('label.domain')"
             v-model:value="form.domain"
+          >
+            <template #prefix>
+              <project-outlined />
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item ref="project" name="project" v-if="$config.displayProjectFieldOnLogin">
+          <a-input
+            size="large"
+            type="text"
+            :placeholder="$t('label.project')"
+            v-model:value="form.project"
           >
             <template #prefix>
               <block-outlined />
@@ -243,7 +255,8 @@ export default {
       forgotPasswordEnabled: false,
       loginTitle: this.$config.loginTitle,
       buildVersion: this.$config.buildVersion,
-      logoPath: this.$config.logo
+      logoPath: this.$config.logo,
+      project: null
     }
   },
   created () {
@@ -268,7 +281,8 @@ export default {
       this.form = reactive({
         server: (this.server.apiHost || '') + this.server.apiBase,
         username: this.$route.query?.username || '',
-        domain: this.$route.query?.domain || ''
+        domain: this.$route.query?.domain || '',
+        project: null
       })
       this.rules = reactive({})
       this.setRules()
@@ -468,7 +482,7 @@ export default {
           })
       })
     },
-    loginSuccess (res) {
+    async loginSuccess (res) {
       this.$notification.destroy()
       this.$store.commit('SET_COUNT_NOTIFY', 0)
       if (store.getters.twoFaEnabled === true && store.getters.twoFaProvider !== '' && store.getters.twoFaProvider !== undefined) {
@@ -479,9 +493,33 @@ export default {
         this.$router.push({ path: '/firstLogin' }).catch(() => {})
       } else {
         this.$store.commit('SET_LOGIN_FLAG', true)
+        const values = toRaw(this.form)
+        if (values.project) {
+          await this.getProject(values.project)
+          this.$store.dispatch('ProjectView', this.project.id)
+          this.$store.dispatch('SetProject', this.project)
+          this.$store.dispatch('ToggleTheme', this.project.id === undefined ? 'light' : 'dark')
+        }
         this.$router.push({ path: '/dashboard' }).catch(() => {})
       }
     },
+    getProject (projectName) {
+      return new Promise((resolve, reject) => {
+        api('listProjects', {
+          response: 'json',
+          domainId: this.selectedDomain,
+          details: 'min'
+        }).then((response) => {
+          const projects = response.listprojectsresponse.project
+          this.project = projects.filter(project => project.name === projectName)?.[0] || null
+          resolve(this.project)
+        }).catch((error) => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+        })
+      })
+    },
     requestFailed (err) {
       if (err && err.response && err.response.data && err.response.data.loginresponse) {
         const error = err.response.data.loginresponse.errorcode + ': ' + err.response.data.loginresponse.errortext