From 5645e32cf08d8b39f410eb51fc55b8146cbc497d Mon Sep 17 00:00:00 2001 From: N-Pex Date: Mon, 25 Jan 2021 22:18:15 +0100 Subject: [PATCH] Add join link to room info screen Issue #38. --- package-lock.json | 83 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/RoomInfo.vue | 44 +++++++++++++++++++- src/main.js | 4 +- 4 files changed, 130 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 242e72d..0ae335f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "roboto-fontface": "*", "v-emoji-picker": "^2.3.1", "vue": "^2.6.11", + "vue-clipboard2": "^0.3.1", "vue-resize": "^0.5.0", "vue-router": "^3.2.0", "vuetify": "^2.2.11", @@ -3795,6 +3796,16 @@ "node": ">= 10" } }, + "node_modules/clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "dependencies": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "node_modules/clipboardy": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", @@ -5024,6 +5035,11 @@ "node": ">=0.4.0" } }, + "node_modules/delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "node_modules/depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -6599,6 +6615,14 @@ "node": ">=6" } }, + "node_modules/good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "dependencies": { + "delegate": "^3.1.2" + } + }, "node_modules/graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -11484,6 +11508,11 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=" + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -12778,6 +12807,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "node_modules/tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13427,6 +13461,14 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vue-clipboard2": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz", + "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==", + "dependencies": { + "clipboard": "^2.0.0" + } + }, "node_modules/vue-eslint-parser": { "version": "7.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz", @@ -18082,6 +18124,16 @@ "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", "dev": true }, + "clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "clipboardy": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", @@ -19062,6 +19114,11 @@ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -20318,6 +20375,14 @@ "slash": "^2.0.0" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -24215,6 +24280,11 @@ "ajv-keywords": "^3.5.2" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=" + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -25299,6 +25369,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -25814,6 +25889,14 @@ } } }, + "vue-clipboard2": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz", + "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==", + "requires": { + "clipboard": "^2.0.0" + } + }, "vue-eslint-parser": { "version": "7.3.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz", diff --git a/package.json b/package.json index af1021a..fb39ac0 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "roboto-fontface": "*", "v-emoji-picker": "^2.3.1", "vue": "^2.6.11", + "vue-clipboard2": "^0.3.1", "vue-resize": "^0.5.0", "vue-router": "^3.2.0", "vuetify": "^2.2.11", diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue index 55cedc9..a7e019a 100644 --- a/src/components/RoomInfo.vue +++ b/src/components/RoomInfo.vue @@ -29,6 +29,25 @@ + + Permissions + +
+
+ Anyone with a link can join. +
+ +
+ + + Members @@ -156,6 +175,21 @@ export default { return ""; }, + anyoneCanJoin() { + // TODO: fix this! For now, just return true of we have a canonical alias. + if (this.room && this.room.getCanonicalAlias() && this.room.getCanonicalAlias().startsWith('#')) { + return true; + } + return false; + }, + + roomLink() { + if (this.room) { + return this.$router.getRoomLink(this.room.getCanonicalAlias() || this.room.roomId); + } + return null; + }, + roomAvatar() { if (this.room) { return this.room.avatar; @@ -207,7 +241,7 @@ export default { }, updateQRCode() { - var fullUrl = this.$router.getRoomLink(this.room.getCanonicalAlias() || this.room.roomId); + var fullUrl = this.roomLink; var canvas = document.getElementById("room-qr"); QRCode.toCanvas( canvas, @@ -260,6 +294,14 @@ export default { console.log("ERROR", err); }); }, + + copyRoomLink() { + this.$copyText(this.roomLink).then(function (e) { + console.log(e) + }, function (e) { + console.log(e) + }); + } }, }; diff --git a/src/main.js b/src/main.js index f07f1b3..3712945 100644 --- a/src/main.js +++ b/src/main.js @@ -10,12 +10,14 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' import VEmojiPicker from 'v-emoji-picker'; import VueResize from 'vue-resize'; import 'vue-resize/dist/vue-resize.css'; - +import VueClipboard from 'vue-clipboard2' + Vue.config.productionTip = false Vue.use(VueResize); Vue.use(VEmojiPicker); Vue.use(matrix, {store: store}); +Vue.use(VueClipboard); // Add bubble functionality to custom events. // From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events