# Login

The login functionality is fully implemented in our theme helping you to start your project in no time. To login into dashboard you just have to add /login in the URL and fill the login form with one of the credentials (user: [email protected], [email protected], [email protected] and password: secret).

The src\pages\Pages\Login.vue is the Vue component which handles the login functionality. You can easily adapt it to your needs.

It uses the auth store located in src\store\modules\auth.js.

# Login Card

<div class="container mt-3">
  <div class="col-lg-4 col-md-6 ml-auto mr-auto">
    <form @submit.prevent="handleSubmit()">
      <card class="card-login card-white">
        <template slot="header">
          <img src="/img/card-primary.png" alt="" />
          <h1 class="card-title">Log in</h1>
        </template>

        <div>
          <ValidationProvider
            name="email"
            rules="required|email"
            v-slot="{ passed, failed, errors }"
          >
          <base-input
            required
            v-model="email"
            type="email"
            placeholder="Email"
            addon-left-icon="tim-icons icon-email-85"
            :error="errors[0]"
            :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
          </base-input>
          <validation-error :errors="apiValidationErrors.email" />
          </ValidationProvider>

          <ValidationProvider
            name="password"
            rules="required|min:5"
            v-slot="{ passed, failed, errors }"
          >
          <base-input
            required
            v-model="password"
            placeholder="Password"
            addon-left-icon="tim-icons icon-lock-circle"
            type="password"
            :error="errors[0]"
            :class="[{ 'has-success': passed }, { 'has-danger': failed }]">
          </base-input>
          <validation-error :errors="apiValidationErrors.password" />
        </ValidationProvider>
        </div>

        <div slot="footer">
          <base-button native-type="submit" type="primary" class="mb-3" size="lg" block>
            Get Started
          </base-button>
          <div class="pull-left">
            <h6>
              <router-link class="link footer-link" to="/register">
                Create Account
              </router-link>
            </h6>
          </div>

          <div class="pull-right">
            <h6><a href="/password/reset" class="link footer-link">Forgot Password?</a></h6>
          </div>
        </div>
      </card>
    </form>
    <!-- </ValidationObserver> -->
  </div>
</div>