Logon no Authentication

Author: volkmarnissen

src/app/configure/configure.component.ts

@@ -69,15 +69,14 @@ export class ConfigureComponent implements OnInit {
   configObservable = this.entityApiService.getConfiguration();
   sslFiles: string[] = [];
   sub: Subscription;
-  toUrl: string | undefined = undefined;
   mqttConnectIcon: string = "cast";
   mqttConnectClass: string = "redIcon";
   mqttConnectMessage: string = "unknown";
 
   configureMqttFormGroup = this._formBuilder.group({
     mqttserverurl: [null as string | null, Validators.required],
-    mqttuser: [null as string | null, Validators.required],
-    mqttpassword: [null as string | null, Validators.required],
+    mqttuser: [null as string | null],
+    mqttpassword: [null as string | null],
     mqttkeyfile: [null as string | null],
     mqttcafile: [null as string | null],
   });
@@ -110,9 +109,7 @@ export class ConfigureComponent implements OnInit {
       this.entityApiService.getSslFiles().subscribe((rc) => {
         this.sslFiles = rc;
       });
-      this.sub = this.route.paramMap.subscribe((params) => {
-        this.toUrl = params.get("toUrl") || "";
-      });
+
       this.mqttValidate();
       if (config.githubPersonalToken)
         this.ghPersonalAccessToken.setValue(config.githubPersonalToken);
@@ -130,9 +127,7 @@ export class ConfigureComponent implements OnInit {
       mqttserverurl &&
       mqttuser &&
       mqttpassword &&
-      mqttserverurl.value &&
-      mqttuser.value &&
-      mqttpassword.value
+      mqttserverurl.value
     ) {
       {
         if (!config.mqttconnect) config.mqttconnect = {};
@@ -158,9 +153,7 @@ export class ConfigureComponent implements OnInit {
   }
 
   onChangekMqttConfig() {
-    if (this.configureMqttFormGroup.touched) {
       this.mqttValidate();
-    }
   }
   getSslFiles(): Observable<string[]> {
     return this.entityApiService.getSslFiles();
@@ -181,8 +174,7 @@ export class ConfigureComponent implements OnInit {
   }
 
   close() {
-    if (this.toUrl && this.toUrl.length > 0) this.router.navigate([this.toUrl]);
-    else this.router.navigate(["/"]);
+     this.router.navigate(["/"]);
   }
 
   hasConfigChanges(): boolean {
@@ -202,7 +194,7 @@ export class ConfigureComponent implements OnInit {
       if (result && result.valid) {
         this.mqttConnectIcon = "cast_connected";
         this.mqttConnectClass = "greenIcon";
-        this.mqttConnectMessage = "connected";
+            this.mqttConnectMessage = "connected";
       } else {
         this.mqttConnectIcon = "cast";
         this.mqttConnectClass = "redIcon";

src/app/login/login.component.html

@@ -4,23 +4,23 @@ <h3 mat-dialog-title>{{ (isRegisterMode?'Register User':'Login') }}</h3>
     </div>
     <mat-form-field  class="width250pt, center"> 
         <mat-label>Username</mat-label>
-        <input id="username" matInput class="width150pt"
+        <input tabindex="0" id="username" matInput class="width150pt"
             formControlName="username" >
             <mat-error *ngIf="form.get('username')!.hasError('required') != null">
                 Username is a required field
               </mat-error>
     </mat-form-field >
     <mat-form-field class="small-width right"   class="width250pt, center">
         <mat-label>Password</mat-label>
-        <input #password matInput
+        <input tabindex="1" matInput
             formControlName="password" [type]="hide ? 'password' : 'text'">
             <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
             <mat-error *ngIf="form.get('password')!.hasError('required') != null">
                 Password is a required field
               </mat-error>
     </mat-form-field>
     <mat-card-actions   class="width250pt, center">
-        <button mat-raised-button type="submit" color="primary">{{ (isRegisterMode?'REGISTER and LOGIN':'LOGIN') }}</button>
-        <button *ngIf="isRegisterMode" mat-raised-button type="submit" value="noAuthentication" color="primary">No Authorization required</button>
+        <button tabindex="2" *ngIf="isRegisterMode" mat-raised-button type="submit" value="noAuthentication" >No Authorization required</button>
+        <button tabindex="3" mat-raised-button type="submit" value="authentication" color="primary">{{ (isRegisterMode?'REGISTER and LOGIN':'LOGIN') }}</button>
  </mat-card-actions>
 </form>

src/app/login/login.component.ts

@@ -5,6 +5,9 @@ import {
   Validators,
   FormsModule,
   ReactiveFormsModule,
+  ValidatorFn,
+  AbstractControl,
+  ValidationErrors,
 } from "@angular/forms";
 import { ApiService } from "../services/api-service";
 import { SessionStorage } from "../services/SessionStorage";
@@ -55,28 +58,24 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
   ) {}
   ngAfterViewInit(): void {
-    let posRegister = this.router.url.indexOf("register");
-    // If the url part of the URL and not the parameter contains register, we are in register mode
-    this.isRegisterMode = posRegister >= 0;
     this.sub = this.route.paramMap.subscribe((params) => {
       this.toUrl = params.get("toUrl") || "";
     });
   }
 
   ngOnInit(): void {
-    this.form = this._formBuilder.group({
-      username: ["", Validators.required],
-      password: ["", Validators.required],
-    });
+    let posRegister = this.router.url.indexOf("register");
+    // If the url part of the URL and not the parameter contains register, we are in register mode
+    this.isRegisterMode = posRegister >= 0;
+      this.form = this._formBuilder.group({
+        username: ["", this.usernamePasswordRequired],
+        password: ["", this.usernamePasswordRequired],
+      });
   }
-  private login(username: string, password: string) {
+  private login(username: string, password: string, toUrl:string) {
     this.api.getUserLogin(username, password).subscribe((token) => {
       new SessionStorage().setAuthToken(token);
-      var u = new URLSearchParams(this.router.url.replace(/^[^?]*\?/, ""));
-      var toUrl = u.get("toUrl");
-      if (u && toUrl) this.toUrl = toUrl;
-      else this.toUrl = "";
-      this.router.navigate([this.toUrl], {
+      this.router.navigate([toUrl], {
         queryParams: { tokenWasExpired: true },
       });
     });
@@ -86,11 +85,26 @@ export class LoginComponent implements OnInit, AfterViewInit {
     let password = this.form.get("password")!.value;
     if (this.isRegisterMode) {
       let noAuthentication = (event.submitter as HTMLButtonElement).value == 'noAuthentication'
+      if(!noAuthentication && !username)
+          alert("Please enter a username")
+      else if(!noAuthentication && !password)
+        alert("Please enter a password")
+      else
       this.api.postUserRegister(username, password, noAuthentication) .subscribe(() => {
         if(!noAuthentication)
-          this.login(username, password);
+          this.login(username, password, '/');
         else  this.router.navigate(['/'], {});
       });
-    } else this.login(username, password);
+    } else this.login(username, password, '/');
   }
+  usernamePasswordRequired(): ValidatorFn {
+    return (control:AbstractControl) : ValidationErrors | null => {
+        if( !this.isRegisterMode)
+          return Validators.required(control)
+        else{
+          return null;
+        }
+    }
+}
+
 }