feat(asset-form): use Prime NG for inputs, buttons and password form …

…components Use p-button, p-input-text and p-password where appropriate in the Asset Form. fix #369
softrams · Oct 26, 2020 · e8f8e46 · e8f8e46
1 parent f6907e4
commit e8f8e46
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -38,8 +38,9 @@ import { InputTextModule } from 'primeng/inputtext';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { CalendarModule } from 'primeng/calendar';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import {ButtonModule} from 'primeng/button';
-import {CardModule} from 'primeng/card';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+import { PasswordModule } from 'primeng/password';
 import { EmailValidateComponent } from './email-validate/email-validate.component';
 
 @NgModule({
@@ -81,7 +82,8 @@ import { EmailValidateComponent } from './email-validate/email-validate.componen
     CalendarModule,
     ProgressSpinnerModule,
     ButtonModule,
-    CardModule
+    CardModule,
+    PasswordModule
   ],
   providers: [
     AppService,

diff --git a/frontend/src/app/asset-form/asset-form.component.html b/frontend/src/app/asset-form/asset-form.component.html
@@ -2,7 +2,7 @@
   <form [formGroup]="assetForm" (ngSubmit)="onSubmit(assetForm)">
     <div class="form-group">
       <label for="assetName">Asset Name</label>
-      <input formControlName="name" type="text" class="form-control" id="assetName" />
+      <input pInputText formControlName="name" type="text" class="form-control" id="assetName"/>
       <div class="card">
         <div class="card-body">
           <div class="col-md-12 text-center">
@@ -12,26 +12,25 @@ <h5>Jira Integration</h5>
           <div formGroupName="jira">
             <label for="username">Username</label>
             <input [readonly]="!canAddApiKey" formControlName="username" type="text" class="form-control"
-              id="username" />
-            <label for="host">Host</label>
-            <input [readonly]="!canAddApiKey" formControlName="host" type="text" class="form-control" id="host" />
-            <label for="apiKey">API Key</label>
-            <input [readonly]="!canAddApiKey" formControlName="apiKey" type="password" class="form-control" id="apiKey"
-              [placeholder]="canAddApiKey ? '':keyPlaceholder" />
+              id="username" pInputText/>
+            <label for="host" style="margin-top: 10px">Host</label>
+            <input pInputText [readonly]="!canAddApiKey" formControlName="host" type="text" class="form-control" id="host"/>
+            <label for="apiKey" style="margin-top: 10px">API Key</label>
+            <input pPassword promptLabel="Enter the API key" [readonly]="!canAddApiKey" formControlName="apiKey" type="password" class="form-control" id="apiKey"
+              [placeholder]="canAddApiKey ? '':keyPlaceholder"/>
           </div>
           <br>
-          <button [disabled]="canAddApiKey" type="button" class="float-right btn btn-warning"
-            (click)="purgeJiraInfo()">Purge</button>
+          <button pButton [disabled]="canAddApiKey" type="button" class="float-right btn btn-warning"
+            (click)="purgeJiraInfo()" label="Purge">
+          </button>
         </div>
       </div>
     </div>
-    <button [disabled]="!assetForm.valid" class="btn btn-primary float-right" type="submit" data-toggle="tooltip"
-      data-placement="bottom" title="Submit">
-      Submit
+    <button pButton [disabled]="!assetForm.valid" class="btn btn-primary float-right" type="submit" data-toggle="tooltip"
+      data-placement="bottom" label="Submit">
     </button>
-    <button (click)="navigateToAssets()" class="btn btn-secondary float-right" type="button" style="margin-right: 5px"
-      data-toggle="tooltip" data-placement="bottom" title="Back to Assets">
-      Back to Assets
+    <button pButton (click)="navigateToAssets()" class="btn btn-secondary float-right" type="button" style="margin-right: 5px"
+      data-toggle="tooltip" data-placement="bottom" label="Back to Assets">
     </button>
   </form>
 </div>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -9,12 +9,20 @@
   color: #fff !important;
 }
 
+.btn-secondary.p-button,
 .btn-secondary {
   color: #fff;
   background-color: #6c757d !important;
   border-color: #6c757d !important;
 }
 
+.btn-warning.p-button,
+.btn-warning {
+  color: #fff;
+  background-color: #ffc107 !important;
+  border-color: #ffc107 !important;
+}
+
 .btn-primary.p-button:hover,
 .btn-primary:hover {
   color: #910a0a;