vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Merge remote-tracking branch 'upstream/main' into set-all-variables
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
Adrian Simmons 2021-12-14 14:17:04 +00:00
parent b561855fe8 ac61e8d449
commit 3a85bf9b23
40 changed files with 1369 additions and 1470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.drone.yml
View File

@ -202,7 +202,6 @@ steps:
YARN_CACHE_FOLDER: .cache/yarn/
commands:
- yarn --frozen-lockfile --network-timeout 100000
- npx browserslist@latest --update-db
- yarn run lint
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
- yarn run build

44
package.json
View File

@ -19,10 +19,11 @@
"dependencies": {
"@github/hotkey": "1.6.0",
"@kyvg/vue3-notification": "2.3.4",
"@sentry/tracing": "6.16.0",
"@sentry/vue": "6.16.0",
"@vue/compat": "3.2.24",
"@vueuse/core": "7.2.2",
"@sentry/tracing": "6.16.1",
"@sentry/vue": "6.16.1",
"@vue/compat": "3.2.26",
"@vueuse/core": "7.3.0",
"@vueuse/router": "7.3.0",
"bulma-css-variables": "0.9.33",
"camel-case": "4.1.2",
"codemirror": "5.64.0",
@ -36,12 +37,12 @@
"is-touch-device": "1.0.1",
"lodash.clonedeep": "4.5.0",
"lodash.debounce": "4.0.8",
"marked": "4.0.6",
"marked": "4.0.7",
"register-service-worker": "1.7.2",
"snake-case": "3.0.4",
"ufo": "0.7.9",
"v-tooltip": "4.0.0-beta.2",
"vue": "3.2.24",
"vue": "3.2.26",
"vue-advanced-cropper": "2.7.0",
"vue-drag-resize": "2.0.3",
"vue-flatpickr-component": "9.0.5",
@ -59,34 +60,35 @@
"@fortawesome/vue-fontawesome": "3.0.0-5",
"@types/flexsearch": "0.7.2",
"@types/jest": "27.0.3",
"@typescript-eslint/eslint-plugin": "5.6.0",
"@typescript-eslint/parser": "5.6.0",
"@typescript-eslint/eslint-plugin": "5.7.0",
"@typescript-eslint/parser": "5.7.0",
"@vitejs/plugin-legacy": "1.6.4",
"@vitejs/plugin-vue": "1.10.2",
"@vitejs/plugin-vue": "2.0.0",
"@vue/eslint-config-typescript": "9.1.0",
"autoprefixer": "10.4.0",
"axios": "0.24.0",
"browserslist": "4.18.1",
"cypress": "8.7.0",
"browserslist": "4.19.0",
"caniuse-lite": "1.0.30001286",
"cypress": "9.1.1",
"cypress-file-upload": "5.0.8",
"esbuild": "0.14.2",
"esbuild": "0.14.3",
"eslint": "8.4.1",
"eslint-plugin-vue": "8.2.0",
"express": "4.17.1",
"faker": "5.5.3",
"jest": "27.4.3",
"netlify-cli": "8.0.16",
"postcss": "8.4.4",
"jest": "27.4.5",
"netlify-cli": "8.1.1",
"postcss": "8.4.5",
"postcss-preset-env": "7.0.1",
"rollup": "2.60.2",
"rollup": "2.61.1",
"rollup-plugin-visualizer": "5.5.2",
"sass": "1.44.0",
"sass": "1.45.0",
"slugify": "1.6.3",
"ts-jest": "27.1.1",
"typescript": "4.5.2",
"vite": "2.7.1",
"vite-plugin-pwa": "0.11.10",
"vite-svg-loader": "3.1.0",
"typescript": "4.5.4",
"vite": "2.7.2",
"vite-plugin-pwa": "0.11.11",
"vite-svg-loader": "3.1.1",
"vue-tsc": "0.29.8",
"wait-on": "6.0.0",
"workbox-cli": "6.4.2"

178
src/App.vue
View File

@ -1,116 +1,96 @@
<template>
<ready>
<div :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<template v-if="authUser">
<top-navigation/>
<content-auth/>
</template>
<content-link-share v-else-if="authLinkShare"/>
<content-no-auth v-else/>
<notification/>
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
</transition>
<ready :class="{'is-touch': isTouch}">
<div :class="{'is-hidden': !online}">
<template v-if="authUser">
<top-navigation/>
<content-auth/>
</template>
<content-link-share v-else-if="authLinkShare"/>
<content-no-auth v-else/>
<notification/>
</div>
<transition name="fade">
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
</transition>
</ready>
</template>
<script>
import {defineComponent} from 'vue'
import {mapState, mapGetters} from 'vuex'
<script lang="ts" setup>
import {computed, watch, watchEffect, Ref} from 'vue'
import {useRouter} from 'vue-router'
import {useRouteQuery} from '@vueuse/router'
import {useStore} from 'vuex'
import {useI18n} from 'vue-i18n'
import {useOnline} from '@vueuse/core'
import isTouchDevice from 'is-touch-device'
import {success} from '@/message'
import Notification from '@/components/misc/notification.vue'
import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
import TopNavigation from './components/home/topNavigation.vue'
import ContentAuth from './components/home/contentAuth.vue'
import ContentLinkShare from './components/home/contentLinkShare.vue'
import ContentNoAuth from './components/home/contentNoAuth.vue'
import Ready from '@/components/misc/ready.vue'
import Notification from './components/misc/notification'
import {KEYBOARD_SHORTCUTS_ACTIVE, ONLINE} from './store/mutation-types'
import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
import TopNavigation from './components/home/topNavigation'
import ContentAuth from './components/home/contentAuth'
import ContentLinkShare from './components/home/contentLinkShare'
import ContentNoAuth from './components/home/contentNoAuth'
import {setLanguage} from './i18n'
import AccountDeleteService from '@/services/accountDelete'
import Ready from '@/components/misc/ready'
import {ONLINE} from '@/store/mutation-types'
import {useColorScheme} from '@/composables/useColorScheme'
export default defineComponent({
name: 'app',
components: {
ContentNoAuth,
ContentLinkShare,
ContentAuth,
TopNavigation,
KeyboardShortcuts,
Notification,
Ready,
},
beforeMount() {
this.setupOnlineStatus()
this.setupPasswortResetRedirect()
this.setupEmailVerificationRedirect()
this.setupAccountDeletionVerification()
},
beforeCreate() {
setLanguage()
},
setup() {
useColorScheme()
},
created() {
// Make sure to always load the home route when running with electron
if (this.$route.fullPath.endsWith('frontend/index.html')) {
this.$router.push({name: 'home'})
}
},
computed: {
isTouch() {
return isTouchDevice()
},
...mapState({
online: ONLINE,
keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
}),
...mapGetters('auth', [
'authUser',
'authLinkShare',
]),
},
methods: {
setupOnlineStatus() {
this.$store.commit(ONLINE, navigator.onLine)
window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine))
window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
},
setupPasswortResetRedirect() {
if (typeof this.$route.query.userPasswordReset === 'undefined') {
return
}
const store = useStore()
const online = useOnline()
watchEffect(() => store.commit(ONLINE, online.value))
localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
this.$router.push({name: 'user.password-reset.reset'})
},
setupEmailVerificationRedirect() {
if (typeof this.$route.query.userEmailConfirm === 'undefined') {
return
}
const router = useRouter()
localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
this.$router.push({name: 'user.login'})
},
async setupAccountDeletionVerification() {
if (typeof this.$route.query.accountDeletionConfirm === 'undefined') {
return
}
const isTouch = computed(isTouchDevice)
const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
const accountDeletionService = new AccountDeleteService()
await accountDeletionService.confirm(this.$route.query.accountDeletionConfirm)
this.$message.success({message: this.$t('user.deletion.confirmSuccess')})
this.$store.dispatch('auth/refreshUserInfo')
},
},
})
const authUser = computed(() => store.getters['auth/authUser'])
const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
const {t} = useI18n()
// setup account deletion verification
const accountDeletionConfirm = useRouteQuery('accountDeletionConfirm') as Ref<null | string>
watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
if (accountDeletionConfirm === null) {
return
}
const accountDeletionService = new AccountDeleteService()
await accountDeletionService.confirm(accountDeletionConfirm)
success({message: t('user.deletion.confirmSuccess')})
store.dispatch('auth/refreshUserInfo')
}, { immediate: true })
// setup passwort reset redirect
const userPasswordReset = useRouteQuery('userPasswordReset') as Ref<null | string>
watch(userPasswordReset, (userPasswordReset) => {
if (userPasswordReset === null) {
return
}
localStorage.setItem('passwordResetToken', userPasswordReset)
router.push({name: 'user.password-reset.reset'})
}, { immediate: true })
// setup email verification redirect
const userEmailConfirm = useRouteQuery('userEmailConfirm') as Ref<null | string>
watch(userEmailConfirm, (userEmailConfirm) => {
if (userEmailConfirm === null) {
return
}
localStorage.setItem('emailConfirmToken', userEmailConfirm)
router.push({name: 'user.login'})
}, { immediate: true })
setLanguage()
useColorScheme()
</script>
<style lang="scss">

BIN
src/assets/no-auth-image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 519 KiB

158
src/components/home/contentAuth.vue
View File

@ -40,96 +40,88 @@
</div>
</template>
<script>
import {mapState} from 'vuex'
<script lang="ts" setup>
import {watch, computed} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'
import {useEventListener} from '@vueuse/core'
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
import Navigation from '@/components/home/navigation.vue'
import QuickActions from '@/components/quick-actions/quick-actions.vue'
export default {
name: 'contentAuth',
components: {QuickActions, Navigation},
watch: {
'$route': {
handler: 'doStuffAfterRoute',
deep: true,
},
},
created() {
this.renewTokenOnFocus()
this.loadLabels()
},
computed: mapState({
background: 'background',
menuActive: MENU_ACTIVE,
userInfo: state => state.auth.info,
authenticated: state => state.auth.authenticated,
}),
methods: {
doStuffAfterRoute() {
// this.setTitle('') // Reset the title if the page component does not set one itself
this.hideMenuOnMobile()
this.resetCurrentList()
},
resetCurrentList() {
// Reset the current list highlight in menu if the current list is not list related.
if (
this.$route.name === 'home' ||
this.$route.name === 'namespace.edit' ||
this.$route.name === 'teams.index' ||
this.$route.name === 'teams.edit' ||
this.$route.name === 'tasks.range' ||
this.$route.name === 'labels.index' ||
this.$route.name === 'migrate.start' ||
this.$route.name === 'migrate.wunderlist' ||
this.$route.name.startsWith('user.settings') ||
this.$route.name === 'namespaces.index'
) {
return this.$store.dispatch(CURRENT_LIST, null)
}
},
renewTokenOnFocus() {
// Try renewing the token every time vikunja is loaded initially
// (When opening the browser the focus event is not fired)
this.$store.dispatch('auth/renewToken')
const store = useStore()
// Check if the token is still valid if the window gets focus again to maybe renew it
window.addEventListener('focus', () => {
const background = computed(() => store.state.background)
const menuActive = computed(() => store.state.menuActive)
if (!this.authenticated) {
return
}
const expiresIn = (this.userInfo !== null ? this.userInfo.exp : 0) - +new Date() / 1000
// If the token expiry is negative, it is already expired and we have no choice but to redirect
// the user to the login page
if (expiresIn < 0) {
this.$store.dispatch('auth/checkAuth')
this.$router.push({name: 'user.login'})
return
}
// Check if the token is valid for less than 60 hours and renew if thats the case
if (expiresIn < 60 * 3600) {
this.$store.dispatch('auth/renewToken')
console.debug('renewed token')
}
})
},
hideMenuOnMobile() {
if (window.innerWidth < 769) {
this.$store.commit(MENU_ACTIVE, false)
}
},
showKeyboardShortcuts() {
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
},
loadLabels() {
this.$store.dispatch('labels/loadAllLabels')
},
},
function showKeyboardShortcuts() {
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
}
const route = useRoute()
// hide menu on mobile
watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
// Reset the current list highlight in menu if the current route is not list related.
watch(() => route.fullPath, () => {
if (
[
'home',
'namespace.edit',
'teams.index',
'teams.edit',
'tasks.range',
'labels.index',
'migrate.start',
'migrate.wunderlist',
'namespaces.index',
].includes(route.name) ||
route.name.startsWith('user.settings')
) {
store.dispatch(CURRENT_LIST, null)
}
})
// TODO: Reset the title if the page component does not set one itself
function useRenewTokenOnFocus() {
const router = useRouter()
const userInfo = computed(() => store.state.auth.info)
const authenticated = computed(() => store.state.auth.authenticated)
// Try renewing the token every time vikunja is loaded initially
// (When opening the browser the focus event is not fired)
store.dispatch('auth/renewToken')
// Check if the token is still valid if the window gets focus again to maybe renew it
useEventListener('focus', () => {
if (!authenticated.value) {
return
}
const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
// If the token expiry is negative, it is already expired and we have no choice but to redirect
// the user to the login page
if (expiresIn < 0) {
store.dispatch('auth/checkAuth')
router.push({name: 'user.login'})
return
}
// Check if the token is valid for less than 60 hours and renew if thats the case
if (expiresIn < 60 * 3600) {
store.dispatch('auth/renewToken')
console.debug('renewed token')
}
})
}
useRenewTokenOnFocus()
store.dispatch('labels/loadAllLabels')
</script>
<style lang="scss" scoped>

19
src/components/home/contentLinkShare.vue
View File

@ -21,23 +21,16 @@
</div>
</template>
<script>
import {mapState} from 'vuex'
<script lang="ts" setup>
import {computed} from 'vue'
import {useStore} from 'vuex'
import Logo from '@/components/home/Logo.vue'
import PoweredByLink from './PoweredByLink.vue'
export default {
name: 'contentLinkShare',
components: {
Logo,
PoweredByLink,
},
computed: mapState([
'currentList',
'background',
]),
}
const store = useStore()
const currentList = computed(() => store.state.currentList)
const background = computed(() => store.state.background)
</script>
<style lang="scss" scoped>

68
src/components/home/contentNoAuth.vue
View File

@ -4,44 +4,38 @@
</no-auth-wrapper>
</template>
<script>
import {saveLastVisited} from '@/helpers/saveLastVisited'
<script lang="ts" setup>
import {watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
export default {
name: 'contentNoAuth',
components: {NoAuthWrapper},
computed: {
routeName() {
return this.$route.name
},
},
watch: {
routeName: {
handler(routeName) {
if (!routeName) return
this.redirectToHome()
},
immediate: true,
},
},
methods: {
redirectToHome() {
// Check if the user is already logged in and redirect them to the home page if not
if (
this.$route.name !== 'user.login' &&
this.$route.name !== 'user.password-reset.request' &&
this.$route.name !== 'user.password-reset.reset' &&
this.$route.name !== 'user.register' &&
this.$route.name !== 'link-share.auth' &&
this.$route.name !== 'openid.auth' &&
localStorage.getItem('passwordResetToken') === null &&
localStorage.getItem('emailConfirmToken') === null
) {
saveLastVisited(this.$route.name, this.$route.params)
this.$router.push({name: 'user.login'})
}
},
},
import {saveLastVisited} from '@/helpers/saveLastVisited'
const route = useRoute()
watchEffect(() => {
if (!route.name) return
redirectToHome()
})
const router = useRouter()
function redirectToHome() {
// Check if the user is already logged in and redirect them to the home page if not
if (
![
'user.login',
'user.password-reset.request',
'user.password-reset.reset',
'user.register',
'link-share.auth',
'openid.auth',
].includes(route.name) &&
localStorage.getItem('passwordResetToken') === null &&
localStorage.getItem('emailConfirmToken') === null
) {
saveLastVisited(route.name, route.params)
router.push({name: 'user.login'})
}
}
</script>

4
src/components/input/multiselect.vue
View File

@ -457,7 +457,7 @@ export default {
text-transform: none;
font-family: $family-sans-serif;
font-weight: normal;
padding: .5rem 0;
padding: .5rem;
border: none;
cursor: pointer;
@ -477,7 +477,7 @@ export default {
font-size: .75rem;
color: transparent;
transition: color $transition;
padding: 0 .5rem;
padding-left: .5rem;
}
&:focus, &:hover {

4
src/components/misc/api-config.vue
View File

@ -23,7 +23,7 @@
</div>
</div>
<div class="api-url-info" v-else>
<i18n-t keypath="apiConfig.signInOn">
<i18n-t keypath="apiConfig.use">
<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n-t>
<br/>
@ -101,7 +101,7 @@ export default {
// Set it + save it to local storage to save us the hoops
this.errorMsg = ''
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
this.$message.success({message: this.$t('apiConfig.success', {domain: this.apiDomain})})
this.configureApi = false
this.apiUrl = url
this.$emit('foundApi', this.apiUrl)

11
src/components/misc/message.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="message" :class="variant">
<slot/>
<div class="message-wrapper">
<div class="message" :class="variant">
<slot/>
</div>
</div>
</template>
@ -14,6 +16,11 @@ defineProps({
</script>
<style lang="scss" scoped>
.message-wrapper {
border-radius: $radius;
background: var(--white);
}
.message {
padding: .75rem 1rem;
border-radius: $radius;

116
src/components/misc/no-auth-wrapper.vue
View File

@ -1,40 +1,134 @@
<template>
<div class="no-auth-wrapper">
<Logo class="logo" width="200" height="58"/>
<div class="noauth-container">
<Logo class="logo" width="400" height="117" />
<Message v-if="motd !== ''" class="my-2">
{{ motd }}
</Message>
<slot/>
<section class="image" :class="{'has-message': motd !== ''}">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="image-title">
{{ $t('misc.welcomeBack') }}
</h2>
</section>
<section class="content">
<div>
<h2 class="title" v-if="title">{{ title }}</h2>
<api-config @foundApi="hasApiUrl = true"/>
<slot/>
</div>
<legal/>
</section>
</div>
</div>
</template>
<script lang="ts" setup>
import Logo from '@/components/home/Logo.vue'
import Message from '@/components/misc/message.vue'
import Logo from '@/components/home/Logo'
import Message from '@/components/misc/message'
import Legal from '@/components/misc/legal'
import ApiConfig from '@/components/misc/api-config.vue'
import {useStore} from 'vuex'
import {computed} from 'vue'
import {useRoute} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {useTitle} from '@/composables/useTitle'
const route = useRoute()
const store = useStore()
const {t} = useI18n()
const motd = computed(() => store.state.config.motd)
// @ts-ignore
const title = computed(() => t(route.meta.title ?? ''))
useTitle(() => title.value)
</script>
<style lang="scss" scoped>
.no-auth-wrapper {
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed var(--site-background);
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
min-height: 100vh;
display: flex;
flex-direction: column;
place-items: center;
@media screen and (max-width: $fullhd) {
padding-bottom: 15rem;
}
}
.noauth-container {
max-width: 450px;
max-width: $desktop;
width: 100%;
margin: 0 auto;
min-height: 60vh;
display: flex;
background-color: var(--white);
box-shadow: var(--shadow-md);
overflow: hidden;
@media screen and (min-width: $desktop) {
border-radius: $radius;
}
}
.image {
width: 50%;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
&.has-message {
justify-content: space-between;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .2);
}
> * {
position: relative;
}
}
}
.content {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 2rem 2rem 1.5rem;
@media screen and (max-width: $desktop) {
width: 100%;
max-width: 450px;
margin-inline: auto;
}
@media screen and (min-width: $desktop) {
width: 50%;
}
}
.logo {
color: var(--logo-text-color);
max-width: 100%;
margin: 1rem 0;
}
.image-title {
color: var(--white);
font-size: 2.5rem;
}
</style>

16
src/components/misc/pagination.vue
View File

@ -21,11 +21,11 @@
<li :key="`page-${i}`" v-for="(p, i) in pages">
<span class="pagination-ellipsis" v-if="p.isEllipsis">&hellip;</span>
<router-link
v-else
class="pagination-link"
:aria-label="'Goto page ' + p.number"
:class="{ 'is-current': p.number === currentPage }"
:to="getRouteForPagination(p.number)"
class="pagination-link"
v-else
>
{{ p.number }}
</router-link>
@ -98,13 +98,13 @@ const pages = computed(() => createPagination(props.totalPages, props.currentPag
<style lang="scss" scoped>
.pagination {
padding-bottom: 1rem;
}
.pagination-previous,
.pagination-next {
&:not(:disabled):hover {
background: $scheme-main;
cursor: pointer;
}
.pagination-previous,
.pagination-next {
&:not(:disabled):hover {
background: $scheme-main;
cursor: pointer;
}
}
</style>

84
src/components/tasks/partials/listSearch.vue
View File

@ -16,60 +16,54 @@
</multiselect>
</template>
<script>
import ListModel from '../../../models/list'
<script lang="ts" setup>
import {reactive, ref, watchEffect} from 'vue'
import {useStore} from 'vuex'
import {useI18n} from 'vue-i18n'
import ListModel from '@/models/list'
import Multiselect from '@/components/input/multiselect.vue'
export default {
name: 'listSearch',
data() {
return {
list: new ListModel(),
foundLists: [],
}
},
props: {
modelValue: {
required: false,
},
},
emits: ['update:modelValue', 'selected'],
components: {
Multiselect,
},
watch: {
modelValue: {
handler(value) {
this.list = value
},
immeditate: true,
deep: true,
},
},
methods: {
findLists(query) {
this.foundLists = this.$store.getters['lists/searchList'](query)
},
const store = useStore()
const {t} = useI18n()
select(list) {
this.list = list
this.$emit('selected', list)
this.$emit('update:modelValue', list)
},
namespace(namespaceId) {
const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
if (namespace !== null) {
return namespace.title
}
return this.$t('list.shared')
const list = reactive(new ListModel())
const props = defineProps({
modelValue: {
validator(value) {
return value instanceof ListModel
},
required: false,
},
})
const emit = defineEmits(['update:modelValue'])
watchEffect(() => {
Object.assign(list, props.modelValue)
})
const foundLists = ref([])
function findLists(query: string) {
if (query === '') {
select(null)
}
foundLists.value = store.getters['lists/searchList'](query)
}
function select(l: ListModel | null) {
Object.assign(list, l)
emit('update:modelValue', list)
}
function namespace(namespaceId: number) {
const namespace = store.getters['namespaces/getNamespaceById'](namespaceId)
return namespace !== null
? namespace.title
: t('list.shared')
}
</script>
<style lang="scss" scoped>
.list-namespace-title {
color: var(--grey-500);
color: var(--grey-500);
}
</style>

6
src/i18n/lang/cs-CZ.json
View File

@ -36,6 +36,7 @@
"password": "Heslo",
"passwordRepeat": "Zopakovat heslo",
"passwordPlaceholder": "např. • • • • • • • •",
"forgotPassword": "Forgot your password?",
"resetPassword": "Obnovit heslo",
"resetPasswordAction": "Poslat odkaz na obnovení hesla",
"resetPasswordSuccess": "Zkontrolujte doručenou poštu! Měli byste mít e-mail s pokyny, jak obnovit své heslo.",
@ -473,7 +474,8 @@
"download": "Stáhnout",
"showMenu": "Zobrazit nabídku",
"hideMenu": "Skrýt nabídku",
"forExample": "Například:"
"forExample": "Například:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Obnovit barvu",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "např. https://localhost:3456",
"change": "změnit",
"signInOn": "Přihlaste se ke svému účtu Vikunja na {0}",
"use": "Using Vikunja installation at {0}",
"error": "Nelze najít nebo použít instalaci Vikunja na \"{domain}\". Zkuste prosím jinou url.",
"success": "Pomocí instalace Vikunja na \"{domain}\".",
"urlRequired": "Je vyžadována adresa URL."

6
src/i18n/lang/de-DE.json
View File

@ -36,6 +36,7 @@
"password": "Passwort",
"passwordRepeat": "Gib dein Passwort erneut ein",
"passwordPlaceholder": "z.B. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Setze dein Passwort zurück",
"resetPasswordAction": "Sende mir einen Link zum Zurücksetzen des Passworts",
"resetPasswordSuccess": "Prüfe deinen Posteingang! Du solltest eine E-Mail mit Anweisungen zum Zurücksetzen deines Passworts erhalten haben.",
@ -473,7 +474,8 @@
"download": "Herunterladen",
"showMenu": "Menü anzeigen",
"hideMenu": "Menü ausblenden",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Farbe zurücksetzen",
@ -811,7 +813,7 @@
"url": "Vikunja-URL",
"urlPlaceholder": "z.B. https://localhost:3456",
"change": "ändern",
"signInOn": "Melde dich bei deinem Vikunja-Account auf {0} an",
"use": "Using Vikunja installation at {0}",
"error": "Konnte keine Vikunja-Installation unter „{domain}“ finden oder verwenden. Bitte probiere eine andere Url.",
"success": "Verwende die Vikunja-Installation unter „{domain}“.",
"urlRequired": "Eine Url ist erforderlich."

6
src/i18n/lang/de-swiss.json
View File

@ -36,6 +36,7 @@
"password": "Passwort",
"passwordRepeat": "Gib dis Passwort nomal iih",
"passwordPlaceholder": "z.B. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Setz diis Passwort zrugg",
"resetPasswordAction": "Schick mir en Passwort zruggsetz Link",
"resetPasswordSuccess": "Prüfe deinen Posteingang! Du solltest eine E-Mail mit Anweisungen zum Zurücksetzen deines Passworts erhalten haben.",
@ -473,7 +474,8 @@
"download": "Herunterladen",
"showMenu": "Menü anzeigen",
"hideMenu": "Menü ausblenden",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Farb zruggsetze",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "z.B. https://localhost:3456",
"change": "ändere",
"signInOn": "Dich i diin Vikunja-Account Iihloge uf {0}",
"use": "Using Vikunja installation at {0}",
"error": "Konnte keine Vikunja-Installation unter „{domain}“ finden oder verwenden. Bitte probiere eine andere Url.",
"success": "Benutze d'Vikunja Installation uf \"{domain}\".",
"urlRequired": "Eine Url ist erforderlich."

6
src/i18n/lang/en.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/es-ES.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/fr-FR.json
View File

@ -36,6 +36,7 @@
"password": "Mot de passe",
"passwordRepeat": "Retape ton mot de passe",
"passwordPlaceholder": "p. ex. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Réinitialiser ton mot de passe",
"resetPasswordAction": "M’envoyer un lien de réinitialisation du mot de passe",
"resetPasswordSuccess": "Vérifie ta boîte de réception ! Tu devrais avoir un courriel contenant les instructions sur la manière de réinitialiser ton mot de passe.",
@ -473,7 +474,8 @@
"download": "Télécharger",
"showMenu": "Afficher le menu",
"hideMenu": "Masquer le menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Réinitialiser la couleur",
@ -811,7 +813,7 @@
"url": "URL Vikunja",
"urlPlaceholder": "Par exemple : https://localhost:3456",
"change": "changer",
"signInOn": "Se connecter à ton compte Vikunja sur {0}",
"use": "Using Vikunja installation at {0}",
"error": "Impossible de trouver ou d'utiliser l'installation de Vikunja sur « {domain} ». Veuillez essayer une autre URL.",
"success": "Utilisation de l’installation Vikunja à « {domain} ».",
"urlRequired": "Une URL est requise."

6
src/i18n/lang/it-IT.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Digita di nuovo la tua password",
"passwordPlaceholder": "es. ••••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reimposta la tua password",
"resetPasswordAction": "Inviami il link per reimpostare la password",
"resetPasswordSuccess": "Controlla la tua casella di posta! Dovresti avere un'e-mail con le istruzioni su come reimpostare la password.",
@ -473,7 +474,8 @@
"download": "Scarica",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Ripristina Colore",
@ -811,7 +813,7 @@
"url": "URL Vikunja",
"urlPlaceholder": "es. http://localhost:8080",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/nl-NL.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/pt-BR.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/pt-PT.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/ro-RO.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/ru-RU.json
View File

@ -36,6 +36,7 @@
"password": "Пароль",
"passwordRepeat": "Пароль ещё раз",
"passwordPlaceholder": "напр. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Сбросить пароль",
"resetPasswordAction": "Отправить ссылку на сброс пароля",
"resetPasswordSuccess": "Проверь свою почту! Там должно быть письмо с инструкциями, как сбросить пароль.",
@ -473,7 +474,8 @@
"download": "Скачать",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Сбросить цвет",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "напр. https://localhost:3456",
"change": "изменить",
"signInOn": "Войди в свой аккаунт Vikunja на {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Используется Vikunja на \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/sv-SE.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/tr-TR.json
View File

@ -36,6 +36,7 @@
"password": "Password",
"passwordRepeat": "Retype your password",
"passwordPlaceholder": "e.g. •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset your password",
"resetPasswordAction": "Send me a password reset link",
"resetPasswordSuccess": "Check your inbox! You should have an e-mail with instructions on how to reset your password.",
@ -473,7 +474,8 @@
"download": "Download",
"showMenu": "Show the menu",
"hideMenu": "Hide the menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Reset Color",
@ -811,7 +813,7 @@
"url": "Vikunja URL",
"urlPlaceholder": "eg. https://localhost:3456",
"change": "change",
"signInOn": "Sign in to your Vikunja account on {0}",
"use": "Using Vikunja installation at {0}",
"error": "Could not find or use Vikunja installation at \"{domain}\". Please try a different url.",
"success": "Using Vikunja installation at \"{domain}\".",
"urlRequired": "A url is required."

6
src/i18n/lang/vi-VN.json
View File

@ -36,6 +36,7 @@
"password": "Mật khẩu",
"passwordRepeat": "Nhập lại mật khẩu",
"passwordPlaceholder": "ví dụ: •••••••••••",
"forgotPassword": "Forgot your password?",
"resetPassword": "Reset mật khẩu của bạn",
"resetPasswordAction": "Gửi cho tôi liên kết reset mật khẩu",
"resetPasswordSuccess": "Kiểm tra hộp thư của bạn! Bạn sẽ nhận một e-mail với hướng dẫn reset mật khẩu của mình.",
@ -473,7 +474,8 @@
"download": "Tải về",
"showMenu": "Hiển thị menu",
"hideMenu": "Ẩn menu",
"forExample": "For example:"
"forExample": "For example:",
"welcomeBack": "Welcome Back!"
},
"input": {
"resetColor": "Đặt lại màu",
@ -811,7 +813,7 @@
"url": "URL Vikunja",
"urlPlaceholder": "ví dụ: https://localhost:3456",
"change": "thay đổi",
"signInOn": "Đăng nhập vào tài khoản Vikunia tại {0}",
"use": "Using Vikunja installation at {0}",
"error": "Không thể tìm thấy hoặc sử dụng cài đặt Vikunja tại \"{domain}\". Vui lòng thử một url khác.",
"success": "Sử dụng cài đặt Vikunja tại \"{domain}\".",
"urlRequired": "Cần có một url."

12
src/router/index.js
View File

@ -105,21 +105,33 @@ const router = createRouter({
path: '/login',
name: 'user.login',
component: LoginComponent,
meta: {
title: 'user.auth.login',
},
},
{
path: '/get-password-reset',
name: 'user.password-reset.request',
component: GetPasswordResetComponent,
meta: {
title: 'user.auth.resetPassword',
},
},
{
path: '/password-reset',
name: 'user.password-reset.reset',
component: PasswordResetComponent,
meta: {
title: 'user.auth.resetPassword',
},
},
{
path: '/register',
name: 'user.register',
component: RegisterComponent,
meta: {
title: 'user.auth.register',
},
},
{
path: '/user/settings',

2
src/services/abstractService.js
View File

@ -28,7 +28,7 @@ export default class AbstractService {
/**
* The abstract constructor.
* @param paths An object with all paths. Default values are specified above.
* @param [paths] An object with all paths. Default values are specified above.
*/
constructor(paths) {
this.http = axios.create({

2
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>
<message variant="danger" v-if="deletionScheduledAt !== null">
<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
{{
$t('user.deletion.scheduled', {
date: formatDateShort(deletionScheduledAt),

134
src/views/sharing/LinkSharingAuth.vue
View File

@ -16,83 +16,101 @@
:placeholder="$t('user.auth.passwordPlaceholder')"
v-model="password"
v-focus
@keyup.enter.prevent="auth"
@keyup.enter.prevent="authenticate()"
/>
</div>
</div>
<x-button @click="auth" :loading="loading">
<x-button @click="authenticate()" :loading="loading">
{{ $t('user.auth.login') }}
</x-button>
<message variant="danger" class="mt-4" v-if="errorMessage !== ''">
<Message variant="danger" class="mt-4" v-if="errorMessage !== ''">
{{ errorMessage }}
</message>
</Message>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import Message from '@/components/misc/message'
<script lang="ts" setup>
import {ref, computed} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'
import {useI18n} from 'vue-i18n'
import {useTitle} from '@vueuse/core'
export default {
name: 'LinkSharingAuth',
components: {Message},
data() {
return {
loading: true,
authenticateWithPassword: false,
errorMessage: '',
import Message from '@/components/misc/message.vue'
hash: '',
password: '',
const {t} = useI18n()
useTitle(t('sharing.authenticating'))
async function useAuth() {
const store = useStore()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const authenticateWithPassword = ref(false)
const errorMessage = ref('')
const password = ref('')
const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
async function authenticate() {
authenticateWithPassword.value = false
errorMessage.value = ''
if (authLinkShare.value) {
// FIXME: push to 'list.list' since authenticated?
return
}
},
created() {
this.auth()
},
mounted() {
this.setTitle(this.$t('sharing.authenticating'))
},
computed: mapGetters('auth', [
'authLinkShare',
]),
methods: {
async auth() {
this.errorMessage = ''
// TODO: no password
loading.value = true
if (this.authLinkShare) {
try {
const {list_id: listId} = await store.dispatch('auth/linkShareAuth', {
hash: route.params.share,
password: password.value,
})
router.push({name: 'list.list', params: {listId}})
} catch (e) {
if (e.response?.data?.code === 13001) {
authenticateWithPassword.value = true
return
}
this.loading = true
try {
const r = await this.$store.dispatch('auth/linkShareAuth', {
hash: this.$route.params.share,
password: this.password,
})
this.$router.push({name: 'list.list', params: {listId: r.list_id}})
} catch (e) {
if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13001) {
this.authenticateWithPassword = true
return
}
// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
let errorMessage = this.$t('sharing.error')
if (e.response && e.response.data && e.response.data.message) {
errorMessage = e.response.data.message
}
if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13002) {
errorMessage = this.$t('sharing.invalidPassword')
}
this.errorMessage = errorMessage
} finally {
this.loading = false
// TODO: Put this logic in a global errorMessage handler method which checks all auth codes
let errorMessage = t('sharing.error')
if (e.response?.data?.message) {
errorMessage = e.response.data.message
}
},
},
if (e.response?.data?.code === 13002) {
errorMessage = t('sharing.invalidPassword')
}
errorMessage.value = errorMessage
} finally {
loading.value = false
}
}
authenticate()
return {
loading,
authenticateWithPassword,
errorMessage,
password,
authenticate,
}
}
const {
loading,
authenticateWithPassword,
errorMessage,
password,
authenticate,
} = useAuth()
</script>

2
src/views/tasks/ShowTasksInRange.vue
View File

@ -7,7 +7,7 @@
</div>
</template>
<script setup>
<script lang="ts" setup>
import { ref } from 'vue'
import ShowTasks from './ShowTasks'

2
src/views/tasks/TaskDetailView.vue
View File

@ -238,7 +238,7 @@
</h3>
<div class="field has-addons">
<div class="control is-expanded">
<list-search @selected="changeList" ref="moveList"/>
<list-search @update:modelValue="changeList" ref="moveList"/>
</div>
</div>
</div>

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

@ -1,103 +1,97 @@
<template>
<div>
<h2 class="title has-text-centered">Login</h2>
<div class="box">
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
{{ $t('user.auth.confirmEmailSuccess') }}
</message>
<api-config @foundApi="hasApiUrl = true"/>
<form @submit.prevent="submit" id="loginform" v-if="hasApiUrl && localAuthEnabled">
<div class="field">
<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
<div class="control">
<input
class="input" id="username"
name="username"
:placeholder="$t('user.auth.usernamePlaceholder')"
ref="username"
required
type="text"
autocomplete="username"
v-focus
@keyup.enter="submit"
/>
</div>
<message variant="success" class="has-text-centered" v-if="confirmedEmailSuccess">
{{ $t('user.auth.confirmEmailSuccess') }}
</message>
<message variant="danger" v-if="errorMessage">
{{ errorMessage }}
</message>
<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
<div class="field">
<label class="label" for="username">{{ $t('user.auth.usernameEmail') }}</label>
<div class="control">
<input
class="input" id="username"
name="username"
:placeholder="$t('user.auth.usernamePlaceholder')"
ref="username"
required
type="text"
autocomplete="username"
v-focus
@keyup.enter="submit"
/>
</div>
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password"
name="password"
:placeholder="$t('user.auth.passwordPlaceholder')"
ref="password"
required
type="password"
autocomplete="current-password"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password"
name="password"
:placeholder="$t('user.auth.passwordPlaceholder')"
ref="password"
required
type="password"
autocomplete="current-password"
@keyup.enter="submit"
/>
</div>
<div class="field" v-if="needsTotpPasscode">
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
<div class="control">
<input
autocomplete="one-time-code"
class="input"
id="totpPasscode"
:placeholder="$t('user.auth.totpPlaceholder')"
ref="totpPasscode"
required
type="text"
v-focus
@keyup.enter="submit"
/>
</div>
</div>
<div class="field" v-if="needsTotpPasscode">
<label class="label" for="totpPasscode">{{ $t('user.auth.totpTitle') }}</label>
<div class="control">
<input
autocomplete="one-time-code"
class="input"
id="totpPasscode"
:placeholder="$t('user.auth.totpPlaceholder')"
ref="totpPasscode"
required
type="text"
v-focus
@keyup.enter="submit"
/>
</div>
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<x-button
@click="submit"
:loading="loading"
>
{{ $t('user.auth.login') }}
</x-button>
<x-button
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
>
{{ $t('user.auth.register') }}
</x-button>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
{{ $t('user.auth.resetPassword') }}
</router-link>
</div>
</div>
<message variant="danger" v-if="errorMessage">
{{ errorMessage }}
</message>
</form>
<div
v-if="hasOpenIdProviders"
class="mt-4">
<x-button
@click="redirectToProvider(p)"
v-for="(p, k) in openidConnect.providers"
:key="k"
type="secondary"
class="is-fullwidth mt-2"
>
{{ $t('user.auth.loginWith', {provider: p.name}) }}
</x-button>
</div>
<legal/>
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<x-button
@click="submit"
:loading="loading"
>
{{ $t('user.auth.login') }}
</x-button>
<x-button
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
>
{{ $t('user.auth.register') }}
</x-button>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
{{ $t('user.auth.forgotPassword') }}
</router-link>
</div>
</div>
</form>
<div
v-if="hasOpenIdProviders"
class="mt-4">
<x-button
@click="redirectToProvider(p)"
v-for="(p, k) in openidConnect.providers"
:key="k"
type="secondary"
class="is-fullwidth mt-2"
>
{{ $t('user.auth.loginWith', {provider: p.name}) }}
</x-button>
</div>
</div>
</template>
@ -107,8 +101,6 @@ import {mapState} from 'vuex'
import {HTTPFactory} from '@/http-common'
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'
@ -117,13 +109,10 @@ import {getLastVisited, clearLastVisited} from '../../helpers/saveLastVisited'
export default {
components: {
Message,
ApiConfig,
legal,
},
data() {
return {
confirmedEmailSuccess: false,
hasApiUrl: false,
errorMessage: '',
}
},
@ -161,13 +150,11 @@ export default {
}
},
created() {
this.hasApiUrl = window.API_URL !== ''
this.setTitle(this.$t('user.auth.login'))
},
computed: {
hasOpenIdProviders() {
return this.hasApiUrl &&
this.openidConnect.enabled &&
return this.openidConnect.enabled &&
this.openidConnect.providers &&
this.openidConnect.providers.length > 0
},

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

@ -1,67 +1,60 @@
<template>
<div>
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
<div class="box">
<form @submit.prevent="submit" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password1"
name="password1"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-focus
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="password2"
name="password2"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password2"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="this.passwordResetService.loading"
@click="submit"
>
{{ $t('user.auth.resetPassword') }}
</x-button>
</div>
</div>
<message v-if="this.passwordResetService.loading">
{{ $t('misc.loading') }}
</message>
<message v-if="errorMsg">
{{ errorMsg }}
</message>
</form>
<div class="has-text-centered" v-if="successMessage">
<message variant="success">
{{ successMessage }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal/>
<message v-if="errorMsg">
{{ errorMsg }}
</message>
<div class="has-text-centered" v-if="successMessage">
<message variant="success">
{{ successMessage }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<form @submit.prevent="submit" id="form" v-if="!successMessage">
<div class="field">
<label class="label" for="password1">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password1"
name="password1"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-focus
v-model="credentials.password"/>
</div>
</div>
<div class="field">
<label class="label" for="password2">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="password2"
name="password2"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password2"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="this.passwordResetService.loading"
@click="submit"
>
{{ $t('user.auth.resetPassword') }}
</x-button>
</div>
</div>
</form>
</div>
</template>
@ -69,14 +62,11 @@
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'))
const credentials = reactive({
password: '',

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

@ -1,97 +1,90 @@
<template>
<div>
<h2 class="title has-text-centered">{{ $t('user.auth.register') }}</h2>
<div class="box">
<form @submit.prevent="submit" id="registerform">
<div class="field">
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
<div class="control">
<input
class="input"
id="username"
name="username"
:placeholder="$t('user.auth.usernamePlaceholder')"
required
type="text"
autocomplete="username"
v-focus
v-model="credentials.username"
@keyup.enter="submit"
/>
</div>
<message variant="danger" v-if="errorMessage !== ''">
{{ errorMessage }}
</message>
<form @submit.prevent="submit" id="registerform">
<div class="field">
<label class="label" for="username">{{ $t('user.auth.username') }}</label>
<div class="control">
<input
class="input"
id="username"
name="username"
:placeholder="$t('user.auth.usernamePlaceholder')"
required
type="text"
autocomplete="username"
v-focus
v-model="credentials.username"
@keyup.enter="submit"
/>
</div>
<div class="field">
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
<div class="control">
<input
class="input"
id="email"
name="email"
:placeholder="$t('user.auth.emailPlaceholder')"
required
type="email"
v-model="credentials.email"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field">
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
<div class="control">
<input
class="input"
id="email"
name="email"
:placeholder="$t('user.auth.emailPlaceholder')"
required
type="email"
v-model="credentials.email"
@keyup.enter="submit"
/>
</div>
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password"
name="password"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<div class="control">
<input
class="input"
id="password"
name="password"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="credentials.password"
@keyup.enter="submit"
/>
</div>
<div class="field">
<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="passwordValidation"
name="passwordValidation"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="passwordValidation"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field">
<label class="label" for="passwordValidation">{{ $t('user.auth.passwordRepeat') }}</label>
<div class="control">
<input
class="input"
id="passwordValidation"
name="passwordValidation"
:placeholder="$t('user.auth.passwordPlaceholder')"
required
type="password"
autocomplete="new-password"
v-model="passwordValidation"
@keyup.enter="submit"
/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="loading"
id="register-submit"
@click="submit"
class="mr-2"
>
{{ $t('user.auth.register') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
:loading="loading"
id="register-submit"
@click="submit"
class="mr-2"
>
{{ $t('user.auth.register') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>
<message v-if="loading">
{{ $t('misc.loading') }}
</message>
<message variant="danger" v-if="errorMessage !== ''">
{{ errorMessage }}
</message>
</form>
<legal/>
</div>
</div>
</form>
</div>
</template>
@ -101,8 +94,6 @@ 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
@ -114,7 +105,6 @@ onBeforeMount(() => {
})
const {t} = useI18n()
useTitle(() => t('user.auth.register'))
const credentials = reactive({
username: '',

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

@ -1,67 +1,56 @@
<template>
<div>
<h2 class="title has-text-centered">{{ $t('user.auth.resetPassword') }}</h2>
<div class="box">
<form @submit.prevent="submit" v-if="!isSuccess">
<div class="field">
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
<div class="control">
<input
class="input"
id="email"
name="email"
:placeholder="$t('user.auth.emailPlaceholder')"
required
type="email"
v-focus
v-model="passwordReset.email"/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
@click="submit"
:loading="passwordResetService.loading"
>
{{ $t('user.auth.resetPasswordAction') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>
</div>
<message variant="danger" v-if="errorMsg">
{{ errorMsg }}
</message>
</form>
<div class="has-text-centered" v-if="isSuccess">
<message variant="success">
{{ $t('user.auth.resetPasswordSuccess') }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal />
<message variant="danger" v-if="errorMsg">
{{ errorMsg }}
</message>
<div class="has-text-centered" v-if="isSuccess">
<message variant="success">
{{ $t('user.auth.resetPasswordSuccess') }}
</message>
<x-button :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }}
</x-button>
</div>
<form @submit.prevent="submit" v-if="!isSuccess">
<div class="field">
<label class="label" for="email">{{ $t('user.auth.email') }}</label>
<div class="control">
<input
class="input"
id="email"
name="email"
:placeholder="$t('user.auth.emailPlaceholder')"
required
type="email"
v-focus
v-model="passwordReset.email"/>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<x-button
@click="submit"
:loading="passwordResetService.loading"
>
{{ $t('user.auth.resetPasswordAction') }}
</x-button>
<x-button :to="{ name: 'user.login' }" type="secondary">
{{ $t('user.auth.login') }}
</x-button>
</div>
</div>
</form>
</div>
</template>
<script setup>
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'))
// Not sure if this instance needs a shalloRef at all
const passwordResetService = reactive(new PasswordResetService())
const passwordReset = ref(new PasswordResetModel())
@ -73,7 +62,7 @@ async function submit() {
try {
await passwordResetService.requestResetPassword(passwordReset.value)
isSuccess.value = true
} catch(e) {
} catch (e) {
errorMsg.value = e.response.data.message
}
}

30
src/views/user/settings/General.vue
View File

@ -131,8 +131,10 @@ import {playPop} from '@/helpers/playPop'
import {useColorScheme} from '@/composables/useColorScheme'
import {success} from '@/message'
const DEFAULT_LIST_ID = 0
function useColorSchemeSetting() {
const { t } = useI18n()
const {t} = useI18n()
const colorSchemeSettings = computed(() => ({
light: t('user.settings.appearance.colorScheme.light'),
auto: t('user.settings.appearance.colorScheme.system'),
@ -141,9 +143,11 @@ function useColorSchemeSetting() {
const {store} = useColorScheme()
watch(store, (schemeId) => {
success({message: t('user.settings.appearance.setSuccess', {
colorScheme: colorSchemeSettings.value[schemeId],
})})
success({
message: t('user.settings.appearance.setSuccess', {
colorScheme: colorSchemeSettings.value[schemeId],
}),
})
})
return {
@ -178,8 +182,13 @@ export default {
.map(l => ({code: l[0], title: l[1]}))
.sort((a, b) => a.title.localeCompare(b.title))
},
defaultList() {
return this.$store.getters['lists/getListById'](this.settings.defaultListId)
defaultList: {
get() {
return this.$store.getters['lists/getListById'](this.settings.defaultListId)
},
set(l) {
this.settings.defaultListId = l ? l.id : DEFAULT_LIST_ID
},
},
},
@ -204,12 +213,13 @@ export default {
localStorage.setItem(playSoundWhenDoneKey, this.playSoundWhenDone)
saveLanguage(this.language)
setQuickAddMagicMode(this.quickAddMagicMode)
this.settings.defaultListId = this.defaultList ? this.defaultList.id : 0
await this.userSettingsService.update(this.settings)
this.$store.commit('auth/setUserSettings', {
const settings = {
...this.settings,
})
}
await this.userSettingsService.update(settings)
this.$store.commit('auth/setUserSettings', settings)
this.$message.success({message: this.$t('user.settings.general.savedSuccess')})
},
},

1294
yarn.lock
View File

File diff suppressed because it is too large Load Diff