Add mastodon personal info field

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

3 files changed, 58 insertions, 0 deletions

diff --git a/apps/settings/src/components/PersonalInfo/MastodonSection.vue b/apps/settings/src/components/PersonalInfo/MastodonSection.vue
new file mode 100644
index 00000000000..e257b8e96c7
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/MastodonSection.vue
@@ -0,0 +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/>.
+	-
+-->
+
+<template>
+	<AccountPropertySection v-bind.sync="mastodon"
+		:placeholder="t('settings', 'Your Mastodon handle')" />
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import AccountPropertySection from './shared/AccountPropertySection.vue'
+
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+
+const { mastodon } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'TwitterSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			mastodon: { ...mastodon, readable: NAME_READABLE_ENUM[mastodon.name] },
+		}
+	},
+}
+</script>
diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.js
index 6be683dcb91..e4ced1b4ee9 100644
--- a/apps/settings/src/constants/AccountPropertyConstants.js
+++ b/apps/settings/src/constants/AccountPropertyConstants.js
@@ -36,6 +36,7 @@ export const ACCOUNT_PROPERTY_ENUM = Object.freeze({
 	EMAIL: 'email',
 	HEADLINE: 'headline',
 	NOTIFICATION_EMAIL: 'notify_email',
+	MASTODON: 'mastodon',
 	ORGANISATION: 'organisation',
 	PHONE: 'phone',
 	PROFILE_ENABLED: 'profile_enabled',
@@ -58,6 +59,7 @@ export const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({
 	PROFILE_ENABLED: t('settings', 'Profile'),
 	ROLE: t('settings', 'Role'),
 	TWITTER: t('settings', 'Twitter'),
+	MASTODON: t('settings', 'Mastodon'),
 	WEBSITE: t('settings', 'Website'),
 })
 
@@ -74,6 +76,7 @@ export const NAME_READABLE_ENUM = Object.freeze({
 	[ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED,
 	[ACCOUNT_PROPERTY_ENUM.ROLE]: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE,
 	[ACCOUNT_PROPERTY_ENUM.TWITTER]: ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER,
+	[ACCOUNT_PROPERTY_ENUM.MASTODON]: ACCOUNT_PROPERTY_READABLE_ENUM.MASTODON,
 	[ACCOUNT_PROPERTY_ENUM.WEBSITE]: ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE,
 })
 
@@ -96,6 +99,7 @@ export const PROPERTY_READABLE_KEYS_ENUM = Object.freeze({
 	[ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED,
 	[ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: ACCOUNT_PROPERTY_ENUM.ROLE,
 	[ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: ACCOUNT_PROPERTY_ENUM.TWITTER,
+	[ACCOUNT_PROPERTY_READABLE_ENUM.MASTODON]: ACCOUNT_PROPERTY_ENUM.MASTODON,
 	[ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: ACCOUNT_PROPERTY_ENUM.WEBSITE,
 })
 
@@ -137,6 +141,7 @@ export const PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM = Object.freeze({
 	[ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],
 	[ACCOUNT_PROPERTY_READABLE_ENUM.ROLE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],
 	[ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],
+	[ACCOUNT_PROPERTY_READABLE_ENUM.MASTODON]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],
 	[ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE]: [SCOPE_ENUM.LOCAL, SCOPE_ENUM.PRIVATE],
 })
 
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
index f03c86335a0..85292b76696 100644
--- a/apps/settings/src/main-personal-info.js
+++ b/apps/settings/src/main-personal-info.js
@@ -34,6 +34,7 @@ import PhoneSection from './components/PersonalInfo/PhoneSection.vue'
 import LocationSection from './components/PersonalInfo/LocationSection.vue'
 import WebsiteSection from './components/PersonalInfo/WebsiteSection.vue'
 import TwitterSection from './components/PersonalInfo/TwitterSection.vue'
+import MastodonSection from './components/PersonalInfo/MastodonSection.vue'
 import LanguageSection from './components/PersonalInfo/LanguageSection/LanguageSection.vue'
 import LocaleSection from './components/PersonalInfo/LocaleSection/LocaleSection.vue'
 import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection.vue'
@@ -61,6 +62,7 @@ const PhoneView = Vue.extend(PhoneSection)
 const LocationView = Vue.extend(LocationSection)
 const WebsiteView = Vue.extend(WebsiteSection)
 const TwitterView = Vue.extend(TwitterSection)
+const MastodonView = Vue.extend(MastodonSection)
 const LanguageView = Vue.extend(LanguageSection)
 const LocaleView = Vue.extend(LocaleSection)
 
@@ -72,6 +74,7 @@ new PhoneView().$mount('#vue-phone-section')
 new LocationView().$mount('#vue-location-section')
 new WebsiteView().$mount('#vue-website-section')
 new TwitterView().$mount('#vue-twitter-section')
+new MastodonView().$mount('#vue-mastodon-section')
 new LanguageView().$mount('#vue-language-section')
 new LocaleView().$mount('#vue-locale-section')