User Management

The theme comes with an out of the box user management option. To access this option, click the "Examples(API)/User Management" link in the left sidebar or add /examples/user-management/list-usersto 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 user functionality can be found instores\UserStore.js

You can find the compoments for role functionality inpages\examples\user-management folder.

Once you add more users, the list will grow and for every user you will have edit and delete options.

Users Listing Component

<table id="user-table" class="table table-flush">
    <thead class="thead-light">
        <tr>
            <th data-sortable="false">AUTHOR</th>
            <th>NAME</th>
            <th>EMAIL</th>
            <th>ROLE</th>
            <th>CREATED AT</th>
            <th data-sortable="false">ACTIONS</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="{ id, name, email, profile_image, roles, created_at } of pageItems" :key="id">
            <td class="text-sm text-black font-weight-normal"><img :src="profile_image ? profile_image : defaultAvatar"
                    class="avatar rounded-circle" alt="avatar" /></td>
            <td class="text-sm font-weight-normal">{{ name }}</td>
            <td class="text-sm font-weight-normal">{{ email }}</td>
            <td class="text-sm font-weight-normal">{{ roles[0].name }}</td>
            <td class="text-sm font-weight-normal">{{ created_at }}</td>
            <td class="text-sm font-weight-normal">
                <div class="d-flex align-items-center ms-auto">
                    <div class="cursor-pointer edit">
                        <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
                    </div>
                    <div class="mx-3 cursor-pointer delete">
                        <i :class="`fas fa-trash text-secondary delete-id`"></i>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

1<table id="user-table" class="table table-flush">
2    <thead class="thead-light">
3        <tr>
4            <th data-sortable="false">AUTHOR</th>
5            <th>NAME</th>
6            <th>EMAIL</th>
7            <th>ROLE</th>
8            <th>CREATED AT</th>
9            <th data-sortable="false">ACTIONS</th>
10        </tr>
11    </thead>
12    <tbody>
13        <tr v-for="{ id, name, email, profile_image, roles, created_at } of pageItems" :key="id">
14            <td class="text-sm text-black font-weight-normal"><img :src="profile_image ? profile_image : defaultAvatar"
15                    class="avatar rounded-circle" alt="avatar" /></td>
16            <td class="text-sm font-weight-normal">{{ name }}</td>
17            <td class="text-sm font-weight-normal">{{ email }}</td>
18            <td class="text-sm font-weight-normal">{{ roles[0].name }}</td>
19            <td class="text-sm font-weight-normal">{{ created_at }}</td>
20            <td class="text-sm font-weight-normal">
21                <div class="d-flex align-items-center ms-auto">
22                    <div class="cursor-pointer edit">
23                        <i :class="`fas fa-user-edit text-secondary edit-id`"></i>
24                    </div>
25                    <div class="mx-3 cursor-pointer delete">
26                        <i :class="`fas fa-trash text-secondary delete-id`"></i>
27                    </div>
28                </div>
29            </td>
30        </tr>
31    </tbody>
32</table>

Add/Edit User

<div class="mt-4">
    <form role="form" @submit.prevent="submitForm">
        <div class="d-flex flex-column max-content align-items-center mb-4 mx-4">
            <img :src="imgSrc" class="rounded d-flex justify-content-center argon-image" width="200" height="200">
            <div class="mt-2 d-flex justify-content-center">
                <ArgonButton v-if="imgSrc !== defaultAvatar" type="button" @click.prevent="handleFileRemove()"
                    class="btn base-button btn btn-sm btn-danger btn-button mx-2">
                    <span><i class="fa fa-times"></i> Remove </span>
                </ArgonButton>
                <ArgonButton type="button" class="btn base-button btn btn-sm btn-primary btn-button">
                    <label for="imageInput" class="mb-0">
                        {{ imgSrc !== defaultAvatar ? 'Change' : 'Select image' }}
                    </label>
                    <input ref="file" id="imageInput" accept="image/*" type="file" style="display: none;"
                        v-on:change="handleFileUpload()" />
                </ArgonButton>
            </div>
        </div>
        <div class="col-12 mt-sm-0">
            <label>Name</label>
            <ArgonInput id="name" name="name" class="multisteps-form__input" type="text" placeholder="Name"
                v-model="formData.name" :error="isError('name', errorsRef)"
                :errorMessage="getErrorMessage('name', errorsRef)" />
        </div>
        <div class="col-12 mt-sm-0">
            <label>Email</label>
            <ArgonInput id="email" name="email" class="multisteps-form__input" type="email" placeholder="Email"
                v-model="formData.email" :error="isError('email', errorsRef)"
                :errorMessage="getErrorMessage('email', errorsRef)" />
        </div>
        <div class="col-12 mt-sm-0 mb-3">
            <label>Role</label>
            <select id="choices-role" class="form-control" name="choices-role" v-model="formData.role">
                <option v-for="role of roleStore.allRolesList" :value="role.id">{{ role.name }}</option>
            </select>
        </div>
        <div class="col-12 mt-sm-0">
            <label>Password</label>
            <ArgonInput id="password" name="password" class="multisteps-form__input" type="password"
                placeholder="******" v-model="formData.password" :error="isError('password', errorsRef)"
                :errorMessage="getErrorMessage('password', errorsRef)" />
        </div>
        <div class="col-12 mt-sm-0">
            <label>Confirm Password</label>
            <ArgonInput id="passwordConfirm" name="passwordConfirm" class="multisteps-form__input" type="password"
                placeholder="******" v-model="formData.passwordConfirm" :error="isError('passwordConfirm', errorsRef)"
                :errorMessage="getErrorMessage('passwordConfirm', errorsRef)" />
        </div>
        <div class="button-row d-flex mt-4">
            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
                Add User
            </ArgonButton>
        </div>
    </form>
</div>

1<div class="mt-4">
2    <form role="form" @submit.prevent="submitForm">
3        <div class="d-flex flex-column max-content align-items-center mb-4 mx-4">
4            <img :src="imgSrc" class="rounded d-flex justify-content-center argon-image" width="200" height="200">
5            <div class="mt-2 d-flex justify-content-center">
6                <ArgonButton v-if="imgSrc !== defaultAvatar" type="button" @click.prevent="handleFileRemove()"
7                    class="btn base-button btn btn-sm btn-danger btn-button mx-2">
8                    <span><i class="fa fa-times"></i> Remove </span>
9                </ArgonButton>
10                <ArgonButton type="button" class="btn base-button btn btn-sm btn-primary btn-button">
11                    <label for="imageInput" class="mb-0">
12                        {{ imgSrc !== defaultAvatar ? 'Change' : 'Select image' }}
13                    </label>
14                    <input ref="file" id="imageInput" accept="image/*" type="file" style="display: none;"
15                        v-on:change="handleFileUpload()" />
16                </ArgonButton>
17            </div>
18        </div>
19        <div class="col-12 mt-sm-0">
20            <label>Name</label>
21            <ArgonInput id="name" name="name" class="multisteps-form__input" type="text" placeholder="Name"
22                v-model="formData.name" :error="isError('name', errorsRef)"
23                :errorMessage="getErrorMessage('name', errorsRef)" />
24        </div>
25        <div class="col-12 mt-sm-0">
26            <label>Email</label>
27            <ArgonInput id="email" name="email" class="multisteps-form__input" type="email" placeholder="Email"
28                v-model="formData.email" :error="isError('email', errorsRef)"
29                :errorMessage="getErrorMessage('email', errorsRef)" />
30        </div>
31        <div class="col-12 mt-sm-0 mb-3">
32            <label>Role</label>
33            <select id="choices-role" class="form-control" name="choices-role" v-model="formData.role">
34                <option v-for="role of roleStore.allRolesList" :value="role.id">{{ role.name }}</option>
35            </select>
36        </div>
37        <div class="col-12 mt-sm-0">
38            <label>Password</label>
39            <ArgonInput id="password" name="password" class="multisteps-form__input" type="password"
40                placeholder="******" v-model="formData.password" :error="isError('password', errorsRef)"
41                :errorMessage="getErrorMessage('password', errorsRef)" />
42        </div>
43        <div class="col-12 mt-sm-0">
44            <label>Confirm Password</label>
45            <ArgonInput id="passwordConfirm" name="passwordConfirm" class="multisteps-form__input" type="password"
46                placeholder="******" v-model="formData.passwordConfirm" :error="isError('passwordConfirm', errorsRef)"
47                :errorMessage="getErrorMessage('passwordConfirm', errorsRef)" />
48        </div>
49        <div class="button-row d-flex mt-4">
50            <ArgonButton type="submit" color="primary" variant="gradient" class="ms-auto mb-0">
51                Add User
52            </ArgonButton>
53        </div>
54    </form>
55</div>