Added link sharing (#30)

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "bulma": "^0.7.1",
+    "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.11",
     "v-tooltip": "^2.0.0-rc.33",
     "verte": "^0.0.12",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated">
+		<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated && user.infos.type === authTypes.USER">
 			<div class="navbar-brand">
 				<router-link :to="{name: 'home'}" class="navbar-item logo">
 					<img src="/images/logo-full.svg" alt="Vikunja"/>
@@ -31,7 +31,7 @@
 				</div>
 			</div>
 		</nav>
-		<div v-if="user.authenticated">
+		<div v-if="user.authenticated && user.infos.type === authTypes.USER">
 			<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive"><icon icon="bars"></icon></a>
 			<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive"><icon icon="times"></icon></a>
 			<div class="app-container">
@@ -122,10 +122,28 @@
 				</div>
 			</div>
 		</div>
+		<div v-else-if="user.authenticated && user.infos.type === authTypes.LINK_SHARE">
+			<div class="container has-text-centered link-share-view">
+				<div class="column is-10 is-offset-1">
+					<img src="/images/logo-full.svg" alt="Vikunja" class="logo"/>
+					<div class="box has-text-left">
+						<div class="logout">
+							<a @click="logout()" class="button logout">
+								<span>Logout</span>
+									<span class="icon is-small">
+									<icon icon="sign-out-alt"/>
+								</span>
+							</a>
+						</div>
+                        <router-view/>
+					</div>
+				</div>
+			</div>
+		</div>
 		<div v-else>
 			<div class="container has-text-centered">
 				<div class="column is-4 is-offset-4">
-					<img src="/images/logo-full.svg"/>
+					<img src="/images/logo-full.svg" alt="Vikunja"/>
 						<router-view/>
 				</div>
 			</div>
@@ -138,7 +156,9 @@
 	import auth from './auth'
 	import message from './message'
 	import router from './router'
+
 	import NamespaceService from './services/namespace'
+	import authTypes from './models/authTypes'
 
 	export default {
 		name: 'app',
@@ -152,6 +172,7 @@
 				fullpage: false,
 				currentDate: new Date(),
 				userMenuActive: false,
+				authTypes: authTypes,
 			}
 		},
 		beforeMount() {
@@ -169,7 +190,7 @@
 			}
 		},
 		created() {
-			if (this.user.authenticated) {
+			if (auth.user.authenticated && auth.user.infos.type === authTypes.USER && this.$route.params.name === 'home') {
 				this.loadNamespaces()
 			}
 		},
@@ -195,7 +216,7 @@
 					})
 			},
 			loadNamespacesIfNeeded(e){
-				if (this.user.authenticated && e.name === 'home') {
+				if (auth.user.authenticated && auth.user.infos.type === authTypes.USER && e.name === 'home') {
 					this.loadNamespaces()
 				}
 			},

src/auth/index.js

@@ -7,7 +7,7 @@ export default {
 
 	user: {
 		authenticated: false,
-		infos: {}
+		infos: {},
 	},
 
 	login(context, creds, redirect) {
@@ -23,6 +23,7 @@ export default {
 
 				// Tell others the user is autheticated
 				this.user.authenticated = true
+				this.user.isLinkShareAuth = false
 				const inf = this.getUserInfos()
 				// eslint-disable-next-line
 				console.log(inf)
@@ -74,6 +75,17 @@ export default {
 		this.user.authenticated = false
 	},
 
+	linkShareAuth(hash) {
+		return HTTP.post('/shares/'+hash+'/auth')
+			.then(r => {
+				localStorage.setItem('token', r.data.token)
+				this.getUserInfos()
+				return Promise.resolve(r.data)
+			}).catch(e =>  {
+				return Promise.reject(e)
+			})
+	},
+
 	checkAuth() {
 		let jwt = localStorage.getItem('token')
 		this.getUserInfos()

src/components/lists/EditList.vue

@@ -44,6 +44,8 @@
 		<component :is="manageUsersComponent" :id="list.id" type="list" shareType="user" :userIsAdmin="userIsAdmin"></component>
 		<component :is="manageTeamsComponent" :id="list.id" type="list" shareType="team" :userIsAdmin="userIsAdmin"></component>
 
+		<link-sharing :list-i-d="$route.params.id"/>
+
 		<modal
 				v-if="showDeleteModal"
 				@close="showDeleteModal = false"
@@ -60,6 +62,7 @@
 	import router from '../../router'
 	import message from '../../message'
 	import manageSharing from '../sharing/userTeam'
+	import LinkSharing from '../sharing/linkSharing';
 
 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
@@ -80,6 +83,7 @@
 			}
 		},
 		components: {
+			LinkSharing,
 			manageSharing,
 		},
 		beforeMount() {

src/components/lists/ShowList.vue

@@ -41,7 +41,7 @@
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage
-			if (!auth.user.authenticated) {
+			if (!auth.user.authenticated && !auth.user.isLinkShareAuth) {
 				router.push({name: 'home'})
 			}
 

src/components/sharing/linkSharing.vue

@@ -0,0 +1,195 @@
+<template>
+    <div class="card is-fullwidth">
+        <header class="card-header">
+            <p class="card-header-title">
+                Share links
+            </p>
+        </header>
+        <div class="card-content content sharables-list">
+            <form @submit.prevent="add()" class="add-form">
+                <div class="field is-grouped">
+                    <div class="control">
+                        <!-- TODO: maybe move this into a modal? -->
+                        Add a new link share:
+                    </div>
+                    <div class="control">
+                        <div class="select">
+                            <select v-model="selectedRight" class="button buttonright">
+                                <option :value="rights.READ">Read only</option>
+                                <option :value="rights.READ_WRITE">Read & write</option>
+                                <option :value="rights.ADMIN">Admin</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="control">
+                        <button type="submit" class="button is-success">
+                            <span class="icon is-small">
+                                <icon icon="plus"/>
+                            </span>
+                            Add
+                        </button>
+                    </div>
+                </div>
+            </form>
+            <table class="table is-striped is-hoverable is-fullwidth">
+                <tbody>
+                <tr>
+                    <th>Link</th>
+                    <th>Shared by</th>
+                    <th>Right</th>
+                    <th>Delete</th>
+                </tr>
+                <template v-if="linkShares.length > 0">
+                <tr v-for="s in linkShares" :key="s.id">
+                    <td>
+                        <div class="field has-addons">
+                            <div class="control">
+                                <input class="input" type="text" :value="getShareLink(s.hash)" readonly/>
+                            </div>
+                            <div class="control">
+                                <a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
+                                    <span class="icon is-small">
+                                      <icon icon="paste"/>
+                                    </span>
+                                </a>
+                            </div>
+                        </div>
+                    </td>
+                    <td>
+                        {{ s.shared_by.username }}
+                    </td>
+                    <td class="type">
+                        <template v-if="s.right === rights.ADMIN">
+                        <span class="icon is-small">
+                            <icon icon="lock"/>
+                        </span>
+                            Admin
+                        </template>
+                        <template v-else-if="s.right === rights.READ_WRITE">
+                        <span class="icon is-small">
+                            <icon icon="pen"/>
+                        </span>
+                            Write
+                        </template>
+                        <template v-else>
+                        <span class="icon is-small">
+                            <icon icon="users"/>
+                        </span>
+                            Read-only
+                        </template>
+                    </td>
+                    <td class="actions">
+                        <button @click="linkIDToDelete = s.id; showDeleteModal = true" class="button is-danger icon-only">
+                            <span class="icon is-small">
+                                <icon icon="trash-alt"/>
+                            </span>
+                        </button>
+                    </td>
+                </tr>
+                </template>
+                </tbody>
+            </table>
+        </div>
+
+        <modal
+                v-if="showDeleteModal"
+                @close="showDeleteModal = false"
+                @submit="remove()">
+            <span slot="header">Remove a link share</span>
+            <p slot="text">Are you sure you want to remove this link share?<br/>
+                It will no longer be possible to access this list with this link share.<br/>
+                <b>This CANNOT BE UNDONE!</b></p>
+        </modal>
+    </div>
+</template>
+
+<script>
+    import message from '../../message'
+    import rights from '../../models/rights'
+
+    import LinkShareService from '../../services/linkShare'
+    import LinkShareModel from '../../models/linkShare'
+
+    import copy from 'copy-to-clipboard'
+
+    export default {
+        name: 'linkSharing',
+        props: {
+            listID: {
+                default: 0,
+                required: true,
+            },
+        },
+        data() {
+            return {
+                linkShares: [],
+                linkShareService: LinkShareService,
+                newLinkShare: LinkShareModel,
+                rights: rights,
+                selectedRight: rights.READ,
+                showDeleteModal: false,
+                linkIDToDelete: 0,
+            }
+        },
+        beforeMount() {
+            this.linkShareService = new LinkShareService()
+        },
+        created() {
+            this.linkShareService = new LinkShareService()
+            this.load()
+        },
+        watch: {
+            listID: () => { // watch it
+                this.load()
+            }
+        },
+        methods: {
+            load() {
+                // If listID == 0 the list on the calling component wasn't already loaded, so we just bail out here
+                if (this.listID === 0) {
+                    return
+                }
+
+                this.linkShareService.getAll({listID: this.listID})
+                    .then(r => {
+                        this.linkShares = r
+                    })
+                    .catch(e => {
+                        message.error(e, this)
+                    })
+            },
+            add() {
+                let newLinkShare = new LinkShareModel({right: this.selectedRight, listID: this.listID})
+                this.linkShareService.create(newLinkShare)
+                    .then(() => {
+                        this.selectedRight = rights.READ
+                        message.success({message: 'The link share was successfully created'}, this)
+                        this.load()
+                    })
+                    .catch(e => {
+                        message.error(e, this)
+                    })
+            },
+            remove() {
+                let linkshare = new LinkShareModel({id: this.linkIDToDelete, listID: this.listID})
+                this.linkShareService.delete(linkshare)
+                    .then(() => {
+                        message.success({message: 'The link share was successfully deleted'}, this)
+                        this.load()
+                    })
+                    .catch(e => {
+                        message.error(e, this)
+                    })
+                    .finally(() => {
+                        this.showDeleteModal = false
+                    })
+            },
+            copy(text) {
+                copy(text)
+            },
+            getShareLink(hash) {
+                return this.$config.frontend_url + 'share/'  + hash + '/auth'
+            },
+        },
+    }
+</script>

src/components/sharing/linkSharingAuth.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="message is-centered is-info" v-if="loading">
+        <div class="message-header">
+            <p class="has-text-centered">
+                Authenticating...
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+    import auth from '../../auth'
+    import router from '../../router'
+    import message from '../../message'
+
+    export default {
+        name: 'linkSharingAuth',
+        data() {
+            return {
+                hash: '',
+                loading: true,
+            }
+        },
+        created() {
+            this.auth()
+        },
+        methods: {
+            auth() {
+                auth.linkShareAuth(this.$route.params.share)
+                    .then((r) => {
+                        this.loading = false
+                        router.push({name: 'showList', params: {id: r.list_id}})
+                    })
+                    .catch(e => {
+                        message.error(e, this)
+                    })
+            }
+        },
+    }
+</script>

src/components/sharing/userTeam.vue

@@ -1,6 +1,5 @@
 <template>
-	<div class="card">
+	<div class="card is-fullwidth">
-
 		<header class="card-header">
 			<p class="card-header-title">
 				{{shareType}}s with access to this {{typeString}}
@@ -307,33 +306,3 @@
 		},
 	}
 </script>
-
-<style lang="scss" scoped>
-	.card{
-		margin-bottom: 1rem;
-
-		.add-form {
-			margin: 1rem;
-		}
-
-		.table{
-			border-top: 1px solid darken(#fff, 15%);
-
-			td{
-				vertical-align: middle;
-			}
-
-			td.type, td.actions{
-				width: 250px;
-			}
-
-			td.actions{
-				text-align: right;
-			}
-		}
-	}
-
-	.sharables-list, .sharables-namespace{
-		padding: 0 !important;
-	}
-</style>

src/main.js

@@ -50,6 +50,7 @@ import { faExclamation } from '@fortawesome/free-solid-svg-icons'
 import { faTags } from '@fortawesome/free-solid-svg-icons'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faPaste } from '@fortawesome/free-solid-svg-icons'
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -78,6 +79,7 @@ library.add(faExclamation)
 library.add(faTags)
 library.add(faChevronDown)
 library.add(faCheck)
+library.add(faPaste)
 
 Vue.component('icon', FontAwesomeIcon)
 

src/models/authTypes.json

@@ -0,0 +1,5 @@
+{
+  "UNKNOWN": 0,
+  "USER": 1,
+  "LINK_SHARE": 2
+}

src/models/linkShare.js

@@ -0,0 +1,27 @@
+import AbstractModel from './abstractModel'
+import UserModel from './user'
+
+export default class ListModel extends AbstractModel {
+
+    constructor(data) {
+        // The constructor of AbstractModel handles all the default parsing.
+        super(data)
+
+        this.shared_by = new UserModel(this.shared_by)
+    }
+
+    // Default attributes that define the "empty" state.
+    defaults() {
+        return {
+            id: 0,
+            hash: '',
+            right: 0,
+            shared_by: UserModel,
+            sharing_type: 0,
+            listID: 0,
+
+            created: 0,
+            updated: 0,
+        }
+    }
+}

src/router/index.js

@@ -12,6 +12,7 @@ import ShowListComponent from '@/components/lists/ShowList'
 import NewListComponent from '@/components/lists/NewList'
 import EditListComponent from '@/components/lists/EditList'
 import ShowTasksInRangeComponent from '@/components/tasks/ShowTasksInRange'
+import LinkShareAuthComponent from '@/components/sharing/linkSharingAuth'
 // Namespace Handling
 import NewNamespaceComponent from '@/components/namespaces/NewNamespace'
 import EditNamespaceComponent from '@/components/namespaces/EditNamespace'
@@ -106,6 +107,11 @@ export default new Router({
 			path: '/labels',
 			name: 'listLabels',
 			component: ListLabelsComponent
-		}
+		},
+		{
+			path: '/share/:share/auth',
+			name: 'linkShareAuth',
+			component: LinkShareAuthComponent
+		},
 	]
 })

src/services/linkShare.js

@@ -0,0 +1,17 @@
+import AbstractService from './abstractService'
+import LinkShareModel from '../models/linkShare'
+
+export default class ListService extends AbstractService {
+    constructor() {
+        super({
+            getAll: '/lists/{listID}/shares',
+            get: '/lists/{listID}/shares/{id}',
+            create: '/lists/{listID}/shares',
+            delete: '/lists/{listID}/shares/{id}',
+        })
+    }
+
+    modelFactory(data) {
+        return new LinkShareModel(data)
+    }
+}

src/styles/list.scss

@@ -0,0 +1,31 @@
+.card.is-fullwidth{
+  margin-bottom: 1rem;
+
+  .add-form {
+    margin: 1rem;
+  }
+
+  .content {
+    padding: 0;
+  }
+
+  .table{
+    border-top: 1px solid darken(#fff, 15%);
+
+    td{
+      vertical-align: middle;
+    }
+
+    td.type, td.actions{
+      width: 250px;
+    }
+
+    td.actions{
+      text-align: right;
+    }
+  }
+}
+
+.sharables-list, .sharables-namespace{
+  padding: 0 !important;
+}

src/styles/theme.scss

@@ -303,3 +303,15 @@ h1,h2,h3,h4,h5,h6{
     }
   }
 }
+
+.link-share-view {
+  .logo {
+    max-width: 500px;
+    width: 90%;
+    margin: 2em 0 4em;
+  }
+
+  .logout {
+    text-align: right;
+  }
+}

src/vikunja.scss

@@ -7,6 +7,7 @@
 @import 'styles/teams';
 @import 'styles/fullpage';
 @import 'styles/labels';
+@import 'styles/list';
 
 @import 'styles/fancycheckbox';
 @import 'styles/tooltip';

todo.md

@@ -69,7 +69,7 @@
 
 ## Bugs
 
-* [ ] When adding an existing label to a task, the label is created every time it is added 
+* [x] When adding an existing label to a task, the label is created every time it is added -> no it isn't that's a bug in the api 
 
 ## Funktionen aus der API
 
@@ -127,6 +127,7 @@
 ## Other features
 
 * [x] Search for users at new task assignees only in users who have access to the list
+* [ ] Respect list rights in the ui, don't show buttons etc when the user has not the right to use them
 * [ ] Copy lists
 * [ ] "Move to Vikunja" -> Migrator von Wunderlist/todoist/etc
 

yarn.lock

@@ -2538,6 +2538,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
+  integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
@@ -8953,6 +8960,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"