User Management

The theme comes with an out of the box user management option. To access this option, click the "Examples/Users" link in the left sidebar or add /examples/users/list to the URL. The first thing you will see is a list of existing users. You can add new ones by clicking the "Add user" button (above the table on the right). On the Add user page, you will find a form which allows you to fill out the user`s name, email, role and password.

The store used for role functionality is found in src\store\user.module.js

You can find the compoments for role functionality in src\views\examples\Users folder.

Once you add more users, the list will grow and for every user you will have edit and delete options (access these options by clicking "Edit button" that appears at the end of every row).

Users Component

<div class="py-4 container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="pb-0 card-header">
          <div class="d-lg-flex">
            <div>
              <h5 class="mb-0">Users List</h5>
            </div>
            <div class="my-auto mt-4 ms-auto mt-lg-0">
              <div class="my-auto ms-auto">
                <a href="./new" class="mb-0 btn bg-gradient-success btn-sm"
                  >+&nbsp; New User</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="px-0 pb-0 card-body">
          <div class="table-responsive">
            <table id="users-list" ref="usersList" class="table table-flush">
              <thead class="thead-light">
                <tr>
                  <th data-sortable="false">Picture</th>
                  <th title="name">Name</th>
                  <th title="email">Email</th>
                  <th title="roles.name">Role</th>
                  <th title="created_at">Created At</th>
                  <th data-sortable="false">Action</th>
                </tr>
              </thead>
              <tbody class="text-sm">
              </tbody>
              <tfoot>
                <tr>
                  <th>Picture</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Role</th>
                  <th>Created At</th>
                  <th>Action</th>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
        <div
          class="d-flex justify-content-center justify-content-sm-between flex-wrap"
        >
          <div class="ms-3">
            <p>
              Showing {{ pagination?.from }} to {{ pagination?.to }} of
              {{ pagination?.total }} entries
            </p>
          </div>
          <BasePagination
            class="pagination-success pagination-md me-3"
            :per-page="pagination?.perPage"
            :value="pagination?.currentPage"
            :total="pagination?.total"
            @click="getDataFromPage($event)"
          />
        </div>
      </div>
    </div>
  </div>
</div>

1<div class="py-4 container-fluid">
2  <div class="row">
3    <div class="col-12">
4      <div class="card">
5        <div class="pb-0 card-header">
6          <div class="d-lg-flex">
7            <div>
8              <h5 class="mb-0">Users List</h5>
9            </div>
10            <div class="my-auto mt-4 ms-auto mt-lg-0">
11              <div class="my-auto ms-auto">
12                <a href="./new" class="mb-0 btn bg-gradient-success btn-sm"
13                  >+&nbsp; New User</a
14                >
15              </div>
16            </div>
17          </div>
18        </div>
19        <div class="px-0 pb-0 card-body">
20          <div class="table-responsive">
21            <table id="users-list" ref="usersList" class="table table-flush">
22              <thead class="thead-light">
23                <tr>
24                  <th data-sortable="false">Picture</th>
25                  <th title="name">Name</th>
26                  <th title="email">Email</th>
27                  <th title="roles.name">Role</th>
28                  <th title="created_at">Created At</th>
29                  <th data-sortable="false">Action</th>
30                </tr>
31              </thead>
32              <tbody class="text-sm">
33              </tbody>
34              <tfoot>
35                <tr>
36                  <th>Picture</th>
37                  <th>Name</th>
38                  <th>Email</th>
39                  <th>Role</th>
40                  <th>Created At</th>
41                  <th>Action</th>
42                </tr>
43              </tfoot>
44            </table>
45          </div>
46        </div>
47        <div
48          class="d-flex justify-content-center justify-content-sm-between flex-wrap"
49        >
50          <div class="ms-3">
51            <p>
52              Showing {{ pagination?.from }} to {{ pagination?.to }} of
53              {{ pagination?.total }} entries
54            </p>
55          </div>
56          <BasePagination
57            class="pagination-success pagination-md me-3"
58            :per-page="pagination?.perPage"
59            :value="pagination?.currentPage"
60            :total="pagination?.total"
61            @click="getDataFromPage($event)"
62          />
63        </div>
64      </div>
65    </div>
66  </div>
67</div>
68

Edit User

<div class="py-4 container-fluid">
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="pb-0 card-header">
        <div class="d-lg-flex">
          <div>
            <h5 class="mb-0">Edit user</h5>
          </div>
          <div class="my-auto mt-4 ms-auto mt-lg-0">
            <div class="my-auto ms-auto">
              <a href="../list" class="mb-0 btn bg-gradient-success btn-sm"
                >&nbsp; Back to list</a
              >
            </div>
          </div>
        </div>
      </div>

      <div class="card-body">
        <label class="form-label mt-2 row mt-4">Profile picture</label>
        <img
          :src="preview"
          alt="placeholder"
          width="200"
          height="200"
          class="mb-3"
          style="border-radius: 10px; border: 1px solid black"
        />
        <soft-image-input id="pfp" @added-image="addedImage" />
        <validation-error :errors="apiValidationErrors.profile_image" />

        <label class="form-label mt-2 row mt-4">Name</label>

        <soft-model-input
          id="name"
          v-model="user.name"
          type="text"
          placeholder="Your Name"
        />
        <validation-error :errors="apiValidationErrors.name" />

        <label class="form-label mt-2 row mt-4">Email</label>
        <soft-model-input
          id="email"
          v-model="user.email"
          type="text"
          placeholder="Email"
        />
        <validation-error :errors="apiValidationErrors.email" />

        <label class="form-label mt-2 row mt-4">Role</label>
        <select
          id="choices-roles"
          v-model="getRole"
          class="form-control"
          name="choices-roles"
        ></select>
        <validation-error :errors="apiValidationErrors.roles" />

        <label class="form-label mt-2 row mt-4">Password</label>
        <soft-model-input
          id="password"
          v-model="user.password"
          type="password"
          placeholder="Password"
        />
        <validation-error :errors="apiValidationErrors.password" />

        <label class="form-label mt-2 row mt-4">Confirm Password</label>
        <soft-model-input
          id="password_confirmation"
          v-model="user.password_confirmation"
          type="password"
          placeholder="Confirm Password"
        />

        <soft-button
          color="dark"
          variant="gradient"
          class="float-end mt-4 mb-0"
          size="sm"
          :is-disabled="loading ? true : false"
          @click="editUser"
          ><span v-if="loading" class="spinner-border spinner-border-sm"></span>
          <span v-else>Edit User</span></soft-button
        >
      </div>
    </div>
  </div>
</div>
</div>

1<div class="py-4 container-fluid">
2<div class="row">
3  <div class="col-12">
4    <div class="card">
5      <div class="pb-0 card-header">
6        <div class="d-lg-flex">
7          <div>
8            <h5 class="mb-0">Edit user</h5>
9          </div>
10          <div class="my-auto mt-4 ms-auto mt-lg-0">
11            <div class="my-auto ms-auto">
12              <a href="../list" class="mb-0 btn bg-gradient-success btn-sm"
13                >&nbsp; Back to list</a
14              >
15            </div>
16          </div>
17        </div>
18      </div>
19
20      <div class="card-body">
21        <label class="form-label mt-2 row mt-4">Profile picture</label>
22        <img
23          :src="preview"
24          alt="placeholder"
25          width="200"
26          height="200"
27          class="mb-3"
28          style="border-radius: 10px; border: 1px solid black"
29        />
30        <soft-image-input id="pfp" @added-image="addedImage" />
31        <validation-error :errors="apiValidationErrors.profile_image" />
32
33        <label class="form-label mt-2 row mt-4">Name</label>
34
35        <soft-model-input
36          id="name"
37          v-model="user.name"
38          type="text"
39          placeholder="Your Name"
40        />
41        <validation-error :errors="apiValidationErrors.name" />
42
43        <label class="form-label mt-2 row mt-4">Email</label>
44        <soft-model-input
45          id="email"
46          v-model="user.email"
47          type="text"
48          placeholder="Email"
49        />
50        <validation-error :errors="apiValidationErrors.email" />
51
52        <label class="form-label mt-2 row mt-4">Role</label>
53        <select
54          id="choices-roles"
55          v-model="getRole"
56          class="form-control"
57          name="choices-roles"
58        ></select>
59        <validation-error :errors="apiValidationErrors.roles" />
60
61        <label class="form-label mt-2 row mt-4">Password</label>
62        <soft-model-input
63          id="password"
64          v-model="user.password"
65          type="password"
66          placeholder="Password"
67        />
68        <validation-error :errors="apiValidationErrors.password" />
69
70        <label class="form-label mt-2 row mt-4">Confirm Password</label>
71        <soft-model-input
72          id="password_confirmation"
73          v-model="user.password_confirmation"
74          type="password"
75          placeholder="Confirm Password"
76        />
77
78        <soft-button
79          color="dark"
80          variant="gradient"
81          class="float-end mt-4 mb-0"
82          size="sm"
83          :is-disabled="loading ? true : false"
84          @click="editUser"
85          ><span v-if="loading" class="spinner-border spinner-border-sm"></span>
86          <span v-else>Edit User</span></soft-button
87        >
88      </div>
89    </div>
90  </div>
91</div>
92</div>
93

New User

<div class="py-4 container-fluid">
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="pb-0 card-header">
        <div class="d-lg-flex">
          <div>
            <h5 class="mb-0">Add a new user</h5>
          </div>
          <div class="my-auto mt-4 ms-auto mt-lg-0">
            <div class="my-auto ms-auto">
              <a href="./list" class="mb-0 btn bg-gradient-success btn-sm"
                >&nbsp; Back to list</a
              >
            </div>
          </div>
        </div>
      </div>

      <div class="card-body">
        <label class="form-label mt-2 row mt-4">Profile picture</label>
        <img
          :src="preview"
          alt="placeholder"
          width="200"
          height="200"
          class="mb-3"
          style="border-radius: 10px; border: 1px solid black"
        />
        <soft-image-input id="pfp" @added-image="addedImage" />
        <validation-error :errors="apiValidationErrors.profile_image" />

        <label class="form-label mt-2 row mt-4">Name</label>

        <soft-model-input
          id="name"
          v-model="user.name"
          type="text"
          placeholder="Your Name"
        />
        <validation-error :errors="apiValidationErrors.name" />

        <label class="form-label mt-2 row mt-4">Email</label>
        <soft-model-input
          id="email"
          v-model="user.email"
          type="text"
          placeholder="Email"
        />
        <validation-error :errors="apiValidationErrors.email" />

        <label class="form-label mt-2 row mt-4">Role</label>
        <select
          id="choices-roles"
          v-model="getRole"
          class="form-control"
          name="choices-roles"
        ></select>
        <validation-error :errors="apiValidationErrors.roles" />

        <label class="form-label mt-2 row mt-4">Password</label>
        <soft-model-input
          id="password"
          v-model="user.password"
          type="password"
          placeholder="Password"
        />
        <validation-error :errors="apiValidationErrors.password" />

        <label class="form-label mt-2 row mt-4">Confirm Password</label>
        <soft-model-input
          id="password_confirmation"
          v-model="user.password_confirmation"
          type="password"
          placeholder="Confirm Password"
        />

        <soft-button
          color="dark"
          variant="gradient"
          class="float-end mt-4 mb-0"
          size="sm"
          :is-disabled="loading ? true : false"
          @click="newUser"
          ><span v-if="loading" class="spinner-border spinner-border-sm"></span>
          <span v-else>Add User</span></soft-button
        >
      </div>
    </div>
  </div>
</div>
</div>

1<div class="py-4 container-fluid">
2<div class="row">
3  <div class="col-12">
4    <div class="card">
5      <div class="pb-0 card-header">
6        <div class="d-lg-flex">
7          <div>
8            <h5 class="mb-0">Add a new user</h5>
9          </div>
10          <div class="my-auto mt-4 ms-auto mt-lg-0">
11            <div class="my-auto ms-auto">
12              <a href="./list" class="mb-0 btn bg-gradient-success btn-sm"
13                >&nbsp; Back to list</a
14              >
15            </div>
16          </div>
17        </div>
18      </div>
19
20      <div class="card-body">
21        <label class="form-label mt-2 row mt-4">Profile picture</label>
22        <img
23          :src="preview"
24          alt="placeholder"
25          width="200"
26          height="200"
27          class="mb-3"
28          style="border-radius: 10px; border: 1px solid black"
29        />
30        <soft-image-input id="pfp" @added-image="addedImage" />
31        <validation-error :errors="apiValidationErrors.profile_image" />
32
33        <label class="form-label mt-2 row mt-4">Name</label>
34
35        <soft-model-input
36          id="name"
37          v-model="user.name"
38          type="text"
39          placeholder="Your Name"
40        />
41        <validation-error :errors="apiValidationErrors.name" />
42
43        <label class="form-label mt-2 row mt-4">Email</label>
44        <soft-model-input
45          id="email"
46          v-model="user.email"
47          type="text"
48          placeholder="Email"
49        />
50        <validation-error :errors="apiValidationErrors.email" />
51
52        <label class="form-label mt-2 row mt-4">Role</label>
53        <select
54          id="choices-roles"
55          v-model="getRole"
56          class="form-control"
57          name="choices-roles"
58        ></select>
59        <validation-error :errors="apiValidationErrors.roles" />
60
61        <label class="form-label mt-2 row mt-4">Password</label>
62        <soft-model-input
63          id="password"
64          v-model="user.password"
65          type="password"
66          placeholder="Password"
67        />
68        <validation-error :errors="apiValidationErrors.password" />
69
70        <label class="form-label mt-2 row mt-4">Confirm Password</label>
71        <soft-model-input
72          id="password_confirmation"
73          v-model="user.password_confirmation"
74          type="password"
75          placeholder="Confirm Password"
76        />
77
78        <soft-button
79          color="dark"
80          variant="gradient"
81          class="float-end mt-4 mb-0"
82          size="sm"
83          :is-disabled="loading ? true : false"
84          @click="newUser"
85          ><span v-if="loading" class="spinner-border spinner-border-sm"></span>
86          <span v-else>Add User</span></soft-button
87        >
88      </div>
89    </div>
90  </div>
91</div>
92</div>
93