LogIn

src/components/user/loginPage.vue

@@ -71,8 +71,13 @@
           </div>
           <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
           <hr />
-          <h5>Trouble signing in?</h5>
-          <div>
+          <div
+            @click="ToggleTrouble()"
+            class="btn cursor: pointer;"
+            style="margin:2px; color: #60CBEB; font-size:110%;"
+          >Trouble signing in?</div>
+          <br />
+          <div v-if="troubleToggle">
             <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
             <div class="row">
               <div class="input-group-prepend">
@@ -82,9 +87,9 @@
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>
             </div>
+            <br />
+            <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
           </div>
-          <div class="form-group row"></div>
-          <button @click="SendMail()" class="btn btn-b-n" type="submit">Submit</button>
         </div>
       </form>
     </div>
@@ -110,6 +115,7 @@ export default {
       text: '',
       showPassword: false,
       email: '',
+      troubleToggle: false,
     };
   },
   computed: {
@@ -117,6 +123,11 @@ export default {
   },
   methods: {
     ...mapActions('authentication', ['login', 'init']),
+    ToggleTrouble() {
+      if (this.troubleToggle) {
+        this.troubleToggle = false;
+      } else this.troubleToggle = true;
+    },
     Login() {
       this.login().then(() => {
         if (this.$store.state.authentication.status === 'error') {