local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/integration/user/login.spec.js
View file

@ -8,7 +8,7 @@ const testAndAssertFailed = fixture => {
cy.wait(5000) // It can take waaaayy too long to log the user in
cy.url().should('include', '/')
cy.get('div.notification.is-danger').contains('Wrong username or password.')
cy.get('div.message.danger').contains('Wrong username or password.')
}
context('Login', () => {

4
cypress/integration/user/registration.spec.js
View file

@ -32,7 +32,7 @@ context('Registration', () => {
cy.get('h2').should('contain', `Hi ${fixture.username}!`)
})
it('Should fail', () => {
it.only('Should fail', () => {
const fixture = {
username: 'test',
password: '123456',
@ -45,6 +45,6 @@ context('Registration', () => {
cy.get('#password').type(fixture.password)
cy.get('#passwordValidation').type(fixture.password)
cy.get('#register-submit').click()
cy.get('div.notification.is-danger').contains('A user with this username already exists.')
cy.get('div.message.danger').contains('A user with this username already exists.')
})
})

5
package.json
View file

@ -130,7 +130,10 @@
"ignorePatterns": [
"*.test.*",
"cypress/*"
]
],
"globals": {
"defineProps": "readonly"
}
},
"postcss": {
"plugins": {

18
src/components/misc/api-config.vue
View file

@ -30,27 +30,25 @@
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
</div>
<div
class="notification is-success mt-2"
v-if="successMsg !== '' && errorMsg === ''"
>
<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
{{ successMsg }}
</div>
<div
class="notification is-danger mt-2"
v-if="errorMsg !== '' && successMsg === ''"
>
</message>
<message variant="danger" v-if="errorMsg !== '' && successMsg === ''" class="mt-2">
{{ errorMsg }}
</div>
</message>
</div>
</template>
<script>
import Message from '@/components/misc/message'
import {parseURL} from 'ufo'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'apiConfig',
components: {
Message,
},
data() {
return {
configureApi: false,

7
src/components/misc/error.vue
View file

@ -1,15 +1,18 @@
<template>
<div class="notification is-danger">
<message variant="danger">
<i18n-t keypath="loadingError.failed">
<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
</i18n-t>
</div>
</message>
</template>
<script>
import Message from '@/components/misc/message'
export default {
name: 'error',
components: {Message},
methods: {
reload() {
window.location.reload()

12
src/components/misc/keyboard-shortcuts/index.vue
View file

@ -4,13 +4,11 @@
<template v-for="(s, i) in shortcuts" :key="i">
<h3>{{ $t(s.title) }}</h3>
<div class="message is-primary">
<div class="message-body">
<message>
{{
s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
}}
</div>
</div>
</message>
<dl class="shortcut-list">
<template v-for="(sc, si) in s.shortcuts" :key="si">
@ -30,11 +28,15 @@
<script>
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
import Shortcut from '@/components/misc/shortcut.vue'
import Message from '@/components/misc/message'
import {KEYBOARD_SHORTCUTS} from './shortcuts'
export default {
name: 'keyboard-shortcuts',
components: {Shortcut},
components: {
Message,
Shortcut,
},
data() {
return {
shortcuts: KEYBOARD_SHORTCUTS,

41
src/components/misc/message.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<div class="message" :class="variant">
<slot/>
</div>
</template>
<script setup>
defineProps({
variant: {
type: String,
default: 'info',
},
})
</script>
<style lang="scss" scoped>
.message {
padding: .75rem 1rem;
border-radius: $radius;
}
.info {
border: 1px solid var(--primary);
background: hsla(var(--primary-hsl), .05);
}
.danger {
border: 1px solid var(--danger);
background: hsla(var(--danger-h), var(--danger-s), var(--danger-l), .05);
}
.warning {
border: 1px solid var(--warning);
background: hsla(var(--warning-h), var(--warning-s), var(--warning-l), .05);
}
.success {
border: 1px solid var(--success);
background: hsla(var(--success-h), var(--success-s), var(--success-l), .05);
}
</style>

10
src/components/misc/no-auth-wrapper.vue
View file

@ -2,14 +2,9 @@
<div class="no-auth-wrapper">
<div class="noauth-container">
<Logo class="logo" width="400" height="117" />
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
</div>
<div class="message-body">
<message v-if="motd !== ''" class="my-2">
{{ motd }}
</div>
</div>
</message>
<slot/>
</div>
</div>
@ -17,6 +12,7 @@
<script setup>
import Logo from '@/components/home/Logo.vue'
import message from '@/components/misc/message'
import {useStore} from 'vuex'
import {computed} from 'vue'

6
src/components/misc/ready.vue
View file

@ -16,7 +16,7 @@
<p v-if="error === errorNoApiUrl">
{{ $t('ready.noApiUrlConfigured') }}
</p>
<div class="notification is-danger" v-else>
<message variant="danger" v-else>
<p>
{{ $t('ready.errorOccured') }}<br/>
{{ error }}
@ -24,7 +24,7 @@
<p>
{{ $t('ready.checkApiUrl') }}
</p>
</div>
</message>
<api-config :configure-open="true" @found-api="load"/>
</card>
</no-auth-wrapper>
@ -43,6 +43,7 @@
<script>
import Logo from '@/assets/logo.svg?component'
import ApiConfig from '@/components/misc/api-config'
import Message from '@/components/misc/message'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
import {mapState} from 'vuex'
import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
@ -50,6 +51,7 @@ import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
export default {
name: 'ready',
components: {
Message,
Logo,
NoAuthWrapper,
ApiConfig,

4
src/components/modal/modal.vue
View file

@ -193,10 +193,6 @@ export default {
align-items: center;
}
.message-body {
padding: .5rem .75rem;
}
}
}

4
src/styles/global.scss
View file

@ -23,7 +23,7 @@
@import "bulma-css-variables/sass/elements/content";
@import "bulma-css-variables/sass/elements/icon";
@import "bulma-css-variables/sass/elements/image";
@import "bulma-css-variables/sass/elements/notification";
//@import "bulma-css-variables/sass/elements/notification"; // not used
@import "bulma-css-variables/sass/elements/progress";
@import "bulma-css-variables/sass/elements/table";
@import "bulma-css-variables/sass/elements/tag";
@ -48,7 +48,7 @@
// @import "bulma-css-variables/sass/components/level"; // not used
@import "bulma-css-variables/sass/components/media";
@import "bulma-css-variables/sass/components/menu";
@import "bulma-css-variables/sass/components/message";
//@import "bulma-css-variables/sass/components/message"; // not used
@import "bulma-css-variables/sass/components/modal";
@import "bulma-css-variables/sass/components/navbar";
@import "bulma-css-variables/sass/components/pagination";

1
src/styles/theme/_index.scss
View file

@ -7,5 +7,4 @@
@import "form";
@import "link-share";
@import "loading";
@import "notification";
@import "flatpickr";

12
src/styles/theme/notification.scss
View file

@ -1,12 +0,0 @@
.notification {
border: $thickness solid $border;
}
.notifications {
left: 0.5rem !important;
bottom: 1rem !important;
}
.message .message-body {
border: $thickness solid;
}

6
src/views/Home.vue
View file

@ -3,7 +3,7 @@
<h2 v-if="userInfo">
{{ $t(`home.welcome${welcome}`, {username: userInfo.name !== '' ? userInfo.name : userInfo.username}) }}!
</h2>
<div class="notification is-danger" v-if="deletionScheduledAt !== null">
<message variant="danger" v-if="deletionScheduledAt !== null">
{{
$t('user.deletion.scheduled', {
date: formatDateShort(deletionScheduledAt),
@ -13,7 +13,7 @@
<router-link :to="{name: 'user.settings', hash: '#deletion'}">
{{ $t('user.deletion.scheduledCancel') }}
</router-link>
</div>
</message>
<add-task
:listId="defaultListId"
@taskAdded="updateTaskList"
@ -57,6 +57,7 @@
<script>
import {mapState} from 'vuex'
import Message from '@/components/misc/message'
import ShowTasks from './tasks/ShowTasks.vue'
import {getHistory} from '../modules/listHistory'
import ListCard from '@/components/list/partials/list-card.vue'
@ -67,6 +68,7 @@ import {parseDateOrNull} from '../helpers/parseDateOrNull'
export default {
name: 'Home',
components: {
Message,
ListCard,
ShowTasks,
AddTask,

6
src/views/list/ShowList.vue
View file

@ -36,9 +36,9 @@
</div>
</div>
<transition name="fade">
<div class="notification is-warning" v-if="currentList.isArchived">
<message variant="warning" v-if="currentList.isArchived" class="mb-4">
{{ $t('list.archived') }}
</div>
</message>
</transition>
<router-view/>
@ -46,6 +46,7 @@
</template>
<script>
import Message from '@/components/misc/message'
import ListModel from '../../models/list'
import ListService from '../../services/list'
import {CURRENT_LIST} from '../../store/mutation-types'
@ -53,6 +54,7 @@ import {getListView} from '../../helpers/saveListView'
import {saveListToHistory} from '../../modules/listHistory'
export default {
components: {Message},
data() {
return {
listService: new ListService(),

12
src/views/migrator/MigrateService.vue
View file

@ -57,11 +57,9 @@
</div>
</div>
<div v-else>
<div class="message is-primary">
<div class="message-body">
<message class="mb-4">
{{ message }}
</div>
</div>
</message>
<x-button :to="{name: 'home'}">{{ $t('misc.refresh') }}</x-button>
</div>
</div>
@ -71,6 +69,7 @@
import AbstractMigrationService from '@/services/migrator/abstractMigration'
import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
import Logo from '@/assets/logo.svg?component'
import Message from '@/components/misc/message'
import {MIGRATORS} from './migrators'
@ -79,7 +78,10 @@ const PROGRESS_DOTS_COUNT = 8
export default {
name: 'MigrateService',
components: { Logo },
components: {
Logo,
Message,
},
data() {
return {

6
src/views/namespaces/NewNamespace.vue
View file

@ -32,15 +32,16 @@
</div>
</div>
<div class="notification is-info mt-4">
<message class="mt-4">
<h4 class="title">{{ $t('namespace.create.tooltip') }}</h4>
{{ $t('namespace.create.explanation') }}
</div>
</message>
</create-edit>
</template>
<script>
import Message from '@/components/misc/message'
import NamespaceModel from '../../models/namespace'
import NamespaceService from '../../services/namespace'
import CreateEdit from '@/components/misc/create-edit.vue'
@ -56,6 +57,7 @@ export default {
}
},
components: {
Message,
ColorPicker,
CreateEdit,
},

10
src/views/sharing/LinkSharingAuth.vue
View file

@ -1,8 +1,8 @@
<template>
<div>
<div class="notification is-info is-light has-text-centered" v-if="loading">
<message v-if="loading">
{{ $t('sharing.authenticating') }}
</div>
</message>
<div v-if="authenticateWithPassword" class="box">
<p class="pb-2">
{{ $t('sharing.passwordRequired') }}
@ -25,18 +25,20 @@
{{ $t('user.auth.login') }}
</x-button>
<div class="notification is-danger mt-4" v-if="errorMessage !== ''">
<message variant="danger" class="mt-4" v-if="errorMessage !== ''">
{{ errorMessage }}
</div>
</message>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import Message from '@/components/misc/message'
export default {
name: 'LinkSharingAuth',
components: {Message},
data() {
return {
loading: true,

10
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,
},

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: '',

14
src/views/user/PasswordReset.vue
View file

@ -45,17 +45,17 @@
</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>
@ -70,10 +70,10 @@ import {ref, reactive} from 'vue'
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 Message from '@/components/misc/message'
const {t} = useI18n()
useTitle(() => t('user.auth.resetPassword'))

10
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>
@ -102,8 +102,8 @@ import { useI18n } from 'vue-i18n'
import router from '@/router'
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

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'))