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 /register in the URL or click on register link from login page and fill the register form with user details.

The src\views\auth\signup\Register.vue is the Vue component which handles the login functinality. You can easily extend it to your needs.

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

Register Component

<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-5 card card-plain">
              <div class="card-header pb-0 text-left">
                <h3 class="font-weight-bolder text-success text-gradient pt-5">
                  Join us today
                </h3>
                <p class="mb-0">Enter your email and password to register</p>
              </div>
              <div class="card-body pb-3">
                <Form
                  role="form"
                  class="text-start"
                  :validation-schema="schema"
                  @submit="handleRegister"
                >
                  <div>
                    <label>Username</label>
                    <soft-field
                      id="name"
                      v-model="user.name"
                      type="text"
                      placeholder="Name"
                      name="name"
                    />
                    <label>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"
                    />
                    <label>Re-type Password</label>
                    <soft-field
                      id="password_confirmation"
                      v-model="user.password_confirmation"
                      type="password"
                      placeholder="Re-type Password"
                      name="password_confirmation"
                    />
                    <soft-check-model
                      id="agreed"
                      v-model="agreed"
                      name="agreed"
                      class="font-weight-light terms"
                    >
                      I agree with the
                      <a href="#" class="text-dark font-weight-bolder"
                        >Terms and Conditions</a
                      >
                    </soft-check-model>
                    <div>
                      <span
                        v-if="showError"
                        role="alert"
                        class="error-feedback text-xs text-danger"
                        >Please accept the Terms and Conditions!</span
                      >
                      <sp v-else> &nbsp;</sp>
                    </div>
                    <div class="text-center">
                      <soft-button
                        color="success"
                        variant="gradient"
                        full-width
                        class="mt-2 mb-2"
                        :is-disabled="loading ? true : false"
                        ><span
                          v-if="loading"
                          class="spinner-border spinner-border-sm"
                        ></span>
                        <span v-else>Sign up</span></soft-button
                      >
                    </div>
                  </div>
                </Form>
              </div>

              <div class="card-footer text-center pt-0 px-sm-4 px-1">
                <p class="mb-4 mx-auto">
                  <span>Already have an account?</span>
                  <router-link
                    :to="{ name: 'Login' }"
                    class="text-success text-gradient font-weight-bold"
                  >
                    Sign in
                  </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/curved11.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-5 card card-plain">
19              <div class="card-header pb-0 text-left">
20                <h3 class="font-weight-bolder text-success text-gradient pt-5">
21                  Join us today
22                </h3>
23                <p class="mb-0">Enter your email and password to register</p>
24              </div>
25              <div class="card-body pb-3">
26                <Form
27                  role="form"
28                  class="text-start"
29                  :validation-schema="schema"
30                  @submit="handleRegister"
31                >
32                  <div>
33                    <label>Username</label>
34                    <soft-field
35                      id="name"
36                      v-model="user.name"
37                      type="text"
38                      placeholder="Name"
39                      name="name"
40                    />
41                    <label>Email</label>
42                    <soft-field
43                      id="email"
44                      v-model="user.email"
45                      type="email"
46                      placeholder="Email"
47                      name="email"
48                    />
49                    <label>Password</label>
50                    <soft-field
51                      id="password"
52                      v-model="user.password"
53                      type="password"
54                      placeholder="Password"
55                      name="password"
56                    />
57                    <label>Re-type Password</label>
58                    <soft-field
59                      id="password_confirmation"
60                      v-model="user.password_confirmation"
61                      type="password"
62                      placeholder="Re-type Password"
63                      name="password_confirmation"
64                    />
65                    <soft-check-model
66                      id="agreed"
67                      v-model="agreed"
68                      name="agreed"
69                      class="font-weight-light terms"
70                    >
71                      I agree with the
72                      <a href="#" class="text-dark font-weight-bolder"
73                        >Terms and Conditions</a
74                      >
75                    </soft-check-model>
76                    <div>
77                      <span
78                        v-if="showError"
79                        role="alert"
80                        class="error-feedback text-xs text-danger"
81                        >Please accept the Terms and Conditions!</span
82                      >
83                      <sp v-else> &nbsp;</sp>
84                    </div>
85                    <div class="text-center">
86                      <soft-button
87                        color="success"
88                        variant="gradient"
89                        full-width
90                        class="mt-2 mb-2"
91                        :is-disabled="loading ? true : false"
92                        ><span
93                          v-if="loading"
94                          class="spinner-border spinner-border-sm"
95                        ></span>
96                        <span v-else>Sign up</span></soft-button
97                      >
98                    </div>
99                  </div>
100                </Form>
101              </div>
102
103              <div class="card-footer text-center pt-0 px-sm-4 px-1">
104                <p class="mb-4 mx-auto">
105                  <span>Already have an account?</span>
106                  <router-link
107                    :to="{ name: 'Login' }"
108                    class="text-success text-gradient font-weight-bold"
109                  >
110                    Sign in
111                  </router-link>
112                </p>
113              </div>
114            </div>
115          </div>
116          <div class="col-md-6">
117            <div
118              class="top-0 oblique position-absolute h-100 d-md-block d-none me-n8"
119            >
120              <div
121                class="bg-cover oblique-image position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6"
122                :style="{
123                  backgroundImage:
124                    'url(' +
125                    require('@/assets/img/curved-images/curved11.jpg') +
126                    ')',
127                }"
128              ></div>
129            </div>
130          </div>
131        </div>
132      </div>
133    </div>
134  </section>
135</main>
136
137