[streampipes] branch dev updated: feat: Add input validation for API token name (#793)

[zehnder]

This is an automated email from the ASF dual-hosted git repository.

zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new d70630c2d feat: Add input validation for API token name (#793)
d70630c2d is described below

commit d70630c2df65ed5eb29bdb5e2a1bcd44c607240d
Author: Aamir shaikh <aamirshaikh3...@outlook.com>
AuthorDate: Thu Feb 16 20:58:24 2023 +0530

    feat: Add input validation for API token name (#793)
---
 .../token/token-management-settings.component.html | 23 +++++++++++++++++++++-
 .../token/token-management-settings.component.scss |  4 ++++
 .../token/token-management-settings.component.ts   |  8 ++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git 
a/ui/src/app/profile/components/token/token-management-settings.component.html 
b/ui/src/app/profile/components/token/token-management-settings.component.html
index 37f79e14a..525ba7425 100644
--- 
a/ui/src/app/profile/components/token/token-management-settings.component.html
+++ 
b/ui/src/app/profile/components/token/token-management-settings.component.html
@@ -32,13 +32,34 @@
                 <div class="subsection-title">New API key</div>
                 <mat-form-field fxFlex color="accent">
                     <mat-label>Name</mat-label>
-                    <input [(ngModel)]="newTokenName" matInput />
+                    <input
+                        [(ngModel)]="newTokenName"
+                        matInput
+                        [formControl]="tokenNameFormControl"
+                    />
+                    <mat-error
+                        *ngIf="tokenNameFormControl.hasError('required')"
+                    >
+                        Token name is required.
+                    </mat-error>
+                    <mat-error
+                        *ngIf="
+                            tokenNameFormControl.hasError('minlength') ||
+                            tokenNameFormControl.hasError('pattern')
+                        "
+                    >
+                        Token name must be at least 3 characters long and
+                        contain only alphanumeric characters, hyphens, or
+                        underscores.
+                    </mat-error>
                 </mat-form-field>
                 <div>
                     <button
+                        class="mt-5"
                         mat-button
                         mat-raised-button
                         color="accent"
+                        [disabled]="!tokenNameFormControl.valid"
                         (click)="requestNewKey()"
                     >
                         Create new API key
diff --git 
a/ui/src/app/profile/components/token/token-management-settings.component.scss 
b/ui/src/app/profile/components/token/token-management-settings.component.scss
index f7f40e7a6..b48eb861c 100644
--- 
a/ui/src/app/profile/components/token/token-management-settings.component.scss
+++ 
b/ui/src/app/profile/components/token/token-management-settings.component.scss
@@ -24,6 +24,10 @@
     margin-bottom: 15px;
 }
 
+.mt-5 {
+    margin-top: 5px;
+}
+
 .mt-10 {
     margin-top: 10px;
 }
diff --git 
a/ui/src/app/profile/components/token/token-management-settings.component.ts 
b/ui/src/app/profile/components/token/token-management-settings.component.ts
index 4ad812aed..53977d9e0 100644
--- a/ui/src/app/profile/components/token/token-management-settings.component.ts
+++ b/ui/src/app/profile/components/token/token-management-settings.component.ts
@@ -20,6 +20,7 @@ import { Component, OnInit } from '@angular/core';
 import { BasicProfileSettings } from '../basic-profile-settings';
 import { RawUserApiToken, UserApiToken } from '@streampipes/platform-services';
 import { MatTableDataSource } from '@angular/material/table';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sp-token-management-settings',
@@ -34,6 +35,12 @@ export class TokenManagementSettingsComponent
     newTokenCreated = false;
     newlyCreatedToken: RawUserApiToken;
 
+    tokenNameFormControl = new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.pattern(/^[a-zA-Z0-9_-]+$/),
+    ]);
+
     displayedColumns: string[] = ['name', 'action'];
     apiKeyDataSource: MatTableDataSource<UserApiToken>;
 
@@ -49,6 +56,7 @@ export class TokenManagementSettingsComponent
                 this.newlyCreatedToken = result;
                 this.newTokenCreated = true;
                 this.newTokenName = '';
+                this.tokenNameFormControl.reset();
                 this.receiveUserData();
             });
     }