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 register link from login page and fill the register form with user details.

The src\views\Signup.vue is the Vue component which handles the register functinality. You can easily extend it to your needs.

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

Register Examples

<div class="card mt-8">
    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
        <div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1 text-center py-4">
            <h4 class="font-weight-bolder text-white mt-1">
                Join us today
            </h4>
            <p class="mb-1 text-white text-sm">
                Enter your email and password to register
            </p>
        </div>
    </div>
    <div class="card-body pb-3">
        <Form role="form" :validation-schema="schema" @submit="handleSignup">
            <div class="mb-3">
                <material-input-field id="name" v-model:value="user.name" label="Name"
                    name="name" />
            </div>
            <div class="mb-3">
                <material-input-field id="email" v-model:value="user.email" type="email"
                    label="Email" name="email" />
            </div>
            <div class="mb-3">
                <material-input-field id="password" v-model:value="user.password" type="password"
                    label="Password" name="password" />
            </div>
            <div class="mb-3">
                <material-input-field id="confirmPassword" v-model:value="user.confirmPassword"
                    type="password" label="Confirm Password" name="confirmPassword" />
            </div>
            <material-checkbox-field id="flexCheckDefault" v-model:checked="termsChecked"
                name="checkbox">
                I agree the
                <a href="../../../pages/privacy.html" class="text-dark font-weight-bolder">Terms and
                    Conditions</a>
            </material-checkbox-field>
            <div class="text-center">
                <material-button color="success" variant="gradient" full-width
                    class="mt-4 mb-0">Sign up</material-button>
            </div>
        </Form>
    </div>
    <div class="card-footer text-center pt-0 px-sm-4 px-1">
        <p class="mb-4 mx-auto">
            Already have an account?
            <router-link :to="{ name: 'Login' }"
                class="text-success text-gradient font-weight-bold">Sign in</router-link>
        </p>
    </div>
</div>

1<div class="card mt-8">
2    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
3        <div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1 text-center py-4">
4            <h4 class="font-weight-bolder text-white mt-1">
5                Join us today
6            </h4>
7            <p class="mb-1 text-white text-sm">
8                Enter your email and password to register
9            </p>
10        </div>
11    </div>
12    <div class="card-body pb-3">
13        <Form role="form" :validation-schema="schema" @submit="handleSignup">
14            <div class="mb-3">
15                <material-input-field id="name" v-model:value="user.name" label="Name"
16                    name="name" />
17            </div>
18            <div class="mb-3">
19                <material-input-field id="email" v-model:value="user.email" type="email"
20                    label="Email" name="email" />
21            </div>
22            <div class="mb-3">
23                <material-input-field id="password" v-model:value="user.password" type="password"
24                    label="Password" name="password" />
25            </div>
26            <div class="mb-3">
27                <material-input-field id="confirmPassword" v-model:value="user.confirmPassword"
28                    type="password" label="Confirm Password" name="confirmPassword" />
29            </div>
30            <material-checkbox-field id="flexCheckDefault" v-model:checked="termsChecked"
31                name="checkbox">
32                I agree the
33                <a href="../../../pages/privacy.html" class="text-dark font-weight-bolder">Terms and
34                    Conditions</a>
35            </material-checkbox-field>
36            <div class="text-center">
37                <material-button color="success" variant="gradient" full-width
38                    class="mt-4 mb-0">Sign up</material-button>
39            </div>
40        </Form>
41    </div>
42    <div class="card-footer text-center pt-0 px-sm-4 px-1">
43        <p class="mb-4 mx-auto">
44            Already have an account?
45            <router-link :to="{ name: 'Login' }"
46                class="text-success text-gradient font-weight-bold">Sign in</router-link>
47        </p>
48    </div>
49</div>