-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Intergrate Authorisation into embedded ui (#311)
* WIP - can login via dex. - need to wire in auth to * use user in auth requests to epinio, start tidying up flow * fix a number of things * support local auth as well * started removing todos * more todos * tidying up * apply new info / me changes * Fix build epinio pkg * Fix initialisation of cluster model & re-enter once locally logged in * Fix lint, changes after self review * Fix redirect, remove useless pagination stuff - requires new backend * Fix #361 * Remove unused query params from verify * bump shell * Temporarily add typing for is-url - can be removed once rancher/dashboard#10035 is merged and published
- Loading branch information
1 parent
a0870f8
commit 91f6d0b
Showing
18 changed files
with
729 additions
and
297 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import Resource from '@shell/plugins/dashboard-store/resource-class'; | ||
| import { EPINIO_TYPES } from '../types'; | ||
| import epinioAuth, { EpinioAuthConfig, EpinioAuthLocalConfig, EpinioAuthTypes } from '../utils/auth'; | ||
|
|
||
| export const EpinioInfoPath = `/api/v1/info`; | ||
|
|
||
| export default class EpinioCluster extends Resource { | ||
| type = EPINIO_TYPES.CLUSTER; | ||
|
|
||
| id: string; | ||
| name: string; | ||
| state?: string; | ||
| metadata?: { state: { transitioning: boolean, error: boolean, message: string }}; | ||
| loggedIn: boolean; | ||
| api: string; | ||
| mgmtCluster: any; | ||
| oidcEnabled: boolean = false; | ||
|
|
||
| constructor(data: { | ||
| id: string, | ||
| name: string, | ||
| loggedIn: boolean, | ||
| api: string, | ||
| mgmtCluster: any, | ||
| }, ctx: any) { | ||
| super(data, ctx); | ||
| this.id = data.id; | ||
| this.name = data.name; | ||
| this.api = data.api; | ||
| this.loggedIn = data.loggedIn; | ||
| this.mgmtCluster = data.mgmtCluster; | ||
| } | ||
|
|
||
| get availableActions() { | ||
| return [ | ||
| { | ||
| action: 'logOut', | ||
| enabled: this.loggedIn, | ||
| icon: 'icon icon-fw icon-chevron-right', | ||
| label: this.t('nav.userMenu.logOut'), | ||
| disabled: false, | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| get infoUrl() { | ||
| return this.api + EpinioInfoPath; | ||
| } | ||
|
|
||
| async logOut() { | ||
| try { | ||
| await epinioAuth.logout(this.createAuthConfig(EpinioAuthTypes.AGNOSTIC)); | ||
|
|
||
| this.loggedIn = false; | ||
| } catch (err) { | ||
| console.error(`Failed to log out: ${ err }`);// eslint-disable-line no-console | ||
|
|
||
| this.metadata = { | ||
| state: { | ||
| transitioning: false, | ||
| error: true, | ||
| message: 'Failed to log out' | ||
| } | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| createAuthConfig(type: EpinioAuthTypes, localConfig?: EpinioAuthLocalConfig): EpinioAuthConfig { | ||
| const config: EpinioAuthConfig = { | ||
| type, | ||
| epinioUrl: this.api, | ||
| dexConfig: { | ||
| dashboardUrl: window.origin, | ||
| dexUrl: this.api.replace('epinio', 'auth') | ||
| }, | ||
| localConfig | ||
| }; | ||
|
|
||
| return config; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.