Merge branch '197-session-id-input-field-enhancement' into 'master'

Resolve "Session ID input field enhancement"

Closes #197

See merge request arsnova/arsnova-lite!141

src/app/components/shared/room-join/room-join.component.html

 <div fxLayout="column" fxLayoutAlign="center center" fxlayoutgap="50px" fxFill>
 <form (ngSubmit)="joinRoom(roomId.value)">
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
-    <mat-form-field class="number">
-      <input matInput inputmode="numeric" type="number" pattern="[0-9]*" #roomId placeholder="Session-Id" [formControl]="roomFormControl"
-             [errorStateMatcher]="matcher" max="8"/>
-      <mat-hint align="end">{{roomId.value.length}} / 8</mat-hint>
+    <mat-form-field>
+      <input matInput #roomId type="text" inputmode="numeric" min="00000000" max="99999999" 
+             onkeydown="if(this.value.length - (this.value.split(' ').length -1) === 8 && event.keyCode != 8) return false;
+                        if(this.value.length === 4 && event.keyCode != 8) this.value = this.value + ' ';" 
+                        placeholder="Session-Id" [formControl]="roomFormControl" [errorStateMatcher]="matcher"/>
+      <mat-hint align="end">{{ roomId.value.length - (roomId.value.split(' ').length -1) }} / 8</mat-hint>
       <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
-      <mat-error *ngIf="roomFormControl.hasError('minlength')">{{ 'home-page.exactly-8' | translate}}</mat-error>
+      <mat-error *ngIf="roomFormControl.hasError('pattern')">{{ 'home-page.only-numbers' | translate}}</mat-error>
     </mat-form-field>
     <button mat-fab color="accent" type="submit">
       <mat-icon>input</mat-icon>

src/app/components/shared/room-join/room-join.component.scss

@@ -18,3 +18,7 @@ mat-error {
   width: 65px;
   height: 65px;
 }
+
+input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}

src/app/components/shared/room-join/room-join.component.ts

@@ -30,7 +30,7 @@ export class RoomJoinComponent implements OnInit {
   demoId = '95680586';
   user: User;
 
-  roomFormControl = new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(8)]);
+  roomFormControl = new FormControl('', [Validators.required, Validators.pattern('[0-9 ]*')]);
 
   matcher = new RegisterErrorStateMatcher();
 
@@ -46,7 +46,16 @@ export class RoomJoinComponent implements OnInit {
   }
 
   getRoom(id: string): void {
-    this.roomService.getRoomByShortId(id)
+    if (id.length - (id.split(' ').length -1) < 8) {
+      this.translateService.get('home-page.exactly-8').subscribe(message => {
+        this.notificationService.show(message);
+      });
+    } else if (this.roomFormControl.hasError('pattern')) {
+      this.translateService.get('home-page.only-numbers').subscribe(message => {
+        this.notificationService.show(message);
+      });
+    } else {
+      this.roomService.getRoomByShortId(id.replace(/\s/g, ""))
       .subscribe(room => {
         this.room = room;
         if (!room) {
@@ -65,6 +74,8 @@ export class RoomJoinComponent implements OnInit {
           }
         }
       });
+    }
+    
   }
 
   joinRoom(id: string): void {

src/assets/i18n/home/de.json

@@ -4,7 +4,7 @@
 		"german": "Deutsch",
 		"logout": "Abmelden",
     "guest": "Gast",
-    "logged-out": "Ausloggen erfolgreich.",
+        "logged-out": "Ausloggen erfolgreich.",
 		"back": "Zurück",
 		"my-sessions": "Meine Sessions",
 		"visited-sessions": "Besuchte Sessions"
@@ -14,34 +14,35 @@
 		"participant": "Student/in",
 		"password-reset": "Passwort vergessen?",
 		"register": "Registrieren",
-    "welcome": "Willkommen bei"
+        "welcome": "Willkommen bei"
 	},
-  "home-page": {
-    "join-demo-session": "Demo-Session betreten",
-    "session-id": "Session-Id",
-    "no-room-found": "Es wurde keine Session mit dieser ID gefunden.",
-    "please-enter": "Bitte geben Sie eine Session-ID ein.",
-		"exactly-8": "Eine Session-ID hat genau 8 Ziffern.",
-		"create-session": "Session erstellen",
-    "no-empty-name": "Bitte geben Sie einen Namen ein.",
-    "created-1": "Session '",
-    "created-2": "' erfolgreich erstellt."
-  },
+    "home-page": {
+        "join-demo-session": "Demo-Session betreten",
+        "session-id": "Session-Id",
+        "no-room-found": "Es wurde keine Session mit dieser ID gefunden.",
+        "please-enter": "Bitte geben Sie eine Session-ID ein.",
+	    "exactly-8": "Eine Session-ID hat genau 8 Ziffern.",
+	    "create-session": "Session erstellen",
+  	    "no-empty-name": "Bitte geben Sie einen Namen ein.",
+  	    "created-1": "Session '",
+	    "created-2": "' erfolgreich erstellt.",
+	    "only-numbers": "Eine Session-Id besteht aus Nummern."
+    },
 	"login": {
 		"email": "E-Mail",
 		"email-invalid": "E-Mail Adresse ist ungültig",
 		"email-required": "E-Mail Adresse ist erforderlich",
 		"guest-login": "Anmelden als Gast",
 		"input-incorrect": "Bitte prüfen Sie Ihre Eingaben.",
-    "login-successful": "Login erfolgreich.",
+        "login-successful": "Login erfolgreich.",
 		"login": "Anmelden",
 		"login-data-incorrect": "Benutzername oder Passwort nicht korrekt.",
 		"password": "Passwort",
 		"password-required": "Passwort ist erforderlich",
-    "activate": "Aktivieren",
-    "activation-key": "Aktivierungsschlüssel",
-    "activation-key-required": "Aktivierungsschlüssel erforderlich",
-    "activation-key-incorrect": "Aktivierungsschlüssel falsch"
+        "activate": "Aktivieren",
+        "activation-key": "Aktivierungsschlüssel",
+        "activation-key-required": "Aktivierungsschlüssel erforderlich",
+        "activation-key-incorrect": "Aktivierungsschlüssel falsch"
 	},
 	"password-reset": {
 		"email": "E-Mail",
@@ -53,10 +54,10 @@
 	},
 	"register": {
 		"email": "E-Mail",
-    "email-verify": "E-Mail bestätigen",
+        "email-verify": "E-Mail bestätigen",
 		"email-invalid": "E-Mail Adresse ist nicht gültig",
 		"email-required": "E-Mail Adresse ist erforderlich",
-    "email-unmatch": "E-Mail Adressen stimmen nicht überein",
+        "email-unmatch": "E-Mail Adressen stimmen nicht überein",
 		"password": "Passwort",
 		"password-required": "Passwort ist erforderlich",
 		"password-unmatch": "Passwörter stimmen nicht überein",
@@ -65,10 +66,10 @@
 		"register-successful": "Erfolgreich registriert. Bitte prüfen Sie Ihre E-Mails",
 		"register-unsuccessful": "Bitte prüfen Sie Ihre Eingaben."
 	},
-  "session": {
-    "session-name": "Name der Session",
-    "description": "Beschreibung",
-    "max-ls": "Max. Zeichen:",
-    "create-session": "Session erstellen"
+    "session": {
+        "session-name": "Name der Session",
+        "description": "Beschreibung",
+        "max-ls": "Max. Zeichen:",
+        "create-session": "Session erstellen"
   }
 }

src/assets/i18n/home/en.json

@@ -25,7 +25,8 @@
 		"create-session": "Create session",
     "no-empty-name": "Please enter a name.",
     "created-1": "Session '",
-    "created-2": "' successfully created."
+		"created-2": "' successfully created.",
+		"only-numbers": "A session-id only contains numbers."
   },
 	"login": {
 		"email": "E-Mail",