Alert should only display when login with CAC button is clicked

js/components/fullpagenotice.js

@@ -1,33 +1,15 @@
-import checkboxinput from './checkbox_input'
-import FormMixin from '../mixins/form'
-
 export default {
   name: 'fullpagenotice',
 
-  mixins: [FormMixin],
-
-  components: {
-    checkboxinput,
-  },
-
   data: function() {
     return {
-      agree: false,
-      visible: true,
+      visible: false,
     }
   },
 
-  mounted: function() {
-    this.$root.$on('field-change', this.handleValidChange)
-  },
-
   methods: {
-    handleValidChange: function(event) {
-      this.agree = event.value
-    },
-
-    agreeToTermsClick: function() {
-      this.visible = false
+    displayNotice: function() {
+      this.visible = true
     },
   },
 }

styles/components/_full_page_notice.scss

@@ -6,6 +6,7 @@
   padding: $gap*4 0;
   position: fixed;
   right: 0;
+  text-align: left;
   top: 0;
   z-index: 999;
 

styles/sections/_login.scss

@@ -19,6 +19,10 @@
         max-width: 25rem;
         margin: ($gap * 2) auto;
       }
+
+      .login-banner__button {
+        margin-right: 0;
+      }
     }
   }
 }

templates/fragments/dod_notice.html

@@ -1,5 +1,10 @@
 <fullpagenotice inline-template key="notice">
-  <div class="full-page-notice" v-show="visible">
+  <div>
+    <div class="usa-button usa-button-primary usa-button-big login-banner__button" v-on:click="displayNotice()">
+      {{ "login.login_button" | translate }}
+    </div>
+
+    <div class="full-page-notice" v-if="visible" v-cloak>
       <div class='usa-alert usa-alert-info'>
         <div class='usa-alert-body'>
           <h3>You are accessing a U.S. Government (USG) Information System (IS) that is provided for USG-authorized use only.</h3>
@@ -18,24 +23,9 @@
             <li>Notwithstanding the above, using this IS does not constitute consent to PM, LE or CI investigative searching or monitoring of the content of privileged communications, or work product, related to personal representation or services by attorneys, psychotherapists, or clergy, and their assistants. Such communications and work product are private and confidential. See User Agreement for details.</li>
           </ul>
 
-        <checkboxinput inline-template key="agree">
-          <div class="usa-input">
-            <fieldset data-ally-disabled="true" v-on:change="onInput">
-              <legend>
-                <input id="abc" type="checkbox" name="abc" value="y" />
-                <label for="abc">
-                  I've read and consent to the terms in the IS user agreement
-                </label>
-              </legend>
-            </fieldset>
-          </div>
-        </checkboxinput>
-
-        <div
-          class="usa-button usa-button-primary float-right"
-          v-on:click="agreeToTermsClick"
-          v-bind:class="{ 'usa-button-disabled': !agree }">
+          <a href='{{ redirect_url }}' class="usa-button usa-button-primary float-right">
             {{ "common.continue" | translate }}
+          </a>
         </div>
       </div>
     </div>

templates/login.html

@@ -6,8 +6,6 @@
 
 {% block content %}
 
-  {% include "fragments/dod_notice.html" %}
-
   <div class='global-layout login-layout'>
     <div class='global-panel-container login-container'>
       <div class='col'>
@@ -23,11 +21,7 @@
 
           <img class="login-banner__logo" src="{{url_for('static', filename='img/ccpo-logo.svg')}}" alt="{{ "login.ccpo_logo_alt_text" | translate }}">
 
-          <a class="usa-button usa-button-big login-banner__button" href='{{ redirect_url }}'>
-            <span>
-              {{ "login.login_button" | translate }}
-            </span>
-          </a>
+          {% include "fragments/dod_notice.html" %}
         </div>
 
         {% with %}