update registration + profile

src/app/pages/register/register.component.html

@@ -7,7 +7,7 @@
             </mat-error>
             <mat-form-field>
                 <input matInput placeholder="{{'username' | i18n}}" formControlName="username"
-                    [(ngModel)]="model.username">
+                    [(ngModel)]="model.username" required>
                 <mat-error>
                     {{'username.error' | i18n}}
                 </mat-error>
@@ -15,19 +15,9 @@
                     <mat-icon>autorenew</mat-icon>
                 </a>
             </mat-form-field>
-            <mat-form-field>
-                <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
-                    [(ngModel)]="model.email">
-                <mat-error>
-                    {{'email.invalid' | i18n}}
-                </mat-error>
-            </mat-form-field>
-            <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail" *ngIf="model.email">
-                {{'email.primary' | i18n}}
-            </mat-slide-toggle>
             <mat-form-field>
                 <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
-                    [(ngModel)]="model.password">
+                    [(ngModel)]="model.password" required>
                 <mat-error>
                     <div *ngFor="let error of form.get('password').errors | keyvalue">
                         {{'password.error.' + error.key | i18n}}<br>
@@ -36,12 +26,26 @@
             </mat-form-field>
             <mat-form-field>
                 <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
-                    [(ngModel)]="model.password2">
+                    [(ngModel)]="model.password2" required>
                 <mat-error>
                     {{'password.not-match' | i18n}}
                 </mat-error>
             </mat-form-field>
 
+            <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
+                (change)="onPrimaryChange()">
+                {{'email.primary' | i18n}} <mat-icon inline=true
+                    matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
+            </mat-slide-toggle>
+
+            <mat-form-field *ngIf="model.primaryEmail">
+                <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
+                    [(ngModel)]="model.email" required>
+                <mat-error>
+                    {{'email.invalid' | i18n}}
+                </mat-error>
+            </mat-form-field>
+
             <mat-list *ngIf="items && items[0]">
                 <mat-list-item *ngFor="let item of items">
                     <mat-icon mat-list-icon>plus_one</mat-icon>

src/app/pages/register/register.component.scss

@@ -1,3 +1,7 @@
 mat-form-field {
   display: block;
 }
+
+mat-hint {
+  white-space: normal;
+}

src/app/pages/register/register.component.ts

@@ -46,7 +46,7 @@ export class RegisterComponent implements OnInit {
       username: ['', Validators.required],
       email: ['', Validators.email],
       primaryEmail: [false, Validators.nullValidator],
-      password: ['', Validators.required],
+      password: ['', Validators.nullValidator],
       password2: ['', Validators.required]
     }, {
       validator: MatchingValidator('password', 'password2')
@@ -57,6 +57,16 @@ export class RegisterComponent implements OnInit {
     });
   }
 
+  onPrimaryChange() {
+    let mailControl = this.form.get('email');
+    mailControl.clearAsyncValidators();
+    mailControl.clearValidators();
+    if(this.model.primaryEmail) {
+      mailControl.setValidators([Validators.email, Validators.required]);
+    }
+    mailControl.updateValueAndValidity();
+  }
+
 
   genUsername() {
     const config: Config = {
@@ -87,10 +97,8 @@ export class RegisterComponent implements OnInit {
           {"name": "publicKey", "type": "BLOB", "visibility": "PROTECTED", "blob": pubKey}
         ]
 
-        if(this.model.email) {
-          this.model.profileFields.push({"name": "email", "type": "EMAIL", "visibility": "PRIVATE", "value": this.model.email});
-        }
         if(this.model.primaryEmail) {
+          this.model.profileFields.push({"name": "email", "type": "EMAIL", "visibility": "PRIVATE", "value": this.model.email});
           this.model.profileFields.push({"name": "primaryEmail", "type": "BOOL", "visibility": "PRIVATE", "value": this.model.primaryEmail});
         }
 

src/app/ui/profilefields/profilefield.dialog.html

@@ -34,6 +34,9 @@
         <input matInput type="email" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
       </mat-form-field>
+      <mat-slide-toggle *ngSwitchCase="'BOOL'" [(ngModel)]="profileField.value" formControlName="value">
+        {{'profileField.value' | i18n}}
+      </mat-slide-toggle>
       <mat-form-field *ngSwitchCase="'NUMBER'">
         <input matInput type="number" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
@@ -62,5 +65,6 @@
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
-  <button [disabled]="form.invalid" mat-raised-button [mat-dialog-close]="profileField" color="accent">{{'save' | i18n}}</button>
+  <button [disabled]="form.invalid" mat-raised-button [mat-dialog-close]="profileField" color="accent">{{'save' |
+    i18n}}</button>
 </mat-dialog-actions>

src/app/ui/profilefields/profilefield.dialog.scss

@@ -1,3 +1,7 @@
 mat-form-field {
   display: block;
 }
+
+mat-slide-toggle {
+  margin-bottom: 24px;
+}

src/app/ui/profilefields/profilefields.component.html

@@ -17,6 +17,8 @@
                 <span *ngSwitchCase="'NUMBER'">{{profileField.value}}</span>
                 <button *ngSwitchCase="'BLOB'" mat-raised-button
                     (click)="openBlob(profileField)">{{'profileField.openBlob' | i18n}}</button>
+                <mat-slide-toggle *ngSwitchCase="'BOOL'" [(ngModel)]="profileField.value" disabled>
+                </mat-slide-toggle>
             </div>
         </td>
     </ng-container>