Port federatedfilesharing personal settings to vue

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

2 files changed, 236 insertions, 0 deletions

diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
new file mode 100644
index 00000000000..ffa2136a365
--- /dev/null
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -0,0 +1,200 @@
+<!--
+SPDX-FileLicenseText: 2022 Carl Schwan <carl@carlschwan.eu>
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+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>
+	<SettingsSection :title="t('federatedfilesharing', 'Federated Cloud')"
+		:description="t('federatedfilesharing', 'You can share with anyone who uses a Nextcloud server or other Open Cloud Mesh (OCM) compatible servers and services! Just put their Federated Cloud ID in the share dialog. It looks like person@cloud.example.com')"
+		:doc-url="docUrlFederated">
+		<p class="cloud-id-text">
+			{{ t('federatedfilesharing', 'Your Federated Cloud ID:') }}
+			<strong id="cloudid">{{ cloudId }}</strong>
+			<Button ref="clipboard"
+				v-tooltip="copyLinkTooltip"
+				class="clipboard"
+				type="tertiary-no-background"
+				@click.prevent="copyCloudId">
+				<template #icon>
+					<Clipboard :size="20" />
+				</template>
+			</Button>
+		</p>
+
+		<p class="social-button">
+			{{ t('federatedfilesharing', 'Share it so your friends can share files with you:') }}<br>
+			<Button @click="goTo(shareFacebookUrl)">
+				{{ t('federatedfilesharing', 'Facebook') }}
+				<template #icon>
+					<Facebook :size="20" />
+				</template>
+			</Button>
+			<Button @click="goTo(shareTwitterUrl)">
+				{{ t('federatedfilesharing', 'Twitter') }}
+				<template #icon>
+					<Twitter :size="20" />
+				</template>
+			</Button>
+			<Button @click="goTo(shareDiasporaUrl)">
+				{{ t('federatedfilesharing', 'Diaspora') }}
+				<template #icon>
+					<svg width="20"
+						height="20"
+						viewBox="-10 -5 1034 1034"
+						xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M502 197q-96 0-96.5 1.5t-1.5 137-1.5 138-2 2.5T266 432.5 132.5 390t-30 94T74 578l232 77q21 8 21 10t-79.5 117.5T168 899t79.5 56.5T328 1011t81-110 82-110 41 55l83 115q43 60 44 60t79.5-58 79-59-76-112.5-76-113.5T795 632.5t129.5-44-28-94T867 400t-128 42-128.5 43-2.5-7.5-1-38.5l-3-108q-4-133-5-133.5t-97-.5z" /></svg>
+				</template>
+			</Button>
+			<Button @click="showHtml = !showHtml">
+				<template #icon>
+					<Web :size="20" />
+				</template>
+				{{ t('federatedfilesharing', 'Add to your website') }}
+			</Button>
+		</p>
+
+		<template v-if="showHtml">
+			<p style="margin: 10px 0">
+				<a target="_blank"
+					rel="noreferrer noopener"
+					:href="reference"
+					:style="backgroundStyle">
+					<span :style="linkStyle" />
+					{{ t('federatedfilesharing', 'Share with me via Nextcloud') }}
+				</a>
+			</p>
+
+			<p>
+				{{ t('federatedfilesharing', 'HTML Code:') }}
+				<br>
+				<pre>{{ htmlCode }}</pre>
+			</p>
+		</template>
+	</SettingsSection>
+</template>
+
+<script>
+import { showError } from '@nextcloud/dialogs'
+import { loadState } from '@nextcloud/initial-state'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import Twitter from 'vue-material-design-icons/Twitter'
+import Facebook from 'vue-material-design-icons/Facebook'
+import Web from 'vue-material-design-icons/Web'
+import Clipboard from 'vue-material-design-icons/Clipboard'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+
+export default {
+	name: 'PersonalSettings',
+	components: {
+		Button,
+		SettingsSection,
+		Twitter,
+		Facebook,
+		Web,
+		Clipboard,
+	},
+	directives: {
+		Tooltip,
+	},
+	data() {
+		return {
+			color: loadState('federatedfilesharing', 'color'),
+			textColor: loadState('federatedfilesharing', 'textColor'),
+			logoPath: loadState('federatedfilesharing', 'logoPath'),
+			reference: loadState('federatedfilesharing', 'reference'),
+			cloudId: loadState('federatedfilesharing', 'cloudId'),
+			docUrlFederated: loadState('federatedfilesharing', 'docUrlFederated'),
+			showHtml: false,
+			isCopied: false,
+		}
+	},
+	computed: {
+		messageWithURL() {
+			return t('federatedfilesharing', 'Share with me through my #Nextcloud Federated Cloud ID, see {url}', { url: this.reference })
+		},
+		messageWithoutURL() {
+			return t('federatedfilesharing', 'Share with me through my #Nextcloud Federated Cloud ID')
+		},
+		shareDiasporaUrl() {
+			return `https://share.diasporafoundation.org/?title=${encodeURIComponent(this.messageWithoutURL)}&url=${encodeURIComponent(this.reference)}`
+		},
+		shareTwitterUrl() {
+			return `https://twitter.com/intent/tweet?text=${encodeURIComponent(this.messageWithURL)}`
+		},
+		shareFacebookUrl() {
+			return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.reference)}`
+		},
+		logoPathAbsolute() {
+			return window.location.protocol + '//' + window.location.host + this.logoPath
+		},
+		backgroundStyle() {
+			return `padding:10px;background-color:${this.color};color:${this.textColor};border-radius:3px;padding-left:4px;`
+		},
+		linkStyle() {
+			return `background-image:url(${this.logoPathAbsolute});width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;`
+		},
+		htmlCode() {
+			return `<a target="_blank" rel="noreferrer noopener" href="${this.reference}" style="${this.backgroundStyle}">
+	<span style="${this.linkStyle}"></span>
+	${t('federatedfilesharing', 'Share with me via Nextcloud')}
+</a>`
+		},
+		copyLinkTooltip() {
+			return this.isCopied ? t('federatedfilesharing', 'CloudId copied to the clipboard') : t('federatedfilesharing', 'Copy to clipboard')
+		},
+	},
+	methods: {
+		async copyCloudId() {
+			if (!navigator.clipboard) {
+				// Clipboard API not available
+				showError(t('federatedfilesharing', 'Clipboard is not available'))
+				return
+			}
+			await navigator.clipboard.writeText(this.cloudId)
+			this.isCopied = true
+			this.$refs.clipboard.$el.focus()
+		},
+		goTo(url) {
+			window.location.href = url
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.social-button {
+		margin-top: 0.5rem;
+		button {
+			display: inline-flex;
+			margin-left: 0.5rem;
+			margin-top: 1rem;
+		}
+	}
+	.cloud-id-text {
+		display: flex;
+		align-items: center;
+		button {
+			display: inline-flex;
+		}
+	}
+	pre {
+		margin-top: 0;
+		white-space: pre-wrap;
+	}
+	#cloudid {
+		margin-left: 0.25rem;
+	}
+</style>
diff --git a/apps/federatedfilesharing/src/main-personal.js b/apps/federatedfilesharing/src/main-personal.js
new file mode 100644
index 00000000000..d58ebe12d2d
--- /dev/null
+++ b/apps/federatedfilesharing/src/main-personal.js
@@ -0,0 +1,36 @@
+/**
+ * SPDX-FileLicenseText: 2022 Carl Schwan <carl@carlschwan.eu>
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * 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/>.
+ *
+ */
+
+import Vue from 'vue'
+import { getRequestToken } from '@nextcloud/auth'
+import { translate as t } from '@nextcloud/l10n'
+import '@nextcloud/dialogs/styles/toast.scss'
+
+import PersonalSettings from './components/PersonalSettings'
+
+__webpack_nonce__ = btoa(getRequestToken())
+
+Vue.mixin({
+	methods: {
+		t,
+	},
+})
+
+const PersonalSettingsView = Vue.extend(PersonalSettings)
+new PersonalSettingsView().$mount('#vue-personal-federated')