<!--
  - @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>
