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\views\auth\Login.vue` is the Vue component which handles the login functinality. You can easily adapt it to your needs.
It uses the auth store located in `src\store\auth.module.js` and you can find the service file in `src\services\auth.service.js`.

1<div class="container top-0 position-sticky z-index-sticky">
2  <div class="row">
3    <div class="col-12">
4      <navbar
5        is-blur="blur border-radius-lg my-3 py-2 start-0 end-0 mx-4 shadow"
6        btn-background="bg-gradient-success"
7        :dark-mode="true"
8      />
9    </div>
10  </div>
11</div>
12<main class="main-content main-content-bg mt-0">
13  <div
14    class="page-header min-vh-100"
15    style="
16      background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signin-basic.jpg');
17    "
18  >
19    <span class="mask bg-gradient-dark opacity-6"></span>
20    <div class="container">
21      <div class="row justify-content-center">
22        <div class="col-lg-4 col-md-7 mt-2">
23          <div class="card border-0 mb-0">
24            <div class="card-header bg-transparent">
25              <h5 class="text-dark text-center mt-2 mb-3">Sign in</h5>
26              <div class="btn-wrapper text-center">
27                <a
28                  href="javascript:;"
29                  class="btn btn-neutral btn-icon btn-sm mb-0 me-1"
30                >
31                  <img
32                    class="w-30"
33                    src="../../assets/img/logos/github.svg"
34                  />
35                  Github
36                </a>
37                <a
38                  href="javascript:;"
39                  class="btn btn-neutral btn-icon btn-sm mb-0"
40                >
41                  <img
42                    class="w-30"
43                    src="../../assets/img/logos/google.svg"
44                  />
45                  Google
46                </a>
47              </div>
48            </div>
49            <div class="card-body px-lg-5 pt-0">
50              <div class="text-center text-muted mb-4">
51                <small>Or sign in with credentials</small>
52              </div>
53              <form role="form" class="text-start" @submit.prevent="handleLogin(user)">
54                <div class="mb-3">
55                  <argon-input
56                    id="email"
57                    v-model="user.email"
58                    type="email"
59                    placeholder="Email"
60                    aria-label="Email"
61                    :value="user.email"
62                  />
63                  <validation-error :errors="apiValidationErrors.email" />
64                </div>
65                <div class="mb-3">
66                  <argon-input
67                    id="password"
68                    v-model="user.password"
69                    type="password"
70                    placeholder="Password"
71                    aria-label="Password"
72                    :value="user.password"
73                  />
74                </div>
75                <argon-switch id="rememberMe" name="rememberMe">
76                  Remember me
77                </argon-switch>
78
79                <div class="text-center">
80                  <argon-button
81                    color="success"
82                    variant="gradient"
83                    full-width
84                    class="my-4 mb-2"
85                    >Sign in</argon-button
86                  >
87                </div>
88                <div class="mb-2 position-relative text-center">
89                  <p
90                    class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3"
91                  >
92                    or
93                  </p>
94                </div>
95                <div class="text-center">
96                  <router-link :to="{ name: 'Register' }">
97                    <argon-button
98                      type="button"
99                      color="dark"
100                      variant="gradient"
101                      full-width
102                      class="mt-2 mb-4"
103                      >
104                          Sign up
105                      </argon-button>
106                  </router-link>
107                </div>
108              </form>
109              <router-link :to="{ name: 'Forgot Password' }" class="text-sm d-flex justify-content-center">Forgot Password?</router-link>
110            </div>
111          </div>
112        </div>
113      </div>
114    </div>
115  </div>
116</main>

<div class="container top-0 position-sticky z-index-sticky">
  <div class="row">
    <div class="col-12">
      <navbar
        is-blur="blur border-radius-lg my-3 py-2 start-0 end-0 mx-4 shadow"
        btn-background="bg-gradient-success"
        :dark-mode="true"
      />
    </div>
  </div>
</div>
<main class="main-content main-content-bg mt-0">
  <div
    class="page-header min-vh-100"
    style="
      background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signin-basic.jpg');
    "
  >
    <span class="mask bg-gradient-dark opacity-6"></span>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-7 mt-2">
          <div class="card border-0 mb-0">
            <div class="card-header bg-transparent">
              <h5 class="text-dark text-center mt-2 mb-3">Sign in</h5>
              <div class="btn-wrapper text-center">
                <a
                  href="javascript:;"
                  class="btn btn-neutral btn-icon btn-sm mb-0 me-1"
                >
                  <img
                    class="w-30"
                    src="../../assets/img/logos/github.svg"
                  />
                  Github
                </a>
                <a
                  href="javascript:;"
                  class="btn btn-neutral btn-icon btn-sm mb-0"
                >
                  <img
                    class="w-30"
                    src="../../assets/img/logos/google.svg"
                  />
                  Google
                </a>
              </div>
            </div>
            <div class="card-body px-lg-5 pt-0">
              <div class="text-center text-muted mb-4">
                <small>Or sign in with credentials</small>
              </div>
              <form role="form" class="text-start" @submit.prevent="handleLogin(user)">
                <div class="mb-3">
                  <argon-input
                    id="email"
                    v-model="user.email"
                    type="email"
                    placeholder="Email"
                    aria-label="Email"
                    :value="user.email"
                  />
                  <validation-error :errors="apiValidationErrors.email" />
                </div>
                <div class="mb-3">
                  <argon-input
                    id="password"
                    v-model="user.password"
                    type="password"
                    placeholder="Password"
                    aria-label="Password"
                    :value="user.password"
                  />
                </div>
                <argon-switch id="rememberMe" name="rememberMe">
                  Remember me
                </argon-switch>

                <div class="text-center">
                  <argon-button
                    color="success"
                    variant="gradient"
                    full-width
                    class="my-4 mb-2"
                    >Sign in</argon-button
                  >
                </div>
                <div class="mb-2 position-relative text-center">
                  <p
                    class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3"
                  >
                    or
                  </p>
                </div>
                <div class="text-center">
                  <router-link :to="{ name: 'Register' }">
                    <argon-button
                      type="button"
                      color="dark"
                      variant="gradient"
                      full-width
                      class="mt-2 mb-4"
                      >
                          Sign up
                      </argon-button>
                  </router-link>
                </div>
              </form>
              <router-link :to="{ name: 'Forgot Password' }" class="text-sm d-flex justify-content-center">Forgot Password?</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Login Page