Port federatedfilesharing personal settings to vue

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

apps/federatedfilesharing/css/settings-admin.css

@@ -1,5 +0,0 @@
-#fileSharingSettings h2 {
-  display: inline-block;
-}
-
-/*# sourceMappingURL=settings-admin.css.map */

apps/federatedfilesharing/css/settings-admin.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["settings-admin.scss"],"names":[],"mappings":"AAAA;EACC","file":"settings-admin.css"}

apps/federatedfilesharing/css/settings-admin.scss

@@ -1,3 +0,0 @@
-#fileSharingSettings h2 {
-	display: inline-block;
-}

apps/federatedfilesharing/css/settings-personal.css

@@ -1,107 +0,0 @@
-@charset "UTF-8";
-/**
- * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
- *
- * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
- *
- * @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/>.
- *
- */
-/**
- * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
- *
- * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
- *
- * @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/>.
- *
- */
-/**
- * @see core/src/icons.js
- */
-/**
- * SVG COLOR API
- *
- * @param string $icon the icon filename
- * @param string $dir the icon folder within /core/img if $core or app name
- * @param string $color the desired color in hexadecimal
- * @param int $version the version of the file
- * @param bool [$core] search icon in core
- *
- * @returns A background image with the url to the set to the requested icon.
- */
-#fileSharingSettings h2 {
-  display: inline-block;
-}
-
-#fileSharingSettings img {
-  cursor: pointer;
-}
-
-#fileSharingSettings xmp {
-  margin-top: 0;
-  white-space: pre-wrap;
-}
-
-#fileSharingSettings .icon {
-  background-size: 16px 16px;
-  display: inline-block;
-  position: relative;
-  top: 3px;
-  margin-left: 5px;
-}
-
-[class^=social-], [class*=" social-"] {
-  background-repeat: no-repeat;
-  background-position: 8px;
-  min-width: 16px;
-  min-height: 16px;
-  padding-left: 28px;
-  background-size: 16px;
-}
-
-.social-diaspora {
-  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
-  background-image: var(--icon-social-diaspora-dark);
-}
-
-.social-twitter {
-  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
-  background-image: var(--icon-social-twitter-dark);
-}
-
-.social-facebook {
-  /* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */
-  background-image: var(--icon-social-facebook-dark);
-}
-
-.social_sharing_buttons {
-  padding-left: 30px !important;
-}
-
-/*# sourceMappingURL=settings-personal.css.map */

apps/federatedfilesharing/css/settings-personal.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","../../../core/css/functions.scss","settings-personal.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AD8BC;EAEA;;;AC7BD;AD2BC;EAEA;;;AC1BD;ADwBC;EAEA;;;ACtBD;EACC","file":"settings-personal.css"}

apps/federatedfilesharing/css/settings-personal.scss

@@ -1,46 +0,0 @@
-@use 'variables';
-@import 'functions';
-
-#fileSharingSettings h2 {
-	display: inline-block;
-}
-
-#fileSharingSettings img {
-	cursor: pointer;
-}
-
-#fileSharingSettings xmp {
-	margin-top: 0;
-	white-space: pre-wrap;
-}
-
-#fileSharingSettings .icon {
-	background-size: 16px 16px;
-	display: inline-block;
-	position: relative;
-	top: 3px;
-	margin-left: 5px;
-}
-
-[class^="social-"], [class*=" social-"] {
-	background-repeat: no-repeat;
-	background-position: 8px;
-	min-width: 16px;
-	min-height: 16px;
-	padding-left: 28px;
-	background-size: 16px;
-}
-
-.social-diaspora {
-	@include icon-color('social-diaspora', 'federatedfilesharing', variables.$color-black);
-}
-.social-twitter {
-    @include icon-color('social-twitter', 'federatedfilesharing', variables.$color-black);
-}
-.social-facebook {
-	@include icon-color('social-facebook', 'federatedfilesharing', variables.$color-black);
-}
-
-.social_sharing_buttons {
-	padding-left: 30px !important;
-}

apps/federatedfilesharing/js/settings-personal.js

@@ -1,68 +0,0 @@
-window.addEventListener('DOMContentLoaded', function() {
-
-	$('#fileSharingSettings button.pop-up').click(function() {
-		var url = $(this).data('url');
-		if (url) {
-			var width = 600;
-			var height = 400;
-			var left = (screen.width/2)-(width/2);
-			var top = (screen.height/2)-(height/2);
-
-			window.open(url, 'name', 'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
-		}
-	});
-
-	$('#oca-files-sharing-add-to-your-website').click(function() {
-		if ($('#oca-files-sharing-add-to-your-website-expanded').is(':visible')) {
-			$('#oca-files-sharing-add-to-your-website-expanded').slideUp();
-		} else {
-			$('#oca-files-sharing-add-to-your-website-expanded').slideDown();
-		}
-	});
-
-	/* Verification icon tooltip */
-	$('#personal-settings-container .verify img').tooltip({placement: 'bottom', trigger: 'hover'});
-
-	$('#fileSharingSettings .clipboardButton').tooltip({placement: 'bottom', title: t('core', 'Copy'), trigger: 'hover'});
-
-	// Clipboard!
-	var clipboard = new Clipboard('.clipboardButton');
-	clipboard.on('success', function(e) {
-		var $input = $(e.trigger);
-		$input.tooltip('hide')
-			.attr('data-original-title', t('core', 'Copied!'))
-			.tooltip('_fixTitle')
-			.tooltip({placement: 'bottom', trigger: 'manual'})
-			.tooltip('show');
-		_.delay(function() {
-			$input.tooltip('hide')
-				.attr('data-original-title', t('core', 'Copy'))
-				.tooltip('_fixTitle');
-		}, 3000);
-	});
-	clipboard.on('error', function (e) {
-		var $input = $(e.trigger);
-		var actionMsg = '';
-		if (/iPhone|iPad/i.test(navigator.userAgent)) {
-			actionMsg = t('core', 'Not supported!');
-		} else if (/Mac/i.test(navigator.userAgent)) {
-			actionMsg = t('core', 'Press ⌘-C to copy.');
-		} else {
-			actionMsg = t('core', 'Press Ctrl-C to copy.');
-		}
-
-		$input.tooltip('hide')
-			.attr('data-original-title', actionMsg)
-			.tooltip('_fixTitle')
-			.tooltip({placement: 'bottom', trigger: 'manual'})
-			.tooltip('show');
-		_.delay(function () {
-			$input.tooltip('hide')
-				.attr('data-original-title', t('core', 'Copy'))
-				.tooltip('_fixTitle');
-		}, 3000);
-	});
-
-
-	$('#fileSharingSettings .hasTooltip').tooltip({placement: 'right'});
-});

apps/federatedfilesharing/lib/Settings/Personal.php

@@ -6,6 +6,7 @@
  * @author Jos Poortvliet <jos@opensuse.org>
  * @author Julius Härtl <jus@bitgrid.net>
  * @author Morris Jobke <hey@morrisjobke.de>
+ * @author Carl Schwan <carl@carlschwan.eu>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -27,31 +28,34 @@ namespace OCA\FederatedFileSharing\Settings;
 
 use OCA\FederatedFileSharing\FederatedShareProvider;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\IL10N;
 use OCP\IUserSession;
+use OCP\IURLGenerator;
 use OCP\Settings\ISettings;
 
 class Personal implements ISettings {
-
-	/** @var FederatedShareProvider */
-	private $federatedShareProvider;
-	/** @var IUserSession */
-	private $userSession;
-	/** @var IL10N */
-	private $l;
-	/** @var \OC_Defaults */
-	private $defaults;
+	private FederatedShareProvider $federatedShareProvider;
+	private IUserSession $userSession;
+	private IL10N $l;
+	private \OC_Defaults $defaults;
+	private IInitialState $initialState;
+	private IURLGenerator $urlGenerator;
 
 	public function __construct(
 		FederatedShareProvider $federatedShareProvider, #
 		IUserSession $userSession,
 		IL10N $l,
-		\OC_Defaults $defaults
+		\OC_Defaults $defaults,
+		IInitialState $initialState,
+		IURLGenerator $urlGenerator
 	) {
 		$this->federatedShareProvider = $federatedShareProvider;
 		$this->userSession = $userSession;
 		$this->l = $l;
 		$this->defaults = $defaults;
+		$this->initialState = $initialState;
+		$this->urlGenerator = $urlGenerator;
 	}
 
 	/**
@@ -71,6 +75,14 @@ class Personal implements ISettings {
 			'color' => $this->defaults->getColorPrimary(),
 			'textColor' => "#ffffff",
 		];
+
+		$this->initialState->provideInitialState('color', $this->defaults->getColorPrimary());
+		$this->initialState->provideInitialState('textColor', '#fffff');
+		$this->initialState->provideInitialState('logoPath', $this->defaults->getLogo());
+		$this->initialState->provideInitialState('reference', $url);
+		$this->initialState->provideInitialState('cloudId', $cloudID);
+		$this->initialState->provideInitialState('docUrlFederated', $this->urlGenerator->linkToDocs('user-sharing-federated'));
+
 		return new TemplateResponse('federatedfilesharing', 'settings-personal', $parameters, '');
 	}
 

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>

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')

apps/federatedfilesharing/templates/settings-personal.php

@@ -1,60 +1,26 @@
 <?php
-/** @var \OCP\IL10N $l */
-/** @var array $_ */
-script('federatedfilesharing', 'settings-personal');
-style('federatedfilesharing', 'settings-personal');
+/*
+ * @copyright 2022 Carl Schwan <carl@carlschwan.eu>
+ *
+ * @author Carl Schwan <carl@carlschwan.eu>
+ *
+ * @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/>.
+*/
+
+\OCP\Util::addScript('federatedfilesharing', 'vue-settings-personal');
 ?>
 
-<div id="fileSharingSettings" class="section">
-	<h2 data-anchor-name="federated-cloud"><?php p($l->t('Federated Cloud')); ?></h2>
-	<a target="_blank" rel="noreferrer noopener" class="icon-info svg"
-	title="<?php p($l->t('Open documentation'));?>"
-	href="<?php p(link_to_docs('user-sharing-federated')); ?>"></a>
-	<p class="settings-hint"><?php p($l->t('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')); ?></p>
-
-	<p>
-		<?php p($l->t('Your Federated Cloud ID:')); ?>
-		<strong id="cloudid"><?php p($_['cloudId']); ?></strong>
-		<a class="clipboardButton icon icon-clippy" data-clipboard-target="#cloudid"></a>
-	</p>
-
-	<br>
-
-	<p>
-		<?php p($l->t('Share it so your friends can share files with you:')); ?><br>
-		<button class="social-facebook pop-up social_sharing_buttons"
-				data-url='https://www.facebook.com/sharer/sharer.php?u=<?php p(urlencode($_['reference'])); ?>'>
-			Facebook
-		</button>
-		<button class="social-twitter pop-up social_sharing_buttons"
-			data-url='https://twitter.com/intent/tweet?text=<?php p(urlencode($_['message_with_URL'])); ?>'>
-			Twitter
-		</button>
-		<button class="social-diaspora pop-up social_sharing_buttons"
-				data-url='https://share.diasporafoundation.org/?title=<?php p($_['message_without_URL']); ?>&url=<?php p(urlencode($_['reference'])); ?>'>
-			Diaspora
-		</button>
-		<button id="oca-files-sharing-add-to-your-website">
-			<?php p($l->t('Add to your website')) ?>
-		</button>
-	</p>
-
-	<div class="hidden" id="oca-files-sharing-add-to-your-website-expanded">
-	<p style="margin: 10px 0">
-		<a target="_blank" rel="noreferrer noopener" href="<?php p($_['reference']); ?>"
-			style="padding:10px;background-color:<?php p($_['color']); ?>;color:<?php p($_['textColor']); ?>;border-radius:3px;padding-left:4px;">
-			<span style="background-image:url(<?php p(\OC::$server->getURLGenerator()->getAbsoluteURL($_['logoPath'])); ?>);width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;"></span>
-			<?php p($l->t('Share with me via Nextcloud')); ?>
-		</a>
-	</p>
-
-	<p>
-		<?php p($l->t('HTML Code:')); ?>
-		<xmp><a target="_blank" rel="noreferrer noopener" href="<?php p($_['reference']); ?>" style="padding:10px;background-color:<?php p($_['color']); ?>;color:<?php p($_['textColor']); ?>;border-radius:3px;padding-left:4px;">
-<span style="background-image:url(<?php p(\OC::$server->getURLGenerator()->getAbsoluteURL($_['logoPath'])); ?>);width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;"></span>
-<?php p($l->t('Share with me via Nextcloud')); ?></a></xmp>
-	</p>
-	</div>
-
-</div>
-
+<div id="vue-personal-federated"></div>

apps/settings/css/settings.css

@@ -515,17 +515,6 @@ table.nostyle td {
   vertical-align: sub;
 }
 
-.social-button {
-  padding-left: 0 !important;
-  margin-left: -10px;
-}
-.social-button a {
-  display: inline-block;
-}
-.social-button img {
-  padding: 10px;
-}
-
 /* USERS */
 .isgroup .groupname {
   width: 85%;

apps/settings/css/settings.scss

@@ -559,18 +559,6 @@ table.nostyle {
 	}
 }
 
-.social-button {
-	padding-left: 0 !important;
-	margin-left: -10px;
-	a {
-		display: inline-block;
-	}
-
-	img {
-		padding: 10px;
-	}
-}
-
 /* USERS */
 
 .isgroup {

webpack.modules.js

@@ -70,6 +70,7 @@ module.exports = {
 	},
 	federatedfilesharing: {
 		'vue-settings-admin': path.join(__dirname, 'apps/federatedfilesharing/src', 'main-admin.js'),
+		'vue-settings-personal': path.join(__dirname, 'apps/federatedfilesharing/src', 'main-personal.js'),
     },
 	settings: {
 		'vue-settings-admin-basic-settings': path.join(__dirname, 'apps/settings/src', 'main-admin-basic-settings.js'),