1 files changed, 37 insertions, 37 deletions
diff --git a/apps/settings/src/components/PersonalInfo/FediverseSection.vue b/apps/settings/src/components/PersonalInfo/FediverseSection.vue
index 3975308d587..043fa6e64b9 100644
--- a/apps/settings/src/components/PersonalInfo/FediverseSection.vue
+++ b/apps/settings/src/components/PersonalInfo/FediverseSection.vue
@@ -1,50 +1,50 @@
 <!--
-	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @license 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/>.
-	-
+  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-	<AccountPropertySection v-bind.sync="fediverse"
+	<AccountPropertySection v-bind.sync="value"
+		:readable="readable"
+		:on-validate="onValidate"
 		:placeholder="t('settings', 'Your handle')" />
 </template>
 
-<script>
+<script setup lang="ts">
+import type { AccountProperties } from '../../constants/AccountPropertyConstants.js'
 import { loadState } from '@nextcloud/initial-state'
-
-import AccountPropertySection from './shared/AccountPropertySection.vue'
-
+import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
 import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
-const { fediverse } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'FediverseSection',
-
-	components: {
-		AccountPropertySection,
-	},
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-	data() {
-		return {
-			fediverse: { ...fediverse, readable: NAME_READABLE_ENUM[fediverse.name] },
-		}
-	},
+const { fediverse } = loadState<AccountProperties>('settings', 'personalInfoParameters')
+
+const value = ref({ ...fediverse })
+const readable = NAME_READABLE_ENUM[fediverse.name]
+
+/**
+ * Validate a fediverse handle
+ * @param text The potential fediverse handle
+ */
+function onValidate(text: string): boolean {
+	// allow to clear the value
+	if (text === '') {
+		return true
+	}
+
+	// check its in valid format
+	const result = text.match(/^@?([^@/]+)@([^@/]+)$/)
+	if (result === null) {
+		return false
+	}
+
+	// check its a valid URL
+	try {
+		return URL.parse(`https://${result[2]}/`) !== null
+	} catch {
+		return false
+	}
 }
 </script>