Required User Name on Sign-Up Page (#224)

* Add required user name input on sign-up page. #209 * Rename userName to username and UserName to Username.
numbersprotocol · Nov 18, 2020 · f563786 · f563786
1 parent 317b497
commit f563786
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 21 deletions.
diff --git a/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.ts b/src/app/pages/home/asset/sending-post-capture/sending-post-capture.page.ts
@@ -38,7 +38,7 @@ export class SendingPostCapturePage {
     map(params => params.get('contact')),
     isNonNullable()
   );
-  readonly userName$ = this.contact$.pipe(
+  readonly username$ = this.contact$.pipe(
     map(contact => contact.substring(0, contact.lastIndexOf('@')))
   );
   previewCaption = '';

diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html
@@ -4,7 +4,7 @@
       <button (click)="sidenav.toggle()" mat-icon-button>
         <mat-icon>arrow_back</mat-icon>
       </button>
-      <span>{{ userName$ | async }}</span>
+      <span>{{ username$ | async }}</span>
     </mat-toolbar>
 
     <mat-nav-list>

diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts
@@ -28,7 +28,7 @@ export class HomePage {
   postCaptures$ = this.getPostCaptures();
   readonly capturesWithRawByDate$ = this.captures$.pipe(this.appendAssetsRawAndGroupedByDate$());
 
-  readonly userName$ = this.numbersStorageApi.getUserName$();
+  readonly username$ = this.numbersStorageApi.getUsername$();
   captureButtonShow = true;
 
   constructor(

diff --git a/src/app/pages/profile/profile.page.html b/src/app/pages/profile/profile.page.html
@@ -11,8 +11,8 @@
   <mat-list>
     <mat-list-item>
       <mat-icon mat-list-icon>account_circle</mat-icon>
-      <div mat-line>{{ t('userName') }}</div>
-      <div mat-line>{{ userName$ | async }}</div>
+      <div mat-line>{{ t('username') }}</div>
+      <div mat-line>{{ username$ | async }}</div>
     </mat-list-item>
     <mat-list-item>
       <mat-icon mat-list-icon>email</mat-icon>

diff --git a/src/app/pages/profile/profile.page.ts b/src/app/pages/profile/profile.page.ts
@@ -23,7 +23,7 @@ const { Clipboard } = Plugins;
 })
 export class ProfilePage {
 
-  readonly userName$ = this.numbersStorageApi.getUserName$();
+  readonly username$ = this.numbersStorageApi.getUsername$();
   readonly email$ = this.numbersStorageApi.getEmail$();
   readonly publicKey$ = WebCryptoApiProvider.getPublicKey$();
   readonly privateKey$ = WebCryptoApiProvider.getPrivateKey$();

diff --git a/src/app/pages/signup/signup.page.ts b/src/app/pages/signup/signup.page.ts
@@ -20,7 +20,7 @@ import { EMAIL_REGEXP } from 'src/app/utils/validation';
 export class SignupPage {
 
   form = new FormGroup({});
-  model: SignupFormModel = { email: '', password: '', confirmPassword: '' };
+  model: SignupFormModel = { email: '', username: '', password: '', confirmPassword: '' };
   fields: FormlyFieldConfig[] = [];
 
   constructor(
@@ -32,17 +32,23 @@ export class SignupPage {
   ) {
     combineLatest([
       this.translocoService.selectTranslate('email'),
+      this.translocoService.selectTranslate('username'),
       this.translocoService.selectTranslate('password'),
       this.translocoService.selectTranslate('confirmPassword'),
     ]).pipe(
-      tap(([emailTranslation, passwordTranslation, confirmPasswordTranslation]) => this.createFormFields(
-        emailTranslation, passwordTranslation, confirmPasswordTranslation
+      tap(([emailTranslation, usernameTranlation, passwordTranslation, confirmPasswordTranslation]) => this.createFormFields(
+        emailTranslation, usernameTranlation, passwordTranslation, confirmPasswordTranslation
       )),
       untilDestroyed(this)
     ).subscribe();
   }
 
-  private createFormFields(emailTranslation: string, passwordTranslation: string, confirmPasswordTranslation: string) {
+  private createFormFields(
+    emailTranslation: string,
+    usernameTranlation: string,
+    passwordTranslation: string,
+    confirmPasswordTranslation: string
+  ) {
     this.fields = [{
       validators: {
         fieldMatch: {
@@ -71,6 +77,15 @@ export class SignupPage {
             pattern: () => this.translocoService.translate('message.pleaseEnterValidEmail')
           }
         }
+      }, {
+        key: 'username',
+        type: 'input',
+        templateOptions: {
+          type: 'text',
+          placeholder: usernameTranlation,
+          required: true,
+          hideRequiredMarker: true
+        }
       }, {
         key: 'password',
         type: 'input',
@@ -105,8 +120,7 @@ export class SignupPage {
   }
 
   onSubmit() {
-    const defaultUsername = this.model.email.substring(0, this.model.email.lastIndexOf('@'));
-    const action$ = this.numbersStorageApi.createUser$(defaultUsername, this.model.email, this.model.password);
+    const action$ = this.numbersStorageApi.createUser$(this.model.username, this.model.email, this.model.password);
 
     this.blockingActionService.run$(action$).pipe(
       untilDestroyed(this),
@@ -127,6 +141,7 @@ export class SignupPage {
 
 interface SignupFormModel {
   email: string;
+  username: string;
   password: string;
   confirmPassword: string;
 }
diff --git a/src/app/services/publisher/numbers-storage/numbers-storage-api.service.ts b/src/app/services/publisher/numbers-storage/numbers-storage-api.service.ts
@@ -19,7 +19,7 @@ const preference = PreferenceManager.NUMBERS_STORAGE_PUBLISHER_PREF;
 const enum PrefKeys {
   Enabled = 'enabled',
   AuthToken = 'authToken',
-  UserName = 'userName',
+  Username = 'username',
   Email = 'email'
 }
 
@@ -37,21 +37,21 @@ export class NumbersStorageApi {
     return preference.getBoolean$(PrefKeys.Enabled);
   }
 
-  getUserName$() {
-    return preference.getString$(PrefKeys.UserName);
+  getUsername$() {
+    return preference.getString$(PrefKeys.Username);
   }
 
   getEmail$() {
     return preference.getString$(PrefKeys.Email);
   }
 
   createUser$(
-    userName: string,
+    username: string,
     email: string,
     password: string
   ) {
     const formData = new FormData();
-    formData.append('username', userName);
+    formData.append('username', username);
     formData.append('email', email);
     formData.append('password', password);
     return this.httpClient.post<UserResponse>(`${baseUrl}/auth/users/`, formData);
@@ -69,7 +69,7 @@ export class NumbersStorageApi {
       concatMap(authToken => preference.setString$(PrefKeys.AuthToken, `token ${authToken}`)),
       concatMapTo(this.getUserInformation$()),
       concatMap(user => zip(
-        preference.setString$(PrefKeys.UserName, user.username),
+        preference.setString$(PrefKeys.Username, user.username),
         preference.setString$(PrefKeys.Email, user.email)
       )),
       concatMapTo(preference.setBoolean$(PrefKeys.Enabled, true))
@@ -87,7 +87,7 @@ export class NumbersStorageApi {
       concatMapTo(this.getHttpHeadersWithAuthToken$()),
       concatMap(headers => this.httpClient.post(`${baseUrl}/auth/token/logout/`, {}, { headers })),
       concatMapTo(zip(
-        preference.setString$(PrefKeys.UserName, 'has-logged-out'),
+        preference.setString$(PrefKeys.Username, 'has-logged-out'),
         preference.setString$(PrefKeys.Email, 'has-logged-out'),
         preference.setString$(PrefKeys.AuthToken, '')
       ))

diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json
@@ -34,7 +34,7 @@
   "collectDeviceInfo": "Collect Device Info",
   "collectLocationInfo": "Collect Location Info",
   "publisher": "Publisher",
-  "userName": "User Name",
+  "username": "Username",
   "signUp": "Sign Up",
   "required": "Required",
   "tooShort": "Too Short",

diff --git a/src/assets/i18n/zh-tw.json b/src/assets/i18n/zh-tw.json
@@ -34,7 +34,7 @@
   "collectDeviceInfo": "收集設備資訊",
   "collectLocationInfo": "收集位置資訊",
   "publisher": "發佈者",
-  "userName": "使用者名稱",
+  "username": "使用者名稱",
   "signUp": "註冊",
   "required": "必填",
   "tooShort": "太短",