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 /user-profile in the URL.

The src\views\examples-api\profile is the folder with Vue components that handle the update of the user information and password.

Profile Examples

<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
    <h5 class="font-weight-bolder mb-0">About me</h5>
    <div class="multisteps-form__content">

      <div class="row mt-4 overflow-hidden">
        <div>
          <material-avatar :img="imgSource" shadow="regular" class="img-fluid w-20 mt-7">
          </material-avatar>
        </div>
        <div class="mt-1  mb-2">
          <material-button size="sm" type="button">
            <label for="imageInput" class="mb-0 text-white small">Select Image</label>
            <input id="imageInput" @change.prevent="onFileChange" type="file" style="display: none;" accept="image/*">
          </material-button>
        </div>
      </div>


      <div class="row mt-5">

        <material-input id="name" label="Name" variant="static" v-model:value="user.name" name="name" />
        <validation-error :errors="apiValidationErrors.name" />

      </div>

      <div class="row mt-5">
        <material-input id="email" type="email" label="Email Address" variant="static" v-model:value="user.email"
          name="email" />

        <validation-error :errors="apiValidationErrors.email" />
      </div>

      <div class="button-row d-flex mt-4">
        <material-button type="button" color="dark" variant="gradient" class="ms-auto mb-0 js-btn-next"
          @click="handleSubmit">Submit Changes</material-button>
      </div>
    </div>
  </div>

1<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
2    <h5 class="font-weight-bolder mb-0">About me</h5>
3    <div class="multisteps-form__content">
4
5      <div class="row mt-4 overflow-hidden">
6        <div>
7          <material-avatar :img="imgSource" shadow="regular" class="img-fluid w-20 mt-7">
8          </material-avatar>
9        </div>
10        <div class="mt-1  mb-2">
11          <material-button size="sm" type="button">
12            <label for="imageInput" class="mb-0 text-white small">Select Image</label>
13            <input id="imageInput" @change.prevent="onFileChange" type="file" style="display: none;" accept="image/*">
14          </material-button>
15        </div>
16      </div>
17
18
19      <div class="row mt-5">
20
21        <material-input id="name" label="Name" variant="static" v-model:value="user.name" name="name" />
22        <validation-error :errors="apiValidationErrors.name" />
23
24      </div>
25
26      <div class="row mt-5">
27        <material-input id="email" type="email" label="Email Address" variant="static" v-model:value="user.email"
28          name="email" />
29
30        <validation-error :errors="apiValidationErrors.email" />
31      </div>
32
33      <div class="button-row d-flex mt-4">
34        <material-button type="button" color="dark" variant="gradient" class="ms-auto mb-0 js-btn-next"
35          @click="handleSubmit">Submit Changes</material-button>
36      </div>
37    </div>
38  </div>

Password Examples

<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
    <h5 class="font-weight-bolder mb-0">Change Password</h5>
    <div class="multisteps-form__content mt-4">
      <div class="row">
        <div class="col-12">
          <div class="mt-2">
            <material-input id="password" v-model:value="user.password" type="password" label="Password"
              name="password" />

            <validation-error :errors="apiValidationErrors.password" />
          </div>
          <div class="mt-5">
            <material-input id="confirmPassword" v-model:value="user.password_confirmation" type="password"
              label="Confirm Password" name="confirmPassword" />
          </div>
        </div>
      </div>
      <div class="button-row d-flex mt-4">
        <material-button type="button" color="dark" variant="gradient" class="ms-auto mb-0 js-btn-next"
          @click="handleChange">Change Password</material-button>
      </div>
    </div>
  </div>

1<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
2    <h5 class="font-weight-bolder mb-0">Change Password</h5>
3    <div class="multisteps-form__content mt-4">
4      <div class="row">
5        <div class="col-12">
6          <div class="mt-2">
7            <material-input id="password" v-model:value="user.password" type="password" label="Password"
8              name="password" />
9
10            <validation-error :errors="apiValidationErrors.password" />
11          </div>
12          <div class="mt-5">
13            <material-input id="confirmPassword" v-model:value="user.password_confirmation" type="password"
14              label="Confirm Password" name="confirmPassword" />
15          </div>
16        </div>
17      </div>
18      <div class="button-row d-flex mt-4">
19        <material-button type="button" color="dark" variant="gradient" class="ms-auto mb-0 js-btn-next"
20          @click="handleChange">Change Password</material-button>
21      </div>
22    </div>
23  </div>
24