Skip to content

Commit

Permalink
Merge pull request rancher#10839 from codyrancher/remove-async-data
Browse files Browse the repository at this point in the history 
Migrate the usage of asyncData to fetch
  • Loading branch information
@codyrancher
codyrancher authored Apr 29, 2024
2 parents 08f11a5 + 7d282bf commit e211993
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 147 deletions.
170 changes: 84 additions & 86 deletions shell/pages/auth/login.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,113 +23,50 @@ import { LOGIN_ERRORS } from '@shell/store/auth';
import {
getBrand,
getVendor,
getProduct,
setBrand,
setVendor
} from '@shell/config/private-label';
import loadPlugins from '@shell/plugins/plugin';
import { fetchInitialSettings } from '@shell/utils/settings';
import Loading from '@shell/components/Loading';
export default {
name: 'Login',
components: {
LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector
LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading
},
async asyncData({ route, redirect, store }) {
const drivers = await store.dispatch('auth/getAuthProviders');
const providers = sortBy(drivers.map((x) => x.id), ['id']);
const hasLocal = providers.includes('local');
const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
if ( hasLocal ) {
// Local is special and handled here so that it can be toggled
removeObject(providers, 'local');
}
let firstLoginSetting, plSetting, brand;
// Load settings.
// For newer versions this will return all settings if you are somehow logged in,
// and just the public ones if you aren't.
try {
await fetchInitialSettings(store);
firstLoginSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
plSetting = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
brand = store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
} catch (e) {
// Older versions used Norman API to get these
firstLoginSetting = await store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.FIRST_LOGIN,
opt: { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
});
plSetting = await store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.PL,
opt: { url: `/v3/settings/${ SETTING.PL }` }
});
brand = await store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.BRAND,
opt: { url: `/v3/settings/${ SETTING.BRAND }` }
});
}
if (plSetting.value?.length && plSetting.value !== getVendor()) {
setVendor(plSetting.value);
}
if (brand?.value?.length && brand.value !== getBrand()) {
setBrand(brand.value);
}
let singleProvider;
if (providers.length === 1) {
singleProvider = providers[0];
}
data() {
const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
return {
vendor: getVendor(),
providers,
hasOthers,
hasLocal,
showLocal: !hasOthers || (route.query[LOCAL] === _FLAGGED),
firstLogin: firstLoginSetting?.value === 'true',
singleProvider,
showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true'
};
},
data({ $cookies }) {
const username = $cookies.get(USERNAME, { parseJSON: false }) || '';
return {
product: getProduct(),
username,
remember: !!username,
password: '',
timedOut: this.$route.query[TIMED_OUT] === _FLAGGED,
loggedOut: this.$route.query[LOGGED_OUT] === _FLAGGED,
isSsoLogout: this.$route.query[IS_SSO] === _FLAGGED,
err: this.$route.query.err,
timedOut: this.$route.query[TIMED_OUT] === _FLAGGED,
loggedOut: this.$route.query[LOGGED_OUT] === _FLAGGED,
isSsoLogout: this.$route.query[IS_SSO] === _FLAGGED,
err: this.$route.query.err,
showLocaleSelector: !process.env.loginLocaleSelector || process.env.loginLocaleSelector === 'true',
hasLocal: false,
showLocal: false,
providers: [],
providerComponents: [],
customLoginError: {}
customLoginError: {},
firstLogin: false,
vendor: getVendor()
};
},
computed: {
...mapGetters({ t: 'i18n/t' }),
singleProvider() {
return this.providers.length === 1 ? this.providers[0] : undefined;
},
nonLocalPrompt() {
if (this.singleProvider) {
const provider = this.displayName(this.singleProvider);
Expand Down Expand Up @@ -179,19 +116,77 @@ export default {
},
async fetch() {
const { firstLoginSetting } = await this.loadInitialSettings();
const { value } = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS });
const drivers = await this.$store.dispatch('auth/getAuthProviders');
const providers = sortBy(drivers.map((x) => x.id), ['id']);
const hasLocal = providers.includes('local');
const hasOthers = hasLocal && !!providers.find((x) => x !== 'local');
this.customLoginError = JSON.parse(value).loginError;
},
if ( hasLocal ) {
// Local is special and handled here so that it can be toggled
removeObject(providers, 'local');
}
mounted() {
this.vendor = getVendor();
this.providers = providers;
this.hasLocal = hasLocal;
this.showLocal = !hasOthers || (this.$route.query[LOCAL] === _FLAGGED);
this.customLoginError = JSON.parse(value).loginError;
this.firstLogin = firstLoginSetting?.value === 'true';
this.username = this.firstLogin ? 'admin' : this.username;
this.$nextTick(() => {
this.focusSomething();
});
},
methods: {
async loadInitialSettings() {
let firstLoginSetting, plSetting, brand;
// Load settings.
// For newer versions this will return all settings if you are somehow logged in,
// and just the public ones if you aren't.
try {
await fetchInitialSettings(this.$store);
firstLoginSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.FIRST_LOGIN);
plSetting = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.PL);
brand = this.$store.getters['management/byId'](MANAGEMENT.SETTING, SETTING.BRAND);
} catch (e) {
// Older versions used Norman API to get these
firstLoginSetting = await this.$store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.FIRST_LOGIN,
opt: { url: `/v3/settings/${ SETTING.FIRST_LOGIN }` }
});
plSetting = await this.$store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.PL,
opt: { url: `/v3/settings/${ SETTING.PL }` }
});
brand = await this.$store.dispatch('rancher/find', {
type: NORMAN.SETTING,
id: SETTING.BRAND,
opt: { url: `/v3/settings/${ SETTING.BRAND }` }
});
}
if (plSetting.value?.length && plSetting.value !== getVendor()) {
setVendor(plSetting.value);
}
if (brand?.value?.length && brand.value !== getBrand()) {
setBrand(brand.value);
}
return {
firstLoginSetting, plSetting, brand
};
},
displayName(provider) {
return this.t(`model.authConfig.provider.${ provider }`);
},
Expand Down Expand Up @@ -290,7 +285,11 @@ export default {
</script>
<template>
<main class="main-layout login">
<Loading v-if="$fetchState.pending" />
<main
v-else
class="main-layout login"
>
<div class="row gutless mb-20">
<div class="col span-6 p-20">
<p class="text-center">
Expand Down Expand Up @@ -480,7 +479,6 @@ export default {
<LocaleSelector mode="login" />
</div>
</div>
<BrandImage
class="col span-6 landscape"
data-testid="login-landscape__img"
Expand Down
4 changes: 2 additions & 2 deletions shell/pages/auth/logout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<script>
export default {
async asyncData({ redirect, store, router }) {
await store.dispatch('auth/logout', null, { root: true });
async fetch() {
await this.$store.dispatch('auth/logout', null, { root: true });
}
};
</script>
Expand Down
Loading

0 comments on commit e211993

Please sign in to comment.