1 files changed, 35 insertions, 18 deletions
diff --git a/apps/settings/src/components/PersonalInfo/FediverseSection.vue b/apps/settings/src/components/PersonalInfo/FediverseSection.vue
index 9ba9c37ab80..043fa6e64b9 100644
--- a/apps/settings/src/components/PersonalInfo/FediverseSection.vue
+++ b/apps/settings/src/components/PersonalInfo/FediverseSection.vue
@@ -4,30 +4,47 @@
 -->
 
 <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>