Authentication

To start testing the Pro theme, register as a user or log in using one of the default users:

admin type - [email protected] with the password secret
creator type - [email protected] with the password secret
member type - [email protected] with the password secret

In addition to the features included in the free theme, the Pro theme also has a role management example with an updated user management, as well as tag management, category management and item management examples. Keep in mind that all the features can be viewed once you log in using the credentials provided above or by registering your own user.

Each role has a different privilege level and can perform a certain number of actions according to this level.

A member type user can log in, update his profile and view a list of added items. A creator type user can log in, update his profile and perform actions on categories, tags and items. A admin type user can log in, update his profile and perform actions on categories, tags, items, roles and users.

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 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 stores\AuthStore.js.

<form role="form" class="text-start" @submit.prevent="submitForm">
    <div class="mb-3">
        <ArgonInput name="email" id="email" type="text" placeholder="Email" aria-label="Email" v-model="formData.email"
            :error="isError('email', errorsRef)" :errorMessage="getErrorMessage('email', errorsRef)" />
    </div>
    <div class="mb-3">
        <ArgonInput name="password" id="password" type="password" placeholder="Password" aria-label="Password"
            v-model="formData.password" :error="isError('password', errorsRef)"
            :errorMessage="getErrorMessage('password', errorsRef)" />
    </div>
    <ArgonSwitch id="rememberMe" name="rememberMe">
        Remember me
    </ArgonSwitch>
    <div class="text-center">
        <ArgonButton type="submit" color="success" variant="gradient" full-width class="my-4 mb-2">Sign in</ArgonButton>
    </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">
        <ArgonButton color="dark" variant="gradient" full-width class="mt-2 mb-4"
            @click.prevent="router.push({ path: '/register' })">Register</ArgonButton>
    </div>
</form>

1<form role="form" class="text-start" @submit.prevent="submitForm">
2    <div class="mb-3">
3        <ArgonInput name="email" id="email" type="text" placeholder="Email" aria-label="Email" v-model="formData.email"
4            :error="isError('email', errorsRef)" :errorMessage="getErrorMessage('email', errorsRef)" />
5    </div>
6    <div class="mb-3">
7        <ArgonInput name="password" id="password" type="password" placeholder="Password" aria-label="Password"
8            v-model="formData.password" :error="isError('password', errorsRef)"
9            :errorMessage="getErrorMessage('password', errorsRef)" />
10    </div>
11    <ArgonSwitch id="rememberMe" name="rememberMe">
12        Remember me
13    </ArgonSwitch>
14    <div class="text-center">
15        <ArgonButton type="submit" color="success" variant="gradient" full-width class="my-4 mb-2">Sign in</ArgonButton>
16    </div>
17    <div class="mb-2 position-relative text-center">
18        <p class="text-sm font-weight-bold mb-2 text-secondary text-border d-inline z-index-2 bg-white px-3">
19            or
20        </p>
21    </div>
22    <div class="text-center">
23        <ArgonButton color="dark" variant="gradient" full-width class="mt-2 mb-4"
24            @click.prevent="router.push({ path: '/register' })">Register</ArgonButton>
25    </div>
26</form>

Register

The register functionality is fully implemented in our theme helping you to start your project in no time. To register a new user you just have to add /signup in the URL or click on signup link from login page and fill the register form with user details.

The pages\signup.vue is the Vue component which handles the register functionality. You can easily extend it to your needs.

It uses the auth store located in stores\AuthStore.js.

Register Component

<form role="form" @submit.prevent="submitForm">
  <ArgonInput name="name" id="name" type="text" placeholder="Name" aria-label="Name" v-model="formData.name"
    :error="isError('name', errorsRef)" :errorMessage="getErrorMessage('name', errorsRef)" />
  <ArgonInput name="email" id="email" type="text" placeholder="Email" aria-label="Email" v-model="formData.email"
    :error="isError('email', errorsRef)" :errorMessage="getErrorMessage('email', errorsRef)" />
  <ArgonInput name="password" id="password" type="password" placeholder="Password" aria-label="Password"
    v-model="formData.password" :error="isError('password', errorsRef)"
    :errorMessage="getErrorMessage('password', errorsRef)" />
  <ArgonInput name="passwordConfirm" id="passwordConfirm" type="password" placeholder="Confirm Password"
    aria-label="Password" v-model="formData.passwordConfirm" :error="isError('passwordConfirm', errorsRef)"
    :errorMessage="getErrorMessage('passwordConfirm', errorsRef)" />
  <ArgonCheckbox id="terms" name="terms" v-model:checked="formData.isChecked">
    <label class="form-check-label" for="terms">
      I agree the
      <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
    </label>
  </ArgonCheckbox>
  <span v-if="isError('terms', errorsRef)" style="color: #fd5c70; margin-left: 5px; font-size: 12px">
    {{ getErrorMessage('terms', errorsRef) }}
  </span>
  <div class="text-center">
    <ArgonButton type="submit" full-width color="dark" variant="gradient" class="my-4 mb-2">Register
    </ArgonButton>
  </div>

  <p class="text-sm mt-3 mb-0">
    Already have an account?
    <NuxtLink to="/" class="text-dark font-weight-bolder">
      Sign in
    </NuxtLink>
  </p>
</form>

1<form role="form" @submit.prevent="submitForm">
2  <ArgonInput name="name" id="name" type="text" placeholder="Name" aria-label="Name" v-model="formData.name"
3    :error="isError('name', errorsRef)" :errorMessage="getErrorMessage('name', errorsRef)" />
4  <ArgonInput name="email" id="email" type="text" placeholder="Email" aria-label="Email" v-model="formData.email"
5    :error="isError('email', errorsRef)" :errorMessage="getErrorMessage('email', errorsRef)" />
6  <ArgonInput name="password" id="password" type="password" placeholder="Password" aria-label="Password"
7    v-model="formData.password" :error="isError('password', errorsRef)"
8    :errorMessage="getErrorMessage('password', errorsRef)" />
9  <ArgonInput name="passwordConfirm" id="passwordConfirm" type="password" placeholder="Confirm Password"
10    aria-label="Password" v-model="formData.passwordConfirm" :error="isError('passwordConfirm', errorsRef)"
11    :errorMessage="getErrorMessage('passwordConfirm', errorsRef)" />
12  <ArgonCheckbox id="terms" name="terms" v-model:checked="formData.isChecked">
13    <label class="form-check-label" for="terms">
14      I agree the
15      <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
16    </label>
17  </ArgonCheckbox>
18  <span v-if="isError('terms', errorsRef)" style="color: #fd5c70; margin-left: 5px; font-size: 12px">
19    {{ getErrorMessage('terms', errorsRef) }}
20  </span>
21  <div class="text-center">
22    <ArgonButton type="submit" full-width color="dark" variant="gradient" class="my-4 mb-2">Register
23    </ArgonButton>
24  </div>
25
26  <p class="text-sm mt-3 mb-0">
27    Already have an account?
28    <NuxtLink to="/" class="text-dark font-weight-bolder">
29      Sign in
30    </NuxtLink>
31  </p>
32</form>

Authentication

Login

Login Component

Register

Register Component