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