local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add link share password authentication (#466)

Browse source 
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/466
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
This commit is contained in:
konrad 2021-04-11 13:18:19 +00:00
parent fa35f7790a
commit 2d8c43a920
4 changed files with 121 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/components/sharing/linkSharing.vue
View file

@ -1,21 +1,33 @@
<template>
<div>
<p class="has-text-weight-bold">Share Links</p>
<p class="has-text-weight-bold">
Share Links
<span
class="is-size-7"
v-tooltip="'Share Links allow you to easily share a list with other users who don\'t have an account on Vikunja.'">
What is a share link?
</span>
</p>
<div class="sharables-list">
<div class="p-4">
<p>Share with a link:</p>
<div class="field has-addons">
<div class="control">
<input
class="input"
placeholder="Name"
v-tooltip="'All actions done by this link share will show up with the name.'"
v-model="name"
/>
</div>
<x-button
v-if="!(linkShares.length === 0 || showNewForm)"
@click="showNewForm = true"
icon="plus"
class="mb-4">
Create a new link share
</x-button>
<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
<div class="field">
<label class="label" for="linkShareRight">
Right
</label>
<div class="control">
<div class="select">
<select v-model="selectedRight">
<select v-model="selectedRight" id="linkShareRight">
<option :value="rights.READ">Read only</option>
<option :value="rights.READ_WRITE">
Read & write
@ -24,11 +36,39 @@
</select>
</div>
</div>
</div>
<div class="field">
<label class="label" for="linkShareName">
Name (optional)
</label>
<div class="control">
<x-button @click="add"> Share</x-button>
<input
id="linkShareName"
class="input"
placeholder="e.g. Lorem Ipsum"
v-tooltip="'All actions done by this link share will show up with the name.'"
v-model="name"
/>
</div>
</div>
<div class="field">
<label class="label" for="linkSharePassword">
Password (optional)
</label>
<div class="control">
<input
id="linkSharePassword"
type="password"
class="input"
placeholder="e.g. ••••••••••••"
v-tooltip="'When authenticating, the user will be required to enter this password.'"
v-model="password"
/>
</div>
</div>
<x-button @click="add" icon="plus">Share</x-button>
</div>
<table
class="table has-actions is-striped is-hoverable is-fullwidth link-share-list"
v-if="linkShares.length > 0"
@ -156,8 +196,10 @@ export default {
rights: rights,
selectedRight: rights.READ,
name: '',
password: '',
showDeleteModal: false,
linkIdToDelete: 0,
showNewForm: false,
}
},
beforeMount() {
@ -193,15 +235,19 @@ export default {
})
},
add() {
let newLinkShare = new LinkShareModel({
const newLinkShare = new LinkShareModel({
right: this.selectedRight,
listId: this.listId,
name: this.name,
password: this.password,
})
this.linkShareService
.create(newLinkShare)
.then(() => {
this.selectedRight = rights.READ
this.name = ''
this.password = ''
this.showNewForm = false
this.success(
{message: 'The link share was successfully created'},
this
@ -213,7 +259,7 @@ export default {
})
},
remove() {
let linkshare = new LinkShareModel({
const linkshare = new LinkShareModel({
id: this.linkIdToDelete,
listId: this.listId,
})

1
src/models/linkShare.js
View file

@ -23,6 +23,7 @@ export default class ListModel extends AbstractModel {
sharingType: 0,
listId: 0,
name: '',
password: '',
created: null,
updated: null,

7
src/store/modules/auth.js
View file

@ -151,10 +151,11 @@ export default {
ctx.commit(LOADING, false, {root: true})
})
},
linkShareAuth(ctx, hash) {
linkShareAuth(ctx, {hash, password}) {
const HTTP = HTTPFactory()
return HTTP.post('/shares/' + hash + '/auth')
return HTTP.post('/shares/' + hash + '/auth', {
password: password,
})
.then(r => {
localStorage.setItem('token', r.data.token)
ctx.dispatch('checkAuth')

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

@ -1,9 +1,33 @@
<template>
<div class="message is-centered is-info">
<div class="message-header">
<p class="has-text-centered">
Authenticating...
<div>
<div class="notification is-info is-light has-text-centered" v-if="loading">
Authenticating...
</div>
<div v-if="authenticateWithPassword" class="box">
<p class="pb-2">
This shared list requires a password. Please enter it below:
</p>
<div class="field">
<div class="control">
<input
id="linkSharePassword"
type="password"
class="input"
placeholder="e.g. ••••••••••••"
v-model="password"
v-focus
@keyup.enter.prevent="auth"
/>
</div>
</div>
<x-button @click="auth" :loading="loading">
Login
</x-button>
<div class="notification is-danger mt-4" v-if="error !== ''">
{{ error }}
</div>
</div>
</div>
</template>
@ -16,7 +40,12 @@ export default {
name: 'LinkSharingAuth',
data() {
return {
loading: true,
authenticateWithPassword: false,
error: '',
hash: '',
password: '',
}
},
created() {
@ -30,17 +59,35 @@ export default {
}),
methods: {
auth() {
this.error = ''
if (this.authLinkShare) {
return
}
this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
this.loading = true
this.$store.dispatch('auth/linkShareAuth', {hash: this.$route.params.share, password: this.password})
.then((r) => {
console.log('after link share auth')
this.$router.push({name: 'list.list', params: {listId: r.list_id}})
})
.catch(e => {
this.error(e, this)
if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13001) {
this.authenticateWithPassword = true
return
}
let error = 'An error occured.'
if (e.response && e.response.data && e.response.data.message) {
error = e.response.data.message
}
if (typeof e.response.data.code !== 'undefined' && e.response.data.code === 13002) {
error = 'The password is invalid.'
}
this.error = error
})
.finally(() => {
this.loading = false
})
},
},