feature/1766 - Add Show/Hide password to Submit Report Step

front-end/src/app/login/debug-login/debug-login.component.scss

@@ -1,7 +1,7 @@
 .debug-login {
   margin-left: auto;
   margin-right: auto;
-	background-color: #dedbdb;
+  background-color: #dedbdb;
   border: #000000;
   border-radius: 8px;
   border-style: solid;
@@ -19,12 +19,3 @@
   width: 100%;
 }
 
-:host ::ng-deep eyeicon {
-  right: 16px;
-  scale: 1.25;
-}
-
-:host ::ng-deep eyeslashicon {
-  right: 16px;
-  scale: 1.25;
-}

front-end/src/app/reports/reports.module.ts

@@ -37,6 +37,7 @@ import { MainFormComponent } from './f1m/main-form/main-form.component';
 import { SubmitReportStep1Component } from './submission-workflow/submit-report-step1.component';
 import { SubmitReportStep2Component } from './submission-workflow/submit-report-step2.component';
 import { SubmitReportStatusComponent } from './submission-workflow/submit-report-status.component';
+import { PasswordModule } from 'primeng/password';
 
 @NgModule({
   declarations: [
@@ -80,6 +81,7 @@ import { SubmitReportStatusComponent } from './submission-workflow/submit-report
     InputNumberModule,
     RippleModule,
     NgOptimizedImage,
+    PasswordModule,
   ],
 })
 export class ReportsModule {}

front-end/src/app/reports/submission-workflow/submit-report-step2.component.html

@@ -19,7 +19,7 @@ <h3>Committee treasurer</h3>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_last_name"><strong>LAST NAME</strong></label>
-            <input type="text" pInputText id="treasurer_last_name" formControlName="treasurer_last_name" />
+            <input type="text" pInputText id="treasurer_last_name" formControlName="treasurer_last_name"/>
             <app-error-messages
               [form]="form"
               fieldName="treasurer_last_name"
@@ -30,7 +30,7 @@ <h3>Committee treasurer</h3>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_first_name"><strong>FIRST NAME</strong></label>
-            <input type="text" pInputText id="treasurer_first_name" formControlName="treasurer_first_name" />
+            <input type="text" pInputText id="treasurer_first_name" formControlName="treasurer_first_name"/>
             <app-error-messages
               [form]="form"
               fieldName="treasurer_first_name"
@@ -41,7 +41,7 @@ <h3>Committee treasurer</h3>
         <div class="col-4">
           <div class="field">
             <label for="treasurer_middle_name"><strong>MIDDLE NAME</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_middle_name" formControlName="treasurer_middle_name" />
+            <input type="text" pInputText id="treasurer_middle_name" formControlName="treasurer_middle_name"/>
             <app-error-messages
               [form]="form"
               fieldName="treasurer_middle_name"
@@ -54,7 +54,7 @@ <h3>Committee treasurer</h3>
         <div class="col-3">
           <div class="field">
             <label for="treasurer_prefix"><strong>PREFIX</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_prefix" formControlName="treasurer_prefix" />
+            <input type="text" pInputText id="treasurer_prefix" formControlName="treasurer_prefix"/>
             <app-error-messages
               [form]="form"
               fieldName="treasurer_prefix"
@@ -65,7 +65,7 @@ <h3>Committee treasurer</h3>
         <div class="col-3">
           <div class="field">
             <label for="treasurer_suffix"><strong>SUFFIX</strong> (OPTIONAL)</label>
-            <input type="text" pInputText id="treasurer_suffix" formControlName="treasurer_suffix" />
+            <input type="text" pInputText id="treasurer_suffix" formControlName="treasurer_suffix"/>
             <app-error-messages
               [form]="form"
               fieldName="treasurer_suffix"
@@ -85,7 +85,7 @@ <h3>Enter password</h3>
               If you have any questions on how to enroll, confirming your email, two-factor authentication, or your
               Personel Key please go to the following page:
               <a href="https://webforms.fec.gov/psa/help.htm" target="_blank" rel="noopener"
-                >FEC Electronic Filing Password Assignment System Help</a
+              >FEC Electronic Filing Password Assignment System Help</a
               >
             </p>
           </div>
@@ -95,7 +95,14 @@ <h3>Enter password</h3>
             <label for="filingPassword">
               <strong>ELECTRONIC FILING PASSWORD </strong>
             </label>
-            <input type="text" pInputText id="filingPassword" formControlName="filingPassword" />
+            <p-password
+              id="filingPassword"
+              type="password"
+              formControlName="filingPassword"
+              [feedback]="false"
+              [toggleMask]="true"
+              autocomplete="new-password"
+            />
             <app-error-messages
               [form]="form"
               fieldName="filingPassword"
@@ -123,7 +130,7 @@ <h3>Enter password</h3>
                 <div class="col-4">
                   <div class="field">
                     <label for="backdoor_code">BACKDOOR CODE</label>
-                    <input type="text" pInputText id="backdoor_code" formControlName="backdoor_code" />
+                    <input type="text" pInputText id="backdoor_code" formControlName="backdoor_code"/>
                     <app-error-messages
                       [form]="form"
                       fieldName="backdoor_code"

front-end/src/assets/styles/theme.css

@@ -6458,4 +6458,15 @@ p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon {
   border-color: #164f85;
   color: white;
   border-width: 2px;
+}
+
+
+eyeicon {
+  right: 16px;
+  scale: 1.25;
+}
+
+eyeslashicon {
+  right: 16px;
+  scale: 1.25;
 }