1 files changed, 18 insertions, 17 deletions
diff --git a/apps/settings/src/components/PersonalInfo/TwitterSection.vue b/apps/settings/src/components/PersonalInfo/TwitterSection.vue
index bb809c8d2b7..43d08f81e3f 100644
--- a/apps/settings/src/components/PersonalInfo/TwitterSection.vue
+++ b/apps/settings/src/components/PersonalInfo/TwitterSection.vue
@@ -4,30 +4,31 @@
 -->
 
 <template>
-	<AccountPropertySection v-bind.sync="twitter"
+	<AccountPropertySection v-bind.sync="value"
+		:readable="readable"
+		:on-validate="onValidate"
 		:placeholder="t('settings', 'Your X (formerly Twitter) handle')" />
 </template>
 
-<script>
-import { loadState } from '@nextcloud/initial-state'
+<script setup lang="ts">
+import type { AccountProperties } from '../../constants/AccountPropertyConstants.js'
 
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.ts'
 import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
-
-const { twitter } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'TwitterSection',
+const { twitter } = loadState<AccountProperties>('settings', 'personalInfoParameters')
 
-	components: {
-		AccountPropertySection,
-	},
+const value = ref({ ...twitter })
+const readable = NAME_READABLE_ENUM[twitter.name]
 
-	data() {
-		return {
-			twitter: { ...twitter, readable: NAME_READABLE_ENUM[twitter.name] },
-		}
-	},
+/**
+ * Validate that the text might be a twitter handle
+ * @param text The potential twitter handle
+ */
+function onValidate(text: string): boolean {
+	return text === '' || text.match(/^@?([a-zA-Z0-9_]{2,15})$/) !== null
 }
 </script>