✨ Security confirmation (#411)

Parent issue: sequentech/meta#224
sequentech · Nov 17, 2023 · 0855444 · 0855444
1 parent 8c177fe
commit 0855444
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 2 deletions.
diff --git a/avBooth/start-screen-directive/start-screen-directive.html b/avBooth/start-screen-directive/start-screen-directive.html
@@ -74,13 +74,41 @@ <h4 ng-i18next="avBooth.legal.title"></h4>
           <a ng-if="extra_data.contact" href="mailto:{{extra_data.contact}}"><span ng-i18next>avBooth.legal.contact</span>: {{ extra_data.contact }}</a>
           <!-- End legal terms -->
         </div>
+      </div>
 
+      <!-- Mandatory TOS -->
+      <div class="row" ng-if="isMandatoryTosEnabled(election)">
+        <div class="padded col-xs-12 mandatory-tos-block">
+          <input
+            type="checkbox"
+            class="form-control"
+            aria-labeledby="label-mandatory-tos"
+            id="input-mandatory-tos"
+            ng-model="mandatory_tos.value"
+            tabindex="0"
+            ng-required="true"
+            name="input-mandatory-tos"
+          />
+          <label
+            class="text-left"
+            for="input-mandatory-tos"
+            id="label-mandatory-tos"
+          >
+            <span
+              ng-bind-html="election.presentation | customI18n : 'mandatory_acceptance_tos_html'"
+            >
+            </span>
+          </label>
+        </div>
       </div>
+      <!-- End Mandatory TOS -->
+
       <div class="row" ng-if="!fixToBottom">
         <button
           class="btn btn-block btn-lg btn-success-action btn-plain"
+          ng-class="{'disabled-cls': !isStartVotingEnabled(election, mandatory_tos.value)}"
           ng-i18next="avBooth.startVoting"
-          ng-click="next()">
+          ng-click="startVoting()">
         </button>
       </div>
     </div>
@@ -94,8 +122,9 @@ <h4 ng-i18next="avBooth.legal.title"></h4>
   <div class="row">
     <button
       class="btn btn-block btn-lg btn-success-action btn-plain"
+      ng-class="{'disabled-cls': !isStartVotingEnabled(election, mandatory_tos.value)}"
       ng-i18next="avBooth.startVoting"
-      ng-click="next()">
+      ng-click="startVoting()">
     </button>
   </div>
   <div avb-common-footer float="true"></div>

diff --git a/avBooth/start-screen-directive/start-screen-directive.js b/avBooth/start-screen-directive/start-screen-directive.js
@@ -42,8 +42,51 @@ angular
             scope.legal = true;
           }
         }
+        scope.mandatory_tos = {
+          value: false
+        };
 
+        /**
+         * @param {*} election Election to check
+         * @returns if the mandatory tos is enabled or not
+         */
+        scope.isMandatoryTosEnabled = function (election)
+        {
+          return (
+            !!election &&
+            !!election.presentation &&
+            !!election.presentation.mandatory_acceptance_tos_html
+          );
+        };
+
+        /**
+         * @returns whether the Start Voting button should be enabled or not
+         */
+        scope.isStartVotingEnabled = function (election, checkbox)
+        {
+          return (!scope.isMandatoryTosEnabled(election) || checkbox);
+        };
         scope.fixToBottom = scope.checkFixToBottom();
+
+        scope.startVoting = function ()
+        {
+          if (!scope.isStartVotingEnabled(
+            scope.election, scope.mandatory_tos.value
+          )) {
+            $('[avb-start-screen] .mandatory-tos-block')
+              .addClass("error");
+            setTimeout(
+              function ()
+              {
+                $('[avb-start-screen] .mandatory-tos-block')
+                  .removeClass("error");
+              },
+              500
+            );
+            return;
+          }
+          scope.next();
+        };
       }
 
       return {

diff --git a/avBooth/start-screen-directive/start-screen-directive.less b/avBooth/start-screen-directive/start-screen-directive.less
@@ -16,6 +16,41 @@
 **/
 
 [avb-start-screen] {
+  .mandatory-tos-block {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 15px;
+
+    input {
+      display: block;
+      min-height: 20px;
+      min-width: 20px;
+      height: initial;
+      transition: all 0.5s ease;
+      flex-basis: content;
+      outline: 5px auto transparent;
+    }
+
+    label {
+      display: block;
+      font-weight: normal;
+      margin-bottom: 20px;
+      transition: all 0.5s ease;
+      margin-top: 3px;
+    }
+
+    &.error {
+      input {
+        outline-color: @error-primary-color;
+      }
+      label {
+        color: @error-primary-color;
+      }
+    }
+  }
+
   .tos-text {
     padding-bottom: 10px;
   }