generate username by email/displayName

Author: Resul Avan

src/assets/style.css

@@ -119,15 +119,15 @@ footer {
 
 .is-overlay-bottom-left {
   position: absolute !important;
-  bottom: 5px !important;
-  left: 5px !important;
+  bottom: 10px !important;
+  left: 10px !important;
   z-index: 3 !important;
 }
 
 .is-overlay-bottom-right {
   position: absolute !important;
-  bottom: 5px !important;
-  right: 5px !important;
+  bottom: 10px !important;
+  right: 10px !important;
   z-index: 3 !important;
 }
 

src/components/form/SocialLogin.vue

@@ -68,7 +68,7 @@ export default class SocialLogin extends Vue {
         return this.reauthenticate
           ? await this.reauthenticateWithSocialProvider(this.getSocialLoginCredentials(providerType))
           : await this.signInWithSocialProvider(this.getSocialLoginCredentials(providerType))
-            .then(async () => await reloadUserFromDatabase.next())
+            .then(() => reloadUserFromDatabase.next())
       })
       .finally(() => this.saveLoading(false))
   }

src/components/profile/header/CoverPhoto.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="card-image has-cursor-pointer has-max-height-500 crop-to-fit" @click="showLightbox">
+    <div class="card-image has-cursor-pointer has-max-height-350 crop-to-fit" @click="showLightbox">
       <img
         v-lazy="coverPhoto.src"
         :src="placeholder"

src/components/profile/module/ProfileModule.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="columns is-centered">
       <div class="column is-half">
-        <b-tabs v-model="moduleType" type="is-toggle-rounded" size="is-small" expanded>
+        <b-tabs v-model="moduleType" type="is-toggle-rounded" size="is-small">
           <b-tab-item
             v-for="(moduleConfig, key) in computedModuleConfigs"
             :key="key"

src/pages/register.vue

@@ -42,7 +42,7 @@ export default class register extends Vue {
       .then(async () => {
         await this.clearNotificationMessage()
         await this.signUpWithEmail(credentials)
-          .then(async () => await reloadUserFromDatabase.next())
+          .then(() => reloadUserFromDatabase.next())
       })
       .finally(() => this.saveLoading(false))
   }

src/plugins/firebase-auth-listener.ts

@@ -14,14 +14,9 @@ import {
 } from '~/types'
 import { authenticatedAllowed, authenticatedNotAllowed } from '~/service/global-service'
 import { getAuthUser } from '~/service/firebase/firebase-service'
-import {
-  configureAxiosObservable,
-  configureFcmObservable,
-  loadNotificationObservable,
-  reloadUserFromDatabase
-} from '~/service/rx-service'
+import { configureAxiosObservable, configureFcmObservable, loadNotificationObservable } from '~/service/rx-service'
 
-const logout = (store: Store<any>) => {
+const forceLogout = (store: Store<any>) => {
   store.dispatch(StoreConfig.auth.logout, true).then(() => {
     console.log('the user is forced to logout')
   })
@@ -79,10 +74,10 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
     })
 
   auth.onAuthStateChanged((firebaseUser: User|null) => {
-    return Promise.resolve()
+    return store.dispatch(StoreConfig.loading.saveLoading, true)
       .then(async () => {
         if (store.state.auth.forceLogout) {
-          logout(store)
+          forceLogout(store)
           return
         }
 
@@ -110,23 +105,25 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) =>
           }
         }
       })
+      .finally(() => store.dispatch(StoreConfig.loading.saveLoading, false))
   })
 
   auth.onIdTokenChanged((firebaseUser: User|null) => {
-    console.log('onIdTokenChanged with a user: ', !!firebaseUser)
-    if (!firebaseUser) {
-      return
-    }
-    updateAuthStore(firebaseUser, store)
+    store.dispatch(StoreConfig.loading.saveLoading, true)
       .then(() => {
-        reloadUserFromDatabase.next()
-      })
+        console.log('onIdTokenChanged with a user: ', !!firebaseUser)
+        if (!firebaseUser) {
+          return
+        }
+        updateAuthStore(firebaseUser, store)
 
-    firebaseUser.getIdToken()
-      .then((token: string) => {
-        app.$axios.setToken(token, AppTokenType)
-        app.$cookies.set(AppCookie.TOKEN, token, cookieOptions)
+        firebaseUser.getIdToken()
+          .then((token: string) => {
+            app.$axios.setToken(token, AppTokenType)
+            app.$cookies.set(AppCookie.TOKEN, token, cookieOptions)
+          })
       })
+      .finally(() => store.dispatch(StoreConfig.loading.saveLoading, false))
   })
 }
 

src/service/firebase/firestore/user-collection.ts

@@ -15,13 +15,23 @@ import {
   saveModel
 } from '~/service/firebase/firestore/collection-base-service'
 import { PagingResponse, SearchData } from '~/types'
+import { generateNumericByLength } from '~/service/global-service'
 
-export const saveUser = async (user: User): Promise<User> => {
-  return await saveModel(collection.USER, user)
+export const saveUser = (user: User): Promise<User> => {
+  return saveModel(collection.USER, user)
 }
 
-export const getUser = async (id: string): Promise<User> => {
-  return await getModelById(collection.USER, id)
+export const getUser = (id: string): Promise<User> => {
+  return getModelById(collection.USER, id)
+}
+
+export const getAvailableUsername = (username: string, originalUsername ?: string): Promise<string> => {
+  return getUserByUsername(username).then(async (existingUser) => {
+    if (!existingUser) {
+      return username
+    }
+    return await getAvailableUsername(`${username}${generateNumericByLength(4)}`, originalUsername || username)
+  })
 }
 
 export const getUserByUsername = async (

src/service/global-service.ts

@@ -13,6 +13,10 @@ export const generateUuid = () => {
   return uuidv4().replace(dashAllRegex, '')
 }
 
+export const generateNumericByLength = (length: number) => {
+  return Math.random().toString(9).substr(2, length)
+}
+
 export const log = (...anyMessages: any[]) => {
   console.log(`${moment().format(timestampFormat)} | `, ...anyMessages)
 }
@@ -80,3 +84,8 @@ export const getPageRouteWithQuery = (routeType: RouteType, query: string) => {
     }
   }
 }
+
+export const generateUsername = (username: string) => {
+  const usernamePrefix = username.replace(/@.*$/, '')
+  return slugify(usernamePrefix).replace(dashAllRegex, '')
+}

src/store/auth.ts

@@ -25,9 +25,10 @@ import {
 import { getProviderOption, refreshToken, updateProfile } from '~/service/firebase/firebase-service'
 import { handleError } from '~/service/error-service'
 import { reauthenticateObservable } from '~/service/rx-service'
-import { getUser, saveUser } from '~/service/firebase/firestore'
+import { getAvailableUsername, getUser, saveUser } from '~/service/firebase/firestore'
 import { authClaims } from '~/service/api-service'
 import { deleteUserDeviceByToken } from '~/service/firebase/firestore/user-device-collection'
+import { generateUsername } from '~/service/global-service'
 import UserCredential = firebase.auth.UserCredential
 import ActionCodeInfo = firebase.auth.ActionCodeInfo
 import Persistence = firebase.auth.Auth.Persistence
@@ -92,15 +93,16 @@ export const actions: ActionTree<AuthState, RootState> = {
       .then(async (userCredential: UserCredential) => {
         // save user to db
         const id = userCredential.user?.uid as string
+        const username = await getAvailableUsername(generateUsername(userCredential.user.email))
         await updateProfile(credentials.name, DefaultProfilePhoto.src)
-          .then(async () => await authClaims(this.$axios, id))
+          .then(async () => await authClaims(this.$axios, username))
           .then(() => refreshToken())
 
         await saveUser({
           id,
           name: credentials.name,
           email: credentials.email,
-          username: id,
+          username,
           privacy: PrivacyType.PUBLIC,
           followersPrivacy: PrivacyType.PUBLIC,
           followingPrivacy: PrivacyType.PUBLIC,
@@ -156,15 +158,16 @@ export const actions: ActionTree<AuthState, RootState> = {
                 }
 
                 const name = userCredential.user?.displayName as string
+                const username = await getAvailableUsername(generateUsername(name))
                 const photo = userCredential.user?.photoURL as string
 
-                await authClaims(this.$axios, id)
+                await authClaims(this.$axios, username)
                   .then(() => refreshToken())
 
                 await saveUser({
                   id,
                   name,
-                  username: id,
+                  username,
                   privacy: PrivacyType.PUBLIC,
                   followersPrivacy: PrivacyType.PUBLIC,
                   followingPrivacy: PrivacyType.PUBLIC,

src/types/state-types.ts

@@ -57,6 +57,7 @@ export const StoreConfig = {
     clearNotificationMessage: 'notification/clearNotificationMessage'
   },
   loading: {
-    setLoading: 'loading/setLoading'
+    setLoading: 'loading/setLoading',
+    saveLoading: 'loading/saveLoading'
   }
 }