mirror of https://github.com/rancher/dashboard.git
107 lines
2.5 KiB
Vue
107 lines
2.5 KiB
Vue
<script>
|
|
import { LabeledInput } from '@components/Form/LabeledInput';
|
|
import AsyncButton from '@shell/components/AsyncButton';
|
|
import Login from '@shell/mixins/login';
|
|
import loadPlugins from '@shell/plugins/plugin';
|
|
|
|
export default {
|
|
emits: ['error', 'showInputs'],
|
|
|
|
components: { LabeledInput, AsyncButton },
|
|
mixins: [Login],
|
|
|
|
props: {
|
|
open: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return { username: '', password: '' };
|
|
},
|
|
|
|
methods: {
|
|
async login(buttonCb) {
|
|
try {
|
|
this.err = null;
|
|
await this.$store.dispatch('auth/login', {
|
|
provider: this.name,
|
|
body: {
|
|
username: this.username,
|
|
password: this.password
|
|
}
|
|
});
|
|
|
|
await loadPlugins({
|
|
app: this.$store.app,
|
|
store: this.$store,
|
|
$plugin: this.$store.$plugin
|
|
});
|
|
|
|
buttonCb(true);
|
|
this.$router.replace('/');
|
|
} catch (err) {
|
|
this.err = err;
|
|
|
|
// emit error to parent so that it can displayed on the error Banner
|
|
this.$emit('error', err);
|
|
buttonCb(false);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<form>
|
|
<template v-if="open">
|
|
<div class="span-6 offset-3">
|
|
<div class="mb-20">
|
|
<LabeledInput
|
|
v-model:value="username"
|
|
:label="t('login.username')"
|
|
autocomplete="username"
|
|
/>
|
|
</div>
|
|
<div class="mb-20">
|
|
<LabeledInput
|
|
v-model:value="password"
|
|
type="password"
|
|
:label="t('login.password')"
|
|
autocomplete="password"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col span-12 text-center">
|
|
<AsyncButton
|
|
ref="btn"
|
|
type="submit"
|
|
:action-label="t('login.loginWithProvider', {provider: displayName})"
|
|
:waiting-label="t('login.loggingIn')"
|
|
:success-label="t('login.loggedIn')"
|
|
:error-label="t('asyncButton.default.error')"
|
|
class="btn bg-primary"
|
|
style="font-size: 18px;"
|
|
@click="login"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-else
|
|
class="text-center"
|
|
>
|
|
<button
|
|
style="font-size: 18px;"
|
|
type="button"
|
|
class="btn bg-primary"
|
|
@click="$emit('showInputs')"
|
|
>
|
|
{{ t('login.loginWithProvider', {provider: displayName}) }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</template>
|