feat: UserInfo and User to handle user names in the frontend

Author: peterpeterparker

studio/src/app/models/user.tsx

@@ -1,5 +1,13 @@
-export interface User {
-    id?: string;
+// The user information we use to authenticate the user with our backend
+export interface UserInfo {
     anonymous: boolean;
     firebase_uid: string;
+    email: string;
+}
+
+// The representation of the user saved in our database
+export interface User {
+    id: string;
+    anonymous: boolean;
+    username?: string;
 }

studio/src/app/pages/core/app-signin/app-signin.tsx

@@ -8,7 +8,7 @@ import {filter, take} from 'rxjs/operators';
 
 import {del, get, set} from 'idb-keyval';
 
-import {User} from '../../../models/user';
+import {User, UserInfo} from '../../../models/user';
 import {AuthUser} from '../../../models/auth-user';
 import {Deck} from '../../../models/deck';
 
@@ -181,7 +181,8 @@ export class AppSignIn {
 
                         this.authService.watch().pipe(take(1)).subscribe(async (authUser: AuthUser) => {
                             if (authUser) {
-                                await this.userService.query(user, authUser.token, 'PUT');
+                                const apiUser: UserInfo = await this.userService.createUserInfo(authUser);
+                                await this.userService.query(apiUser, authUser.token, 'PUT');
                             }
 
                             await this.navigateRedirect();

studio/src/app/services/api/user/user.service.tsx

@@ -3,7 +3,7 @@ import {Observable, ReplaySubject} from 'rxjs';
 import {get, del, set} from 'idb-keyval';
 
 import {AuthUser} from '../../../models/auth-user';
-import {User} from '../../../models/user';
+import {User, UserInfo} from '../../../models/user';
 
 import {EnvironmentConfigService} from '../../core/environment/environment-config.service';
 
@@ -36,10 +36,7 @@ export class UserService {
             } else {
                 const savedApiUserId: string = await get('deckdeckgo_user_id');
                 if (!savedApiUserId) {
-                    const apiUser: User = {
-                        anonymous: authUser.anonymous,
-                        firebase_uid: authUser.uid
-                    };
+                    const apiUser: UserInfo = await this.createUserInfo(authUser);
 
                     try {
                         await this.query(apiUser, authUser.token, 'POST');
@@ -71,7 +68,7 @@ export class UserService {
         });
     }
 
-    query(apiUser: User, token: string, method: string): Promise<User> {
+    query(apiUserInfo: UserInfo, token: string, method: string): Promise<User> {
         return new Promise<User>(async (resolve, reject) => {
             try {
                 const apiUrl: string = EnvironmentConfigService.getInstance().get('apiUrl');
@@ -83,7 +80,7 @@ export class UserService {
                         'Content-Type': 'application/json',
                         'Authorization': `Bearer ${token}`
                     },
-                    body: JSON.stringify(apiUser)
+                    body: JSON.stringify(apiUserInfo)
                 });
 
                 if (!rawResponse || (!rawResponse.ok && rawResponse.status !== 409)) {
@@ -163,4 +160,21 @@ export class UserService {
         return this.apiUserSubject.asObservable();
     }
 
+    createUserInfo(authUser: AuthUser): Promise<UserInfo> {
+        return new Promise<UserInfo>((resolve) => {
+            if (!authUser) {
+                resolve(null);
+                return;
+            }
+
+            const apiUserInfo: UserInfo = {
+                anonymous: authUser.anonymous,
+                firebase_uid: authUser.uid,
+                email: authUser.anonymous ? null : authUser.email
+            };
+
+            resolve(apiUserInfo);
+        });
+    }
+
 }