diff --git a/js/src/mixins/identityEdition.ts b/js/src/mixins/identityEdition.ts new file mode 100644 index 00000000..d4f54f86 --- /dev/null +++ b/js/src/mixins/identityEdition.ts @@ -0,0 +1,35 @@ +import { Component, Mixins, Vue } from 'vue-property-decorator'; +import { Person } from '@/types/actor'; + +@Component +export default class IdentityEditionMixin extends Mixins(Vue) { + + identity = new Person(); + oldDisplayName: string | null = null; + + autoUpdateUsername(newDisplayName: string | null) { + const oldUsername = IdentityEditionMixin.convertToUsername(this.oldDisplayName); + + if (this.identity.preferredUsername === oldUsername) { + this.identity.preferredUsername = IdentityEditionMixin.convertToUsername(newDisplayName); + } + + this.oldDisplayName = newDisplayName; + } + + private static convertToUsername(value: string | null) { + if (!value) return ''; + + // https://stackoverflow.com/a/37511463 + return value.toLocaleLowerCase() + .normalize('NFD') + .replace(/[\u0300-\u036f]/g, '') + .replace(/ /g, '_') + .replace(/[^a-z0-9_]/g, '') + ; + } + + validateUsername() { + return this.identity.preferredUsername === IdentityEditionMixin.convertToUsername(this.identity.preferredUsername); + } +} diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue index d4b23a77..468d9c26 100644 --- a/js/src/views/Account/Register.vue +++ b/js/src/views/Account/Register.vue @@ -9,6 +9,10 @@ {{ $t('To achieve your registration, please create a first identity profile.')}}