monstajamss
3 months ago
435
7
Vue

Hide Modal Box After User Login

Posted 3 months ago by monstajamss

When user click log in button on my navigation a modal box pop up after user log in the modal box does not disappear.

How can i hide remove the modal box when users click log in

Home.vue

<div id="myModal1" class="modal  centered-modal" role="dialog">
      <div class="modal-dialog login_dialog">
        <div class="modal-content">
          <button type="button" class="close" data-dismiss="modal">
            <i class="fa_icon form_close"></i>
          </button>
          <div class="modal-body">
            <div class="ms_register_img">
              <img src="images/register_img.png" alt="" class="img-fluid" />
            </div>
            <div class="ms_register_form">
              <h2>Log In</h2>
              <form @submit.prevent="submit">
                <div class="form-group">
                  <input type="email" placeholder="Enter Your Email" class="form-control" v-model="form.email">
                  <span class="form_icon">
                  <i class="fa_icon form-envelope" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="form-group">
                  <input type="password" placeholder="Enter Your Password" class="form-control" v-model="form.password">
                  <span class="form_icon">
                  <i class="fa_icon form-lock" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="form-group">
                  <button class="reg_ms_btn" type="submit">Log In</button>
                </div>
              </form>   
              <div class="remember_checkbox">
                <label>Keep me signed in
                  <input type="checkbox">
                  <span class="checkmark"></span>
                </label>
              </div>
              
              <div class="popup_forgot">
                <a href="#">Forgot Password ?</a>
              </div>
              <p>Don't Have An Account? <a href="#myModal" data-toggle="modal" class="ms_modal1 hideCurrentModel">register here</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>

<script>
  import { mapActions } from 'vuex'
  export default {
    name: 'Home',
    components: {
      //
    },

    data () {
      return {
        form: {
          email: '',
          password: '',
        }
      }
    },

    methods: {
      ...mapActions({
        signIn: 'auth/signIn'
      }),

      submit () {
        this.signIn(this.form)
      }
    }
  }
</script>

TheNavigation.vue

<div class="topnav-right">
            <template v-if="authenticated">
                <div class="reg-btn">
                    <div class="dropdown">
                        <button class="btn btn-material dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="material-icons">account_circle</span>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <router-link :to="{name: 'profile'}" class="dropdown-item">
                                <i class="material-icons">account_circle</i>
                                {{ user.name }}
                            </router-link>
                            <router-link :to="{name: 'settings'}" class="dropdown-item">
                                <i class="material-icons">settings</i>
                                Settings
                            </router-link>
                        <a class="dropdown-item" href="#"><i class="material-icons">power_settings_new</i> Log Out</a>
                        <li class="divider" role="seprator"></li>
                        </div>
                    </div>
                </div>
                <div class="reg-btn">
                    <router-link :to="{name: 'upload'}"  type="button" class="btn btn-default btn-reg">
                        Upload
                    </router-link>
                </div>
            </template>
            <template v-else>
                <div class="login-btn">
                    <button type="button" class="btn btn-default btn-login" data-toggle="modal" data-target="#myModal1">Log in</button>
                </div>  
                <div class="reg-btn">
                    <button type="button" class="btn btn-default btn-reg" data-toggle="modal" data-target="#myModal">Sign Up</button>
                </div>
            </template>
		</div>

<script>
    import { mapGetters } from 'vuex'
    export default {
        computed: {
            ...mapGetters({
                authenticated: 'auth/authenticated',
                user: 'auth/user',
            })
        },
        
    }
</script>

Auth.js

actions: {
    async signIn ({ dispatch }, credentials) {
        let response = await axios.post('auth/signin', credentials)

        dispatch('attempt', response.data.token)
    },

Please sign in or create an account to participate in this conversation.