Profile Edit

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/Profile" link in the left sidebar or add /profile in the URL.

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

Profile Component

<div class="container-fluid mt-4">
    <div id="profile" class="card card-body mt-4">
      <div v-if="profile" class="row justify-content-center align-items-center">
        <div class="col-sm-auto col-4">
          <soft-avatar
            :img="pic"
            alt="profile"
            size="xl"
            shadow="sm"
            border-radius="lg"
          />
        </div>
        <div class="col-sm-auto col-8 my-auto">
          <div class="h-100">
            <h5 class="mb-1 font-weight-bolder">{{ profile.name }}</h5>
            <p class="mb-0 font-weight-bold text-sm">{{ profile.email }}</p>
          </div>
        </div>

        <div class="col-sm-auto ms-sm-auto mt-sm-0 mt-3 d-flex">
          <label class="form-check-label mb-0 me-2">
            <small id="profileVisibility">Switch to invisible</small>
          </label>
          <soft-switch id="profile" name="profileVisibility" checked />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-6">
        <div id="basic-info" class="card mt-4">
          <div class="card-header">
            <h5>Basic Info</h5>
          </div>

          <div class="card-body pt-0">
            <label class="form-label">Profile picture</label><br />
            <img
              :src="preview"
              alt="placeholder"
              width="200"
              height="200"
              style="border-radius: 10px; border: 1px solid black"
            />

            <soft-image-input id="pfp" ref="pfp" @added-image="addedImage" />

            <soft-button
              v-if="!file"
              size="sm"
              color="info"
              @click="$refs.pfp.click()"
              >Select</soft-button
            >
            <soft-button
              v-if="file"
              size="sm"
              style="margin-right: 10px"
              color="info"
              @click="$refs.pfp.click()"
              >Change</soft-button
            >
            <soft-button
              v-if="file"
              size="sm"
              color="danger"
              @click="file = null"
              >Remove</soft-button
            >
            <validation-error :errors="apiValidationErrors.profile_image" />

            <div class="row mb-3 mt-4">
              <label class="form-label">Name</label>
              <soft-model-input
                id="name"
                v-model="profileChange.name"
                type="text"
                placeholder="Alec"
              />
              <validation-error :errors="apiValidationErrors.name" />
            </div>

            <div class="row mb-3">
              <label class="form-label mt-2">Email</label>
              <soft-model-input
                id="email"
                v-model="profileChange.email"
                type="email"
                placeholder="example@email.com"
              />
              <validation-error :errors="apiValidationErrors.email" />
            </div>

            <soft-button
              class="float-end mt-6 mb-0"
              color="dark"
              variant="gradient"
              size="sm"
              :is-disabled="loading2 ? true : false"
              @click="handleProfileChange"
              ><span
                v-if="loading2"
                class="spinner-border spinner-border-sm"
              ></span
              ><span v-else>Update profile</span></soft-button
            >
          </div>
        </div>
      </div>

      <div class="col-6">
        <div id="password" class="card mt-4">
          <div class="card-header">
            <h5>Change Password</h5>
          </div>

          <div class="card-body pt-0">
            <div class="row mb-3">
              <label class="form-label">New password</label>
              <soft-model-input
                id="newPassword"
                v-model="passChange.password"
                type="password"
                placeholder="New Password"
              />
              <validation-error :errors="apiValidationErrors.password" />
            </div>

            <div class="row mb-3">
              <label class="form-label">Confirm new password</label>
              <soft-model-input
                id="confirmPassword"
                v-model="passChange.password_confirmation"
                type="password"
                placeholder="Confirm password"
              />
            </div>

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

1<div class="container-fluid mt-4">
2    <div id="profile" class="card card-body mt-4">
3      <div v-if="profile" class="row justify-content-center align-items-center">
4        <div class="col-sm-auto col-4">
5          <soft-avatar
6            :img="pic"
7            alt="profile"
8            size="xl"
9            shadow="sm"
10            border-radius="lg"
11          />
12        </div>
13        <div class="col-sm-auto col-8 my-auto">
14          <div class="h-100">
15            <h5 class="mb-1 font-weight-bolder">{{ profile.name }}</h5>
16            <p class="mb-0 font-weight-bold text-sm">{{ profile.email }}</p>
17          </div>
18        </div>
19
20        <div class="col-sm-auto ms-sm-auto mt-sm-0 mt-3 d-flex">
21          <label class="form-check-label mb-0 me-2">
22            <small id="profileVisibility">Switch to invisible</small>
23          </label>
24          <soft-switch id="profile" name="profileVisibility" checked />
25        </div>
26      </div>
27    </div>
28
29    <div class="row">
30      <div class="col-6">
31        <div id="basic-info" class="card mt-4">
32          <div class="card-header">
33            <h5>Basic Info</h5>
34          </div>
35
36          <div class="card-body pt-0">
37            <label class="form-label">Profile picture</label><br />
38            <img
39              :src="preview"
40              alt="placeholder"
41              width="200"
42              height="200"
43              style="border-radius: 10px; border: 1px solid black"
44            />
45
46            <soft-image-input id="pfp" ref="pfp" @added-image="addedImage" />
47
48            <soft-button
49              v-if="!file"
50              size="sm"
51              color="info"
52              @click="$refs.pfp.click()"
53              >Select</soft-button
54            >
55            <soft-button
56              v-if="file"
57              size="sm"
58              style="margin-right: 10px"
59              color="info"
60              @click="$refs.pfp.click()"
61              >Change</soft-button
62            >
63            <soft-button
64              v-if="file"
65              size="sm"
66              color="danger"
67              @click="file = null"
68              >Remove</soft-button
69            >
70            <validation-error :errors="apiValidationErrors.profile_image" />
71
72            <div class="row mb-3 mt-4">
73              <label class="form-label">Name</label>
74              <soft-model-input
75                id="name"
76                v-model="profileChange.name"
77                type="text"
78                placeholder="Alec"
79              />
80              <validation-error :errors="apiValidationErrors.name" />
81            </div>
82
83            <div class="row mb-3">
84              <label class="form-label mt-2">Email</label>
85              <soft-model-input
86                id="email"
87                v-model="profileChange.email"
88                type="email"
89                placeholder="[email protected]"
90              />
91              <validation-error :errors="apiValidationErrors.email" />
92            </div>
93
94            <soft-button
95              class="float-end mt-6 mb-0"
96              color="dark"
97              variant="gradient"
98              size="sm"
99              :is-disabled="loading2 ? true : false"
100              @click="handleProfileChange"
101              ><span
102                v-if="loading2"
103                class="spinner-border spinner-border-sm"
104              ></span
105              ><span v-else>Update profile</span></soft-button
106            >
107          </div>
108        </div>
109      </div>
110
111      <div class="col-6">
112        <div id="password" class="card mt-4">
113          <div class="card-header">
114            <h5>Change Password</h5>
115          </div>
116
117          <div class="card-body pt-0">
118            <div class="row mb-3">
119              <label class="form-label">New password</label>
120              <soft-model-input
121                id="newPassword"
122                v-model="passChange.password"
123                type="password"
124                placeholder="New Password"
125              />
126              <validation-error :errors="apiValidationErrors.password" />
127            </div>
128
129            <div class="row mb-3">
130              <label class="form-label">Confirm new password</label>
131              <soft-model-input
132                id="confirmPassword"
133                v-model="passChange.password_confirmation"
134                type="password"
135                placeholder="Confirm password"
136              />
137            </div>
138
139            <soft-button
140              color="dark"
141              variant="gradient"
142              class="float-end mt-6 mb-0"
143              size="sm"
144              :is-disabled="loading ? true : false"
145              @click="handlePassChange"
146              ><span
147                v-if="loading"
148                class="spinner-border spinner-border-sm"
149              ></span>
150              <span v-else>Update password</span></soft-button
151            >
152          </div>
153        </div>
154      </div>
155    </div>
156  </div>
157