2022-03-17 05:02:44 +09:00
|
|
|
import useVuelidate from '@vuelidate/core'
|
|
|
|
import { required, requiredIf, sameAs } from '@vuelidate/validators'
|
2018-12-05 18:43:01 +09:00
|
|
|
import { mapActions, mapState } from 'vuex'
|
2022-05-23 01:40:59 +09:00
|
|
|
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
|
|
|
|
import localeService from '../../services/locale/locale.service.js'
|
2023-01-23 01:15:52 +09:00
|
|
|
import { DAY } from 'src/services/date_utils/date_utils.js'
|
2018-11-07 05:48:05 +09:00
|
|
|
|
2017-04-16 01:12:23 +09:00
|
|
|
const registration = {
|
2022-03-17 05:02:44 +09:00
|
|
|
setup () { return { v$: useVuelidate() } },
|
2017-04-16 01:12:23 +09:00
|
|
|
data: () => ({
|
2018-12-05 18:43:01 +09:00
|
|
|
user: {
|
|
|
|
email: '',
|
2018-12-06 00:42:33 +09:00
|
|
|
fullname: '',
|
2018-12-05 18:43:01 +09:00
|
|
|
username: '',
|
|
|
|
password: '',
|
2021-02-15 18:10:09 +09:00
|
|
|
confirm: '',
|
2023-01-23 01:15:52 +09:00
|
|
|
birthday: '',
|
2022-05-23 01:40:59 +09:00
|
|
|
reason: '',
|
|
|
|
language: ''
|
2018-12-15 09:05:47 +09:00
|
|
|
},
|
|
|
|
captcha: {}
|
2017-04-16 01:12:23 +09:00
|
|
|
}),
|
2022-05-23 01:40:59 +09:00
|
|
|
components: {
|
|
|
|
InterfaceLanguageSwitcher
|
|
|
|
},
|
2020-05-04 18:56:39 +09:00
|
|
|
validations () {
|
|
|
|
return {
|
|
|
|
user: {
|
|
|
|
email: { required: requiredIf(() => this.accountActivationRequired) },
|
|
|
|
username: { required },
|
|
|
|
fullname: { required },
|
|
|
|
password: { required },
|
|
|
|
confirm: {
|
|
|
|
required,
|
2022-03-29 22:08:57 +09:00
|
|
|
sameAs: sameAs(this.user.password)
|
2021-02-15 18:10:09 +09:00
|
|
|
},
|
2023-01-23 01:15:52 +09:00
|
|
|
birthday: {
|
|
|
|
required: requiredIf(() => this.birthdayRequired),
|
|
|
|
maxValue: value => {
|
|
|
|
return !this.birthdayRequired || new Date(value).getTime() <= this.birthdayMin.getTime()
|
|
|
|
}
|
|
|
|
},
|
2022-05-23 01:40:59 +09:00
|
|
|
reason: { required: requiredIf(() => this.accountApprovalRequired) },
|
|
|
|
language: {}
|
2018-12-06 00:17:29 +09:00
|
|
|
}
|
2018-12-05 18:43:01 +09:00
|
|
|
}
|
|
|
|
},
|
2017-06-20 16:37:51 +09:00
|
|
|
created () {
|
2018-12-06 00:17:29 +09:00
|
|
|
if ((!this.registrationOpen && !this.token) || this.signedIn) {
|
2019-07-05 16:02:14 +09:00
|
|
|
this.$router.push({ name: 'root' })
|
2017-06-20 16:37:51 +09:00
|
|
|
}
|
2018-12-15 09:05:47 +09:00
|
|
|
|
2018-12-17 04:47:52 +09:00
|
|
|
this.setCaptcha()
|
2017-06-20 16:37:51 +09:00
|
|
|
},
|
2017-06-19 22:35:35 +09:00
|
|
|
computed: {
|
2018-12-05 18:43:01 +09:00
|
|
|
token () { return this.$route.params.token },
|
2019-03-18 23:35:13 +09:00
|
|
|
bioPlaceholder () {
|
2021-02-15 18:10:09 +09:00
|
|
|
return this.replaceNewlines(this.$t('registration.bio_placeholder'))
|
|
|
|
},
|
|
|
|
reasonPlaceholder () {
|
|
|
|
return this.replaceNewlines(this.$t('registration.reason_placeholder'))
|
2019-03-18 23:35:13 +09:00
|
|
|
},
|
2023-01-23 01:15:52 +09:00
|
|
|
birthdayMin () {
|
|
|
|
const minAge = this.birthdayMinAge
|
|
|
|
const today = new Date()
|
|
|
|
today.setUTCMilliseconds(0)
|
|
|
|
today.setUTCSeconds(0)
|
|
|
|
today.setUTCMinutes(0)
|
|
|
|
today.setUTCHours(0)
|
|
|
|
const minDate = new Date()
|
|
|
|
minDate.setTime(today.getTime() - minAge * DAY)
|
|
|
|
return minDate
|
|
|
|
},
|
2023-01-23 01:22:24 +09:00
|
|
|
birthdayMinAttr () {
|
|
|
|
return this.birthdayMin.toJSON().replace(/T.+$/, '')
|
|
|
|
},
|
2023-01-23 01:15:52 +09:00
|
|
|
birthdayMinFormatted () {
|
|
|
|
const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
|
|
|
|
return this.user.birthday && new Date(Date.parse(this.birthdayMin)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
|
|
|
|
},
|
2018-12-05 18:43:01 +09:00
|
|
|
...mapState({
|
2018-12-06 00:17:29 +09:00
|
|
|
registrationOpen: (state) => state.instance.registrationOpen,
|
|
|
|
signedIn: (state) => !!state.users.currentUser,
|
2018-12-06 04:07:58 +09:00
|
|
|
isPending: (state) => state.users.signUpPending,
|
|
|
|
serverValidationErrors: (state) => state.users.signUpErrors,
|
2020-05-04 18:56:39 +09:00
|
|
|
termsOfService: (state) => state.instance.tos,
|
2021-02-15 18:10:09 +09:00
|
|
|
accountActivationRequired: (state) => state.instance.accountActivationRequired,
|
2023-01-23 01:15:52 +09:00
|
|
|
accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
|
|
|
|
birthdayRequired: (state) => state.instance.birthdayRequired,
|
|
|
|
birthdayMinAge: (state) => state.instance.birthdayMinAge
|
2018-12-05 18:43:01 +09:00
|
|
|
})
|
2017-06-19 22:35:35 +09:00
|
|
|
},
|
2017-04-16 01:12:23 +09:00
|
|
|
methods: {
|
2018-12-17 02:53:41 +09:00
|
|
|
...mapActions(['signUp', 'getCaptcha']),
|
2018-12-06 00:17:29 +09:00
|
|
|
async submit () {
|
2017-04-16 01:12:23 +09:00
|
|
|
this.user.nickname = this.user.username
|
2018-08-05 16:01:38 +09:00
|
|
|
this.user.token = this.token
|
2018-12-21 06:25:09 +09:00
|
|
|
|
2018-12-17 02:55:09 +09:00
|
|
|
this.user.captcha_solution = this.captcha.solution
|
|
|
|
this.user.captcha_token = this.captcha.token
|
2018-12-21 06:25:09 +09:00
|
|
|
this.user.captcha_answer_data = this.captcha.answer_data
|
2022-05-23 01:40:59 +09:00
|
|
|
if (this.user.language) {
|
|
|
|
this.user.language = localeService.internalToBackendLocale(this.user.language)
|
|
|
|
}
|
2018-12-05 18:43:01 +09:00
|
|
|
|
2022-03-29 22:08:57 +09:00
|
|
|
this.v$.$touch()
|
2018-12-05 18:43:01 +09:00
|
|
|
|
2022-03-29 22:08:57 +09:00
|
|
|
if (!this.v$.$invalid) {
|
2018-12-06 00:17:29 +09:00
|
|
|
try {
|
|
|
|
await this.signUp(this.user)
|
2019-07-05 16:02:14 +09:00
|
|
|
this.$router.push({ name: 'friends' })
|
2018-12-06 00:17:29 +09:00
|
|
|
} catch (error) {
|
2020-01-14 22:45:00 +09:00
|
|
|
console.warn('Registration failed: ', error)
|
|
|
|
this.setCaptcha()
|
2018-12-06 00:17:29 +09:00
|
|
|
}
|
2018-12-05 18:43:01 +09:00
|
|
|
}
|
2018-12-17 04:47:52 +09:00
|
|
|
},
|
2018-12-17 04:55:11 +09:00
|
|
|
setCaptcha () {
|
2018-12-17 04:47:52 +09:00
|
|
|
this.getCaptcha().then(cpt => { this.captcha = cpt })
|
2021-02-15 18:10:09 +09:00
|
|
|
},
|
|
|
|
replaceNewlines (str) {
|
|
|
|
return str.replace(/\s*\n\s*/g, ' \n')
|
2017-04-16 01:12:23 +09:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default registration
|