diff --git a/src/app/components/shared/room-join/room-join.component.html b/src/app/components/shared/room-join/room-join.component.html
index 1578de81fef519444a1b2e4e82a5dd2afcacd149..0d3297e0ef613174bb69fefc7506fe35a76b5eea 100644
--- a/src/app/components/shared/room-join/room-join.component.html
+++ b/src/app/components/shared/room-join/room-join.component.html
@@ -1,12 +1,14 @@
<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>
diff --git a/src/app/components/shared/room-join/room-join.component.scss b/src/app/components/shared/room-join/room-join.component.scss
index 6a6e30f8821106ba6d07c08016c77d41d3c5d5c9..46d23a71f87e0cae221cdbf9ba0a2353b0ca09fe 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/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;
+}
diff --git a/src/app/components/shared/room-join/room-join.component.ts b/src/app/components/shared/room-join/room-join.component.ts
index a7a0fb4cfb4b31555be09ff691ea1f0d07b7b406..3e81020ead0fc9ef37bd8172c575579aa2e23272 100644
--- a/src/app/components/shared/room-join/room-join.component.ts
+++ b/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 {
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 422bf9395322cf759d6d29b85f7d14ff5f88b22e..caca07bc1e018698784643d7e91ccd6c11f50176 100644
--- a/src/assets/i18n/home/de.json
+++ b/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"
}
}
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index ad19e53b9a8110869772f856e2746b606aba8a68..b3853c79bf66eda657ec172e8049dce5c3de0a24 100644
--- a/src/assets/i18n/home/en.json
+++ b/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",