Finish register ui

src/app/auth/sign-up/sign-up.component.html

@@ -25,13 +25,15 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
           <fa-icon [icon]="iconUser"></fa-icon>
         </span>
       </div>
-      <p class="help">{{'user.settings.displayName.help' | translate}}</p>
       <div *ngIf="displayName.invalid">
         <p class="help is-danger"
            *ngIf="displayName.errors.maxlength">{{'user.settings.displayName.error.max' | translate}}</p>
         <p class="help is-danger"
            *ngIf="displayName.errors.minlength">{{'user.settings.displayName.error.min' | translate}}</p>
+        <p class="help is-danger"
+           *ngIf="displayName.errors.required">{{'user.settings.displayName.error.required' | translate}}</p>
       </div>
+      <p class="help">{{'user.settings.displayName.help' | translate}}</p>
     </div>
 
     <!-- Username -->
@@ -103,19 +105,24 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
     </div>
 
     <!-- password -->
+    <!-- TODO: make this a component -->
     <label class="label">{{ 'user.settings.password.label' | translate }}</label>
     <div class="field has-addons">
       <div class="control has-icons-left is-expanded">
-        <input class="input" type="password" name="password" placeholder="********" *ngIf="passwordHidden; else plainTextPw" [(ngModel)]="data.password">
-        <ng-template #plainTextPw>
-          <input class="input" type="text" name="password" placeholder="password" [(ngModel)]="data.password">
-        </ng-template>
+        <input class="input"
+               [ngClass]="{'is-danger': pwField.invalid}"
+               [type]="passwordHidden ? 'password' : 'text'"
+               name="password"
+               required
+               [placeholder]="passwordHidden ? '********' : 'password'"
+               [(ngModel)]="data.password"
+               #pwField="ngModel"
+        />
         <span class="icon is-small is-left">
-              <fa-icon [icon]="iconPadlock"></fa-icon>
-            </span>
+          <fa-icon [icon]="iconPadlock"></fa-icon>
+        </span>
       </div>
 
-      <!-- TODO: make component -->
       <div class="control">
         <button class="button" (click)="passwordHidden = !passwordHidden"
                 [title]="(passwordHidden ? 'login.password.show' : 'login.password.hide') | translate">
@@ -126,8 +133,13 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
                 </ng-template>
               </span>
         </button>
-      </div>
     </div>
+  </div>
+
+  <div *ngIf="pwField.invalid" class="field">
+    <p class="help is-danger"
+       *ngIf="pwField.errors.required">{{'user.settings.password.error.required' | translate}}</p>
+  </div>
 
     <!-- Country -->
     <app-element-country [(country)]="data.country"></app-element-country>
@@ -136,5 +148,17 @@ <h2 class="subtitle">{{'user.settings.new.description' | translate}}</h2>
     <app-element-languages [(languages)]="data.languagesSpoken"></app-element-languages>
 
     <!-- connections -->
+    <app-element-connections class="field" [(connections)]="data.connections"></app-element-connections>
+
+    <div class="field">
+      <div class="control">
+        <button class="button is-link"
+                [ngClass]="{'is-loading': loading}"
+                type="button"
+                (click)="submit()"
+                [disabled]="form.invalid">{{'register.submit' | translate}}
+        </button>
+      </div>
+    </div>
   </form>
 </div>

src/app/auth/sign-up/sign-up.component.ts

@@ -1,34 +1,31 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { SignupDto } from '../../../model/dto/signup-dto';
-import { faEye, faEyeSlash, faLock, faUser, faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import { faDiscord, faTwitch } from '@fortawesome/free-brands-svg-icons';
+import { faEnvelope, faEye, faEyeSlash, faLock, faUser } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'app-sign-up',
   templateUrl: './sign-up.component.html',
   styleUrls: ['./sign-up.component.scss']
 })
-export class SignUpComponent implements OnInit {
+export class SignUpComponent {
   iconUser = faUser;
   iconEmail = faEnvelope;
   iconPadlock = faLock;
   iconEye = faEye;
   iconEyeSlash = faEyeSlash;
-  iconDiscord = faDiscord;
-  iconTwitch = faTwitch;
 
   loading = false;
   passwordHidden = true;
   data: SignupDto = {
-    connections: [],
-    country: null,
     displayName: '',
+    username: '',
     email: '',
-    languagesSpoken: [],
     password: '',
+    country: null,
     pronouns: [],
-    username: '',
+    languagesSpoken: [],
+    connections: [],
   };
 
   constructor(
@@ -41,11 +38,9 @@ export class SignUpComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {
-  }
-
   submit() {
     this.loading = true;
+    this.data.connections = this.data.connections.filter(it => it.platform && it.username);
   }
 
   get title(): string {

src/app/user/settings/connection-settings/connection-settings.component.ts → src/app/elements/element-connections/connection-settings/connection-settings.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { SocialAccount } from '../../../../model/social-account';
 import { SocialPlatform } from '../../../../model/social-platform';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
@@ -7,19 +7,20 @@ import { parseMastodonUrl } from '../../../../utils/helpers';
 @Component({
   selector: 'app-connection-settings',
   templateUrl: './connection-settings.component.html',
-  styleUrls: ['./connection-settings.component.scss']
+  styleUrls: ['./connection-settings.component.scss'],
 })
 export class ConnectionSettingsComponent implements OnInit {
   @Input() public connection: SocialAccount;
-  @Input() public discordId: number;
+  @Input() public discordId: string;
   @Input() public twitchId: string;
 
   @Output() public deleteSelf = new EventEmitter<void>();
 
   public faTrash = faTrash;
   public platforms = SocialPlatform;
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
     //
@@ -30,7 +31,7 @@ export class ConnectionSettingsComponent implements OnInit {
 
     return Boolean(
       (type === 'DISCORD' && this.discordId) ||
-      (type === 'TWITCH' && this.twitchId)
+      (type === 'TWITCH' && this.twitchId),
     );
   }
 
@@ -50,7 +51,7 @@ export class ConnectionSettingsComponent implements OnInit {
     for (const key of Object.keys(SocialPlatform)) {
       cloned[key] = {
         disabled: false,
-        url: cloned[key]
+        url: cloned[key],
       };
 
       if (key === 'DISCORD' && this.discordId) {

src/app/elements/element-connections/element-connections.component.html

@@ -0,0 +1,23 @@
+<article class="message">
+  <div class="message-header">
+    <p>
+      {{ 'user.settings.connections.title' | translate }} <br/>
+      <small>{{ 'user.settings.connections.subtitle' | translate }}</small>
+    </p>
+  </div>
+  <div class="message-body">
+    <p class="pb-2">{{ 'user.settings.connections.visibility' | translate }}</p>
+    <div class="row">
+      <app-connection-settings *ngFor="let connection of connections"
+                               class="column is-full"
+                               [connection]="connection"
+                               [discordId]="discordId"
+                               [twitchId]="twitchId"
+                               (deleteSelf)="deleteConnection(connection)"
+      ></app-connection-settings>
+    </div>
+    <button type="button" (click)="addNewConnection()" class="button is-success is-outlined is-fullwidth">
+      <fa-icon [icon]="faPlus"></fa-icon>
+    </button>
+  </div>
+</article>

src/app/elements/element-connections/element-connections.component.scss

@@ -0,0 +1,4 @@
+:host {
+  box-sizing: border-box;
+  display: block;
+}

src/app/elements/element-connections/element-connections.component.ts

@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SocialAccount } from '../../../model/social-account';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-element-connections',
+  templateUrl: './element-connections.component.html',
+  styleUrls: ['./element-connections.component.scss']
+})
+export class ElementConnectionsComponent implements OnInit {
+  faPlus = faPlus;
+
+  @Input() discordId = '';
+  @Input() twitchId = '';
+
+  @Input() connections: SocialAccount[] = [];
+  @Output() connectionsChange = new EventEmitter<SocialAccount[]>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  addNewConnection(): void {
+    this.connections.push({
+      platform: '',
+      username: '',
+    });
+    this.connectionsChange.emit(this.connections);
+  }
+
+  deleteConnection(connection: SocialAccount): void {
+    const conns = this.connections;
+
+    const index = conns.indexOf(connection);
+
+    if (index > -1) {
+      conns.splice(index, 1);
+
+      this.connectionsChange.emit(this.connections);
+    }
+  }
+}

src/app/elements/elements.module.ts

@@ -27,6 +27,8 @@ import { ElementPronounsComponent } from './element-pronouns/element-pronouns.co
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ElementLanguagesComponent } from './element-languages/element-languages.component';
 import { ElementCountryComponent } from './element-country/element-country.component';
+import { ElementConnectionsComponent } from './element-connections/element-connections.component';
+import { ConnectionSettingsComponent } from './element-connections/connection-settings/connection-settings.component';
 
 @NgModule({
   declarations: [
@@ -51,6 +53,8 @@ import { ElementCountryComponent } from './element-country/element-country.compo
     ElementPronounsComponent,
     ElementLanguagesComponent,
     ElementCountryComponent,
+    ElementConnectionsComponent,
+    ConnectionSettingsComponent,
   ],
   exports: [
     ElementTableComponent,
@@ -74,6 +78,7 @@ import { ElementCountryComponent } from './element-country/element-country.compo
     ElementPronounsComponent,
     ElementLanguagesComponent,
     ElementCountryComponent,
+    ElementConnectionsComponent,
   ],
   imports: [
     CommonModule,

src/app/user/settings/settings.component.html

@@ -158,29 +158,13 @@ <h4 class="title is-4">{{'user.settings.general' | translate}}</h4>
     <!-- languages -->
     <app-element-languages [(languages)]="tmpLanguages"></app-element-languages>
 
-    <article class="message">
-      <div class="message-header">
-        <p>
-          {{ 'user.settings.connections.title' | translate }} <br/>
-          <small>{{ 'user.settings.connections.subtitle' | translate }}</small>
-        </p>
-      </div>
-      <div class="message-body">
-        <p class="pb-2">{{ 'user.settings.connections.visibility' | translate }}</p>
-        <div class="row">
-          <app-connection-settings *ngFor="let connection of user.connections"
-                                   class="column is-full"
-                                   [connection]="connection"
-                                   [discordId]="user.discordId"
-                                   [twitchId]="user.twitchId"
-                                   (deleteSelf)="deleteConnection(connection)"
-          ></app-connection-settings>
-        </div>
-        <button type="button" (click)="addNewConnection()" class="button is-success is-outlined is-fullwidth">
-          <fa-icon [icon]="faPlus"></fa-icon>
-        </button>
-      </div>
-    </article>
+    <!-- connections -->
+    <app-element-connections
+      [(connections)]="user.connections"
+      [discordId]="user.discordId"
+      [twitchId]="user.twitchId"
+    ></app-element-connections>
+
     <hr/>
     <h4 class="title is-4">{{'user.settings.accountSync.title' | translate}}</h4>
     <p>{{'user.settings.accountSync.description' | translate}}</p>

src/app/user/user.module.ts

@@ -11,7 +11,6 @@ import { ProfileComponent } from './profile/profile.component';
 import { UserProfileResolver } from '../resolvers/user-profile-resolver';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ConnectionComponent } from './profile/connection/connection.component';
-import { ConnectionSettingsComponent } from './settings/connection-settings/connection-settings.component';
 import { SyncButtonComponent } from './settings/sync-button/sync-button.component';
 import { UserProfileComponent } from './profile/user-profile/user-profile.component';
 import { ElementModule } from '../elements/elements.module';
@@ -49,7 +48,6 @@ const userRoutes: Routes = [
     SettingsComponent,
     ProfileComponent,
     ConnectionComponent,
-    ConnectionSettingsComponent,
     SyncButtonComponent,
     UserProfileComponent,
     UserSocialComponent,

src/model/user.ts

@@ -16,7 +16,7 @@ export class User {
   roles: string[];
   connections: SocialAccount[];
   enabled: boolean;
-  discordId: number;
+  discordId: string;
   twitterId: string;
   twitchId: string;
   patreonId: string;

src/utils/helpers.ts

@@ -1,5 +1,13 @@
+const mastodonRegex = /@?([^@]+)(?:@(.*))?/;
+
 export function parseMastodonUrl(input: string): string {
-  const [username, platform] = input.split('@');
+  const match = mastodonRegex.exec(input);
+
+  if (match == null) {
+    return '';
+  }
+
+  const [_, username, platform] = match;
 
-  return `https://${platform}/@${username}`;
+  return `https://${platform || 'mastodon.social'}/@${username}`;
 }