Move settings to an app

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

1 files changed, 204 insertions, 0 deletions

diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
new file mode 100644
index 00000000000..000e873e659
--- /dev/null
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -0,0 +1,204 @@
+<!--
+  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<div v-if="!adding">
+		<input v-model="deviceName"
+			   type="text"
+			   @keydown.enter="submit"
+			   :disabled="loading"
+			   :placeholder="t('settings', 'App name')">
+		<button class="button"
+				:disabled="loading"
+				@click="submit">{{ t('settings', 'Create new app password')	}}
+		</button>
+	</div>
+	<div v-else>
+		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
+		{{ t('settings', 'For security reasons this password will only be shown once.') }}
+		<div class="app-password-row">
+			<span class="app-password-label">{{ t('settings', 'Username') }}</span>
+			<input :value="loginName"
+				   type="text"
+				   class="monospaced"
+				   readonly="readonly"
+				   @focus="selectInput"/>
+		</div>
+		<div class="app-password-row">
+			<span class="app-password-label">{{ t('settings', 'Password') }}</span>
+			<input :value="appPassword"
+				   type="text"
+				   class="monospaced"
+				   ref="appPassword"
+				   readonly="readonly"
+				   @focus="selectInput"/>
+			<a class="icon icon-clippy"
+			   ref="clipboardButton"
+			   v-tooltip="copyTooltipOptions"
+			   @mouseover="hoveringCopyButton = true"
+			   @mouseleave="hoveringCopyButton = false"
+			   v-clipboard:copy="appPassword"
+			   v-clipboard:success="onCopyPassword"
+			   v-clipboard:error="onCopyPasswordFailed"></a>
+			<button class="button"
+					@click="reset">
+				{{ t('settings', 'Done') }}
+			</button>
+		</div>
+		<div class="app-password-row">
+			<span class="app-password-label"></span>
+			<a v-if="!showQR"
+			   @click="showQR = true">
+				{{ t('settings', 'Show QR code for mobile apps') }}
+			</a>
+			<QR v-else
+				:value="qrUrl"></QR>
+		</div>
+	</div>
+</template>
+
+<script>
+	import QR from '@chenfengyuan/vue-qrcode';
+	import confirmPassword from 'nextcloud-password-confirmation';
+
+	export default {
+		name: 'AuthTokenSetupDialogue',
+		components: {
+			QR,
+		},
+		props: {
+			add: {
+				type: Function,
+				required: true,
+			}
+		},
+		data () {
+			return {
+				adding: false,
+				loading: false,
+				deviceName: '',
+				appPassword: '',
+				loginName: '',
+				passwordCopied: false,
+				showQR: false,
+				qrUrl: '',
+				hoveringCopyButton: false,
+			}
+		},
+		computed: {
+			copyTooltipOptions() {
+				const base = {
+					hideOnTargetClick: false,
+					trigger: 'manual',
+				};
+
+				if (this.passwordCopied) {
+					return {
+						...base,
+						content:t('core', 'Copied!'),
+						show: true,
+					}
+				} else {
+					return {
+						...base,
+						content: t('core', 'Copy'),
+						show: this.hoveringCopyButton,
+					}
+				}
+			}
+		},
+		methods: {
+			selectInput (e) {
+				e.currentTarget.select();
+			},
+			submit: function () {
+				confirmPassword()
+					.then(() => {
+						this.loading = true;
+						return this.add(this.deviceName)
+					})
+					.then(token => {
+						this.adding = true;
+						this.loginName = token.loginName;
+						this.appPassword = token.token;
+
+						const server = window.location.protocol + '//' + window.location.host + OC.getRootPath();
+						this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}`;
+
+						this.$nextTick(() => {
+							this.$refs.appPassword.select();
+						});
+					})
+					.catch(err => {
+						console.error('could not create a new app password', err);
+						OC.Notification.showTemporary(t('core', 'Error while creating device token'));
+
+						this.reset();
+					});
+			},
+			onCopyPassword() {
+				this.passwordCopied = true;
+				this.$refs.clipboardButton.blur();
+				setTimeout(() => this.passwordCopied = false, 3000);
+			},
+			onCopyPasswordFailed() {
+				OC.Notification.showTemporary(t('core', 'Could not copy app password. Please copy it manually.'));
+			},
+			reset () {
+				this.adding = false;
+				this.loading = false;
+				this.showQR = false;
+				this.qrUrl = '';
+				this.deviceName = '';
+				this.appPassword = '';
+				this.loginName = '';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.app-password-row {
+		display: table-row;
+
+		.icon {
+			background-size: 16px 16px;
+			display: inline-block;
+			position: relative;
+			top: 3px;
+			margin-left: 5px;
+			margin-right: 8px;
+		}
+
+	}
+
+	.app-password-label {
+		display: table-cell;
+		padding-right: 1em;
+		text-align: right;
+		vertical-align: middle;
+	}
+
+	.monospaced {
+		width: 245px;
+		font-family: monospace;
+	}
+</style>