Remake phone number property saving with Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

2 files changed, 62 insertions, 0 deletions

diff --git a/apps/settings/src/components/PersonalInfo/PhoneSection.vue b/apps/settings/src/components/PersonalInfo/PhoneSection.vue
new file mode 100644
index 00000000000..45641cd8e14
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/PhoneSection.vue
@@ -0,0 +1,59 @@
+<!--
+	- @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="phone"
+		:placeholder="t('settings', 'Your phone number')"
+		type="tel"
+		:on-validate="onValidate" />
+</template>
+
+<script>
+import { isValidPhoneNumber } from 'libphonenumber-js'
+import { loadState } from '@nextcloud/initial-state'
+
+import AccountPropertySection from './shared/AccountPropertySection.vue'
+
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+
+const { phone } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'PhoneSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			phone: { ...phone, readable: NAME_READABLE_ENUM[phone.name] },
+		}
+	},
+
+	methods: {
+		onValidate(value) {
+			return isValidPhoneNumber(value)
+		},
+	},
+}
+</script>
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
index 1b6d56a262a..32d8bfc8b45 100644
--- a/apps/settings/src/main-personal-info.js
+++ b/apps/settings/src/main-personal-info.js
@@ -28,6 +28,7 @@ import '@nextcloud/dialogs/styles/toast.scss'
 
 import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue'
 import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue'
+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'
@@ -51,6 +52,7 @@ Vue.mixin({
 
 const DisplayNameView = Vue.extend(DisplayNameSection)
 const EmailView = Vue.extend(EmailSection)
+const PhoneView = Vue.extend(PhoneSection)
 const LocationView = Vue.extend(LocationSection)
 const WebsiteView = Vue.extend(WebsiteSection)
 const TwitterView = Vue.extend(TwitterSection)
@@ -58,6 +60,7 @@ const LanguageView = Vue.extend(LanguageSection)
 
 new DisplayNameView().$mount('#vue-displayname-section')
 new EmailView().$mount('#vue-email-section')
+new PhoneView().$mount('#vue-phone-section')
 new LocationView().$mount('#vue-location-section')
 new WebsiteView().$mount('#vue-website-section')
 new TwitterView().$mount('#vue-twitter-section')