import { Component, Mixins, Vue } from "vue-property-decorator"; import { Person } from "@/types/actor"; @Component({}) export default class IdentityEditionMixin extends Mixins(Vue) { identity: Person = 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) ); } }