Add link share password authentication (#466)

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>

src/components/sharing/linkSharing.vue

@@ -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>
+			<x-button
-				<div class="field has-addons">
+				v-if="!(linkShares.length === 0 || showNewForm)"
-					<div class="control">
+				@click="showNewForm = true"
-						<input
+				icon="plus"
-							class="input"
+				class="mb-4">
-							placeholder="Name"
+				Create a new link share
-							v-tooltip="'All actions done by this link share will show up with the name.'"
+			</x-button>
-							v-model="name"
+
-						/>
+			<div class="p-4" v-if="linkShares.length === 0 || showNewForm">
-					</div>
+				<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,
 			})

src/models/linkShare.js

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

src/store/modules/auth.js

@@ -151,10 +151,11 @@ export default {
 					ctx.commit(LOADING, false, {root: true})
 				})
 		},
-
+		linkShareAuth(ctx, {hash, password}) {
-		linkShareAuth(ctx, hash) {
 			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')

src/views/sharing/LinkSharingAuth.vue

@@ -1,9 +1,33 @@
 <template>
-	<div class="message is-centered is-info">
+	<div>
-		<div class="message-header">
+		<div class="notification is-info is-light has-text-centered" v-if="loading">
-			<p class="has-text-centered">
 			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
 				})
 		},
 	},