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\signin\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.

<div class="container top-0 position-sticky z-index-sticky">
  <div class="row">
    <div class="col-12">
      <navbar
        is-blur="blur blur-rounded my-3 py-2 start-0 end-0 mx-4 shadow"
        btn-background="bg-gradient-success"
        :dark-mode="true"
      />
    </div>
  </div>
</div>
<main class="mt-0 main-content main-content-bg">
  <section>
    <div class="page-header min-vh-75">
      <div class="container">
        <div class="row">
          <div class="mx-auto col-xl-4 col-lg-5 col-md-6 d-flex flex-column">
            <div class="mt-8 card card-plain">
              <div class="pb-0 card-header text-start">
                <h3 class="font-weight-bolder text-success text-gradient text-center">
                  Welcome back
                </h3>
                <br />
                <div class="text-center">
                  <p class="mb-1">You can log in with 3 user types:</p>
                  <p class="mb-1" style="font-size: 14px">
                    Username <b>admin@jsonapi.com</b> Password <b>secret</b>
                  </p>
                  <p class="mb-1" style="font-size: 14px">
                    Username <b>creator@jsonapi.com</b> Password <b>secret</b>
                  </p>
                  <p class="mb-1" style="font-size: 14px">
                    Username <b>member@jsonapi.com</b> Password <b>secret</b>
                  </p>
                </div>
              </div>
              <div class="card-body pb-3">
                <Form
                  role="form"
                  class="text-start"
                  :validation-schema="schema"
                  @submit="handleLogin"
                >
                  <label for="email">Email</label>
                  <soft-field
                    id="email"
                    v-model="user.email"
                    type="email"
                    placeholder="Email"
                    name="email"
                  />

                  <label>Password</label>
                  <soft-field
                    id="password"
                    v-model="user.password"
                    type="password"
                    placeholder="Password"
                    name="password"
                  />

                  <soft-switch id="rememberMe" name="rememberMe" checked>
                    Remember me
                  </soft-switch>

                  <div class="text-center">
                    <soft-button
                      class="my-4 mb-2"
                      variant="gradient"
                      color="success"
                      full-width
                      :is-disabled="loading ? true : false"
                    >
                      <span
                        v-if="loading"
                        class="spinner-border spinner-border-sm"
                      ></span>
                      <span v-else>Sign in</span>
                    </soft-button>
                  </div>
                </Form>
              </div>
              <div class="px-1 pt-0 pb-3 text-center card-footer px-lg-2">
                <p class="mx-auto mb-0 text-sm">
                  Don't have an account?
                  <router-link
                    :to="{ name: 'Register' }"
                    class="text-success text-gradient font-weight-bold"
                    >Sign up</router-link
                  >
                </p>
              </div>
              <div class="px-1 pt-0 pb-3 text-center card-footer px-lg-2">
                <p class="mx-auto mb-4 text-sm">
                  Forgot your password?
                  <router-link
                    :to="{ name: 'SendEmail' }"
                    class="text-success text-gradient font-weight-bold"
                    >Recover</router-link
                  >
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="top-0 oblique position-absolute h-100 d-md-block d-none me-n8">
              <div
                class="bg-cover oblique-image position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6"
                :style="{
                  backgroundImage:
                    'url(' + require('@/assets/img/curved-images/curved9.jpg') + ')',
                }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

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 blur-rounded 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="mt-0 main-content main-content-bg">
13  <section>
14    <div class="page-header min-vh-75">
15      <div class="container">
16        <div class="row">
17          <div class="mx-auto col-xl-4 col-lg-5 col-md-6 d-flex flex-column">
18            <div class="mt-8 card card-plain">
19              <div class="pb-0 card-header text-start">
20                <h3 class="font-weight-bolder text-success text-gradient text-center">
21                  Welcome back
22                </h3>
23                <br />
24                <div class="text-center">
25                  <p class="mb-1">You can log in with 3 user types:</p>
26                  <p class="mb-1" style="font-size: 14px">
27                    Username <b>admin@jsonapi.com</b> Password <b>secret</b>
28                  </p>
29                  <p class="mb-1" style="font-size: 14px">
30                    Username <b>creator@jsonapi.com</b> Password <b>secret</b>
31                  </p>
32                  <p class="mb-1" style="font-size: 14px">
33                    Username <b>member@jsonapi.com</b> Password <b>secret</b>
34                  </p>
35                </div>
36              </div>
37              <div class="card-body pb-3">
38                <Form
39                  role="form"
40                  class="text-start"
41                  :validation-schema="schema"
42                  @submit="handleLogin"
43                >
44                  <label for="email">Email</label>
45                  <soft-field
46                    id="email"
47                    v-model="user.email"
48                    type="email"
49                    placeholder="Email"
50                    name="email"
51                  />
52
53                  <label>Password</label>
54                  <soft-field
55                    id="password"
56                    v-model="user.password"
57                    type="password"
58                    placeholder="Password"
59                    name="password"
60                  />
61
62                  <soft-switch id="rememberMe" name="rememberMe" checked>
63                    Remember me
64                  </soft-switch>
65
66                  <div class="text-center">
67                    <soft-button
68                      class="my-4 mb-2"
69                      variant="gradient"
70                      color="success"
71                      full-width
72                      :is-disabled="loading ? true : false"
73                    >
74                      <span
75                        v-if="loading"
76                        class="spinner-border spinner-border-sm"
77                      ></span>
78                      <span v-else>Sign in</span>
79                    </soft-button>
80                  </div>
81                </Form>
82              </div>
83              <div class="px-1 pt-0 pb-3 text-center card-footer px-lg-2">
84                <p class="mx-auto mb-0 text-sm">
85                  Don't have an account?
86                  <router-link
87                    :to="{ name: 'Register' }"
88                    class="text-success text-gradient font-weight-bold"
89                    >Sign up</router-link
90                  >
91                </p>
92              </div>
93              <div class="px-1 pt-0 pb-3 text-center card-footer px-lg-2">
94                <p class="mx-auto mb-4 text-sm">
95                  Forgot your password?
96                  <router-link
97                    :to="{ name: 'SendEmail' }"
98                    class="text-success text-gradient font-weight-bold"
99                    >Recover</router-link
100                  >
101                </p>
102              </div>
103            </div>
104          </div>
105          <div class="col-md-6">
106            <div class="top-0 oblique position-absolute h-100 d-md-block d-none me-n8">
107              <div
108                class="bg-cover oblique-image position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6"
109                :style="{
110                  backgroundImage:
111                    'url(' + require('@/assets/img/curved-images/curved9.jpg') + ')',
112                }"
113              ></div>
114            </div>
115          </div>
116        </div>
117      </div>
118    </div>
119  </section>
120</main>
121
122

Login

Login component