ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add message component (#1082)

Browse Source 
This PR adds a simple message component that replaces bulma's default message.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1082
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad
2021-11-28 14:18:27 +00:00
committed by dpschen
parent 59e915cc10
commit f8d009a6aa
23 changed files with 170 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/user/Login.vue
View File

@ -2,9 +2,9 @@
<div>
<h2 class="title has-text-centered">Login</h2>
<div class="box">
<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
{{ $t('user.auth.confirmEmailSuccess') }}
</div>
</message>
<api-config @foundApi="hasApiUrl = true"/>
<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
<div class="field">
@ -78,9 +78,9 @@
</router-link>
</div>
</div>
<div class="notification is-danger" v-if="errorMessage">
<message variant="danger" v-if="errorMessage">
{{ errorMessage }}
</div>
</message>
</form>
<div
@ -110,11 +110,13 @@ import {LOADING} from '@/store/mutation-types'
import legal from '../../components/misc/legal'
import ApiConfig from '@/components/misc/api-config.vue'
import {getErrorText} from '@/message'
import Message from '@/components/misc/message'
import {redirectToProvider} from '../../helpers/redirectToProvider'
import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
export default {
components: {
Message,
ApiConfig,
legal,
},
@ -149,7 +151,7 @@ export default {
const last = getLastVisited()
if (last !== null) {
this.$router.push({
name: last.name,
name: last.name,
params: last.params,
})
clearLastVisited()
@ -206,7 +208,7 @@ export default {
try {
await this.$store.dispatch('auth/login', credentials)
this.$store.commit('auth/needsTotpPasscode', false)
} catch(e) {
} catch (e) {
if (e.response && e.response.data.code === 1017 && !credentials.totpPasscode) {
return
}

10
src/views/user/OpenIdAuth.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<div class="notification is-danger" v-if="errorMessage">
<message variant="danger" v-if="errorMessage">
{{ errorMessage }}
</div>
<div class="notification is-info" v-if="loading">
</message>
<message v-if="loading">
{{ $t('user.auth.authenticating') }}
</div>
</message>
</div>
</template>
@ -14,10 +14,12 @@ import {mapState} from 'vuex'
import {LOADING} from '@/store/mutation-types'
import {getErrorText} from '@/message'
import Message from '@/components/misc/message'
import {clearLastVisited, getLastVisited} from '../../helpers/saveLastVisited'
export default {
name: 'Auth',
components: {Message},
data() {
return {
errorMessage: '',

26
src/views/user/PasswordReset.vue
View File

@ -45,37 +45,37 @@
</x-button>
</div>
</div>
<div class="notification is-info" v-if="this.passwordResetService.loading">
<message v-if="this.passwordResetService.loading">
{{ $t('misc.loading') }}
</div>
<div class="notification is-danger" v-if="errorMsg">
</message>
<message v-if="errorMsg">
{{ errorMsg }}
</div>
</message>
</form>
<div class="has-text-centered" v-if="successMessage">
<div class="notification is-success">
<message variant="success">
{{ successMessage }}
</div>
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal />
<Legal/>
</div>
</div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import { useI18n } from 'vue-i18n'
import {useI18n} from 'vue-i18n'
import Legal from '@/components/misc/legal'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import { useTitle } from '@/composables/useTitle'
import {useTitle} from '@/composables/useTitle'
import Message from '@/components/misc/message'
const { t } = useI18n()
const {t} = useI18n()
useTitle(() => t('user.auth.resetPassword'))
const credentials = reactive({
@ -97,10 +97,10 @@ async function submit() {
const passwordReset = new PasswordResetModel({newPassword: credentials.password})
try {
const { message } = passwordResetService.resetPassword(passwordReset)
const {message} = passwordResetService.resetPassword(passwordReset)
successMessage.value = message
localStorage.removeItem('passwordResetToken')
} catch(e) {
} catch (e) {
errorMsg.value = e.response.data.message
}
}

20
src/views/user/Register.vue
View File

@ -83,12 +83,12 @@
</x-button>
</div>
</div>
<div class="notification is-info" v-if="loading">
<message v-if="loading">
{{ $t('misc.loading') }}
</div>
<div class="notification is-danger" v-if="errorMessage !== ''">
</message>
<message variant="danger" v-if="errorMessage !== ''">
{{ errorMessage }}
</div>
</message>
</form>
<legal/>
</div>
@ -97,13 +97,13 @@
<script setup>
import {ref, reactive, toRaw, computed, onBeforeMount} from 'vue'
import { useI18n } from 'vue-i18n'
import {useI18n} from 'vue-i18n'
import router from '@/router'
import { store } from '@/store'
import { useTitle } from '@/composables/useTitle'
import {store} from '@/store'
import {useTitle} from '@/composables/useTitle'
import Legal from '@/components/misc/legal'
import Message from '@/components/misc/message'
// FIXME: use the `beforeEnter` hook of vue-router
// Check if the user is already logged in, if so, redirect them to the homepage
@ -113,7 +113,7 @@ onBeforeMount(() => {
}
})
const { t } = useI18n()
const {t} = useI18n()
useTitle(() => t('user.auth.register'))
const credentials = reactive({
@ -137,7 +137,7 @@ async function submit() {
try {
await store.dispatch('auth/register', toRaw(credentials))
} catch(e) {
} catch (e) {
errorMessage.value = e.message
}
}

9
src/views/user/RequestPasswordReset.vue
View File

@ -31,14 +31,14 @@
</x-button>
</div>
</div>
<div class="notification is-danger" v-if="errorMsg">
<message variant="danger" v-if="errorMsg">
{{ errorMsg }}
</div>
</message>
</form>
<div class="has-text-centered" v-if="isSuccess">
<div class="notification is-success">
<message variant="success">
{{ $t('user.auth.resetPasswordSuccess') }}
</div>
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
@ -57,6 +57,7 @@ import Legal from '@/components/misc/legal'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import { useTitle } from '@/composables/useTitle'
import Message from '@/components/misc/message'
const { t } = useI18n()
useTitle(() => t('user.auth.resetPassword'))