From 428974be705b57d3957623da8a43137254e6984a Mon Sep 17 00:00:00 2001
From: Sasha Dresden <sasha.dresden@proton.me>
Date: Fri, 14 Jun 2024 17:37:31 -0400
Subject: [PATCH] Change backdoor from radio to checkbox

---
 .../submit-report-step2.component.html        | 21 +++++++++----------
 front-end/src/styles.scss                     |  4 ++++
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html b/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html
index dd501d71ac..049e1841ac 100644
--- a/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html
+++ b/front-end/src/app/reports/submission-workflow/submit-report-step2.component.html
@@ -115,21 +115,20 @@ <h2>Enter password</h2>
       <div class="grid" *ngIf="report?.report_version">
         <div class="col-12">
           <div class="field">
-            <app-yes-no-radio-input
-              [form]="form"
-              [formSubmitted]="formSubmitted"
-              controlName="backdoorYesNo"
-              label="Do you need to use a backdoor code? (OPTIONAL)"
-              ariaLabelYes="You need to use a backdoor code"
-              ariaLabelNo="You do not need to use a backdoor code"
-              [tooltipText]="backdoorCodeHelpText"
-              [tooltipEscape]="false"
-            ></app-yes-no-radio-input>
+            <p-checkbox [binary]="true" inputId="backdoor-check" formControlName="backdoorYesNo"></p-checkbox>
+            <label for="backdoor-check" class="mb-0 ml-2">
+              ADD A BACKDOOR CODE <span class="optional-text">(OPTIONAL)</span>
+            </label>
+            <span
+              class="pi pi-info-circle"
+              style="font-size: 1.5rem; margin-left: 0.5rem"
+              pTooltip="Do you need to use a backdoor code?"
+            ></span>
             <ng-container *ngIf="showBackdoorCode">
               <div class="grid">
                 <div class="col-4">
                   <div class="field">
-                    <label for="backdoor_code">BACKDOOR CODE</label>
+                    <label for="backdoor_code" class="d-none">BACKDOOR CODE</label>
                     <input type="text" pInputText id="backdoor_code" formControlName="backdoor_code" />
                     <app-error-messages
                       [form]="form"
diff --git a/front-end/src/styles.scss b/front-end/src/styles.scss
index 2467dbcdb2..7035528ac7 100644
--- a/front-end/src/styles.scss
+++ b/front-end/src/styles.scss
@@ -462,3 +462,7 @@ table {
 .card {
   border: 0;
 }
+
+.optional-text {
+  color: #aeb0b5;
+}