🐛 Re: #127 - Fixes translations not being picked up in dropdown

This commit is contained in:
Alicia Sykes 2021-08-07 14:17:01 +01:00
parent 79d8d1b036
commit 9f33bacf16

View File

@ -40,6 +40,10 @@ import { checkCredentials, login } from '@/utils/Auth';
export default { export default {
name: 'login', name: 'login',
components: {
Button,
Input,
},
props: { props: {
appConfig: Object, appConfig: Object,
}, },
@ -50,23 +54,41 @@ export default {
message: '', message: '',
status: 'waiting', // wating, error, success status: 'waiting', // wating, error, success
timeout: { label: this.$t('login.remember-me-never'), time: 0 }, timeout: { label: this.$t('login.remember-me-never'), time: 0 },
dropDownMenu: [ // Data for timeout dropdown menu, translated label + value in ms };
},
computed: {
/* Data for timeout dropdown menu, translated label + value in ms */
dropDownMenu() {
return [
{ label: this.$t('login.remember-me-never'), time: 0 }, { label: this.$t('login.remember-me-never'), time: 0 },
{ label: this.$t('login.remember-me-hour'), time: 14400 * 1000 }, { label: this.$t('login.remember-me-hour'), time: 14400 * 1000 },
{ label: this.$t('login.remember-me-day'), time: 86400 * 1000 }, { label: this.$t('login.remember-me-day'), time: 86400 * 1000 },
{ label: this.$t('login.remember-me-week'), time: 604800 * 1000 }, { label: this.$t('login.remember-me-week'), time: 604800 * 1000 },
], ];
},
/* Translations for login response messages */
responseMessages() {
return {
missingUsername: this.$t('login.error-missing-username'),
missingPassword: this.$t('login.error-missing-password'),
incorrectUsername: this.$t('login.error-incorrect-username'),
incorrectPassword: this.$t('login.error-incorrect-password'),
successMsg: this.$t('login.success-message'),
}; };
}, },
components: {
Button,
Input,
}, },
methods: { methods: {
/* Checks form is filled in, then initiates the login, and redirects to /home */ /* Checks form is filled in, then initiates the login, and redirects to /home */
submitLogin() { submitLogin() {
// Use selected timeout, if available,else revedrt to zero
const timeout = this.timeout ? this.timeout.time : 0; const timeout = this.timeout ? this.timeout.time : 0;
const response = checkCredentials(this.username, this.password, this.appConfig.auth || []); // Check users credentials
const response = checkCredentials(
this.username,
this.password,
this.appConfig.auth || [], // All users
this.responseMessages, // Translated response messages
);
this.message = response.msg; // Show error or success message to the user this.message = response.msg; // Show error or success message to the user
this.status = response.correct ? 'success' : 'error'; this.status = response.correct ? 'success' : 'error';
if (response.correct) { // Yay, credentials were correct :) if (response.correct) { // Yay, credentials were correct :)
@ -76,7 +98,7 @@ export default {
}, 250); }, 250);
} }
}, },
/* Since we don't have the Theme setter at this point, we must manually set users theme */ /* Since Theme setter isn't loaded at this point, we must manually get and apply users theme */
setTheme() { setTheme() {
const theme = localStorage[localStorageKeys.THEME] || Defaults.theme; const theme = localStorage[localStorageKeys.THEME] || Defaults.theme;
document.getElementsByTagName('html')[0].setAttribute('data-theme', theme); document.getElementsByTagName('html')[0].setAttribute('data-theme', theme);