User Profile

You have the option to edit the current logged in user's profile information (name, email, profile picture) and password. To access this page, just click the "Examples(API)/User Profile" link in the left sidebar or add /examples/user-profile in the URL.

The pages\examples\user-profile is the file with Vue component that handle the update of the user information and password.

User Profile Component

<div>
    <div class="card shadow-lg mx-4 p-3 mt-4">
        <h5 class="font-weight-bolder mb-0">Edit Profile</h5>
        <div class="mt-4">
            <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="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="user-name" class="multisteps-form__input" type="text" placeholder="Name"
                    v-model="newName" :error="isError('name', errorsRef)"
                    :errorMessage="getErrorMessage('name', errorsRef)" />
            </div>
            <div class="col-12 mt-sm-0">
                <label>Email</label>
                <ArgonInput id="user-email" class="multisteps-form__input" type="email" placeholder="Email"
                    v-model="newEmail" :error="isError('email', errorsRef)"
                    :errorMessage="getErrorMessage('email', errorsRef)" />
            </div>
            <div class="button-row d-flex mt-4">
                <ArgonButton type="button" color="primary" variant="gradient" class="ms-auto mb-0"
                    @click.prevent="$isDemo(userId) ? $demoMessage('users') : handleSubmit()">Submit
                </ArgonButton>
            </div>
        </div>
    </div>
    <div class="card shadow-lg mx-4 p-3 mt-4">
        <h5 class="font-weight-bolder mb-0">Change Password</h5>
        <div class="mt-4">
            <div class="col-12 mt-sm-0">
                <label>New Password</label>
                <ArgonInput id="new-password" class="multisteps-form__input" type="password" placeholder="******"
                    v-model="password" :error="isError('password', passwordErrorsRef)"
                    :errorMessage="getErrorMessage('password', passwordErrorsRef)" />
            </div>
            <div class="col-12 mt-sm-0">
                <label>Repeat New Password</label>
                <ArgonInput id="repeat-password" class="multisteps-form__input" type="password" placeholder="******"
                    v-model="passwordConfirm" :error="isError('passwordConfirm', passwordErrorsRef)"
                    :errorMessage="getErrorMessage('passwordConfirm', passwordErrorsRef)" />
            </div>
            <div class="button-row d-flex mt-4">
                <ArgonButton @click.prevent="$isDemo(userId) ? $demoMessage('users') : handlePasswordChange()"
                    type="button" color="primary" variant="gradient" class="ms-auto mb-0">Change
                    Password
                </ArgonButton>
            </div>
        </div>
    </div>
</div>

1<div>
2    <div class="card shadow-lg mx-4 p-3 mt-4">
3        <h5 class="font-weight-bolder mb-0">Edit Profile</h5>
4        <div class="mt-4">
5            <div class="d-flex flex-column max-content align-items-center mb-4 mx-4">
6                <img :src="imgSrc" class="rounded d-flex justify-content-center argon-image" width="200" height="200">
7                <div class="mt-2 d-flex justify-content-center">
8                    <ArgonButton v-if="imgSrc !== defaultAvatar" type="button" @click="handleFileRemove()"
9                        class="btn base-button btn btn-sm btn-danger btn-button mx-2">
10                        <span><i class="fa fa-times"></i> Remove </span>
11                    </ArgonButton>
12                    <ArgonButton type="button" class="btn base-button btn btn-sm btn-primary btn-button">
13                        <label for="imageInput" class="mb-0">{{ imgSrc !== defaultAvatar ? 'Change' : 'Select image' }}
14                        </label>
15                        <input ref="file" id="imageInput" accept="image/*" type="file" style="display: none;"
16                            v-on:change="handleFileUpload()" />
17                    </ArgonButton>
18                </div>
19            </div>
20            <div class="col-12 mt-sm-0">
21                <label>Name</label>
22                <ArgonInput id="user-name" class="multisteps-form__input" type="text" placeholder="Name"
23                    v-model="newName" :error="isError('name', errorsRef)"
24                    :errorMessage="getErrorMessage('name', errorsRef)" />
25            </div>
26            <div class="col-12 mt-sm-0">
27                <label>Email</label>
28                <ArgonInput id="user-email" class="multisteps-form__input" type="email" placeholder="Email"
29                    v-model="newEmail" :error="isError('email', errorsRef)"
30                    :errorMessage="getErrorMessage('email', errorsRef)" />
31            </div>
32            <div class="button-row d-flex mt-4">
33                <ArgonButton type="button" color="primary" variant="gradient" class="ms-auto mb-0"
34                    @click.prevent="$isDemo(userId) ? $demoMessage('users') : handleSubmit()">Submit
35                </ArgonButton>
36            </div>
37        </div>
38    </div>
39    <div class="card shadow-lg mx-4 p-3 mt-4">
40        <h5 class="font-weight-bolder mb-0">Change Password</h5>
41        <div class="mt-4">
42            <div class="col-12 mt-sm-0">
43                <label>New Password</label>
44                <ArgonInput id="new-password" class="multisteps-form__input" type="password" placeholder="******"
45                    v-model="password" :error="isError('password', passwordErrorsRef)"
46                    :errorMessage="getErrorMessage('password', passwordErrorsRef)" />
47            </div>
48            <div class="col-12 mt-sm-0">
49                <label>Repeat New Password</label>
50                <ArgonInput id="repeat-password" class="multisteps-form__input" type="password" placeholder="******"
51                    v-model="passwordConfirm" :error="isError('passwordConfirm', passwordErrorsRef)"
52                    :errorMessage="getErrorMessage('passwordConfirm', passwordErrorsRef)" />
53            </div>
54            <div class="button-row d-flex mt-4">
55                <ArgonButton @click.prevent="$isDemo(userId) ? $demoMessage('users') : handlePasswordChange()"
56                    type="button" color="primary" variant="gradient" class="ms-auto mb-0">Change
57                    Password
58                </ArgonButton>
59            </div>
60        </div>
61    </div>
62</div>