-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
login.vue
123 lines (104 loc) · 3.26 KB
/
login.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<template>
<public-view>
<div class="header">
<h1 class="type-title">{{ t('sign_in') }}</h1>
<div v-if="!authenticated && providerOptions.length > 1" class="provider-select">
<v-select v-model="providerSelect" inline :items="providerOptions" label />
</div>
</div>
<continue-as v-if="authenticated" />
<ldap-form v-else-if="driver === 'ldap'" :provider="provider" />
<login-form v-else :provider="provider" />
<sso-links v-if="!authenticated" :providers="providers" />
<template v-if="authenticated" #notice>
<v-icon name="lock_open" left />
{{ t('authenticated') }}
</template>
<template v-else #notice>
<v-icon name="lock_outlined" left />
{{
logoutReason && te(`logoutReason.${logoutReason}`) ? t(`logoutReason.${logoutReason}`) : t('not_authenticated')
}}
</template>
</public-view>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, computed, PropType, ref, onMounted, watch } from 'vue';
import { LoginForm, LdapForm } from './components/login-form/';
import ContinueAs from './components/continue-as.vue';
import SsoLinks from './components/sso-links.vue';
import api from '@/api';
import { useAppStore } from '@/stores';
import { LogoutReason } from '@/auth';
import { AUTH_SSO_DRIVERS } from '@/constants';
import { unexpectedError } from '@/utils/unexpected-error';
import formatTitle from '@directus/format-title';
import { DEFAULT_AUTH_PROVIDER } from '@/constants';
export default defineComponent({
components: { LoginForm, LdapForm, ContinueAs, SsoLinks },
props: {
logoutReason: {
type: String as PropType<LogoutReason>,
default: null,
},
},
setup() {
const { t, te } = useI18n();
const appStore = useAppStore();
const providers = ref([]);
const provider = ref(DEFAULT_AUTH_PROVIDER);
const providerOptions = ref([]);
const driver = ref('local');
const disableDefault = ref(false);
const providerSelect = computed({
get() {
return provider.value;
},
set(value: string) {
provider.value = value;
driver.value = providers.value.find((provider) => provider.name === value)?.driver ?? 'local';
},
});
const authenticated = computed(() => appStore.authenticated);
onMounted(() => fetchProviders());
watch(providers, () => {
providerOptions.value = providers.value
.filter((provider) => !AUTH_SSO_DRIVERS.includes(provider.driver))
.map((provider) => ({ text: formatTitle(provider.name), value: provider.name }));
if (!disableDefault.value) {
providerOptions.value.unshift({ text: t('default_provider'), value: DEFAULT_AUTH_PROVIDER });
} else {
providerSelect.value = providerOptions.value[0].value;
}
});
return { t, te, authenticated, providers, providerSelect, providerOptions, provider, driver };
async function fetchProviders() {
try {
const response = await api.get('/auth');
providers.value = response.data.data;
disableDefault.value = response.data.disableDefault;
} catch (err: any) {
unexpectedError(err);
}
}
},
});
</script>
<style lang="scss" scoped>
h1 {
margin-bottom: 20px;
}
.header {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 20px;
.type-title {
margin-bottom: 0;
}
.provider-select {
margin-bottom: 8px;
}
}
</style>