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 `src\views\examplesApi\UserProfile` is the folder with Profile Vue component that handle the update of the user information and password.
The store used for profile functionality is found in `src\store\profile.module.js` and you can find the service file in `src\services\profile.service.js`.

Profile Page

1<template>
2  <div id="profile" class="card card-body mt-4 m-usercard">
3    <div class="row justify-content-center align-items-center">
4      <div class="col-sm-auto col-4">
5        <argon-avatar
6          :img="profileImage()"
7          :alt="user.name"
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">{{ user.name }}</h5>
16          <p class="mb-0 font-weight-bold text-sm">CEO / Co-Founder</p>
17        </div>
18      </div>
19      <div class="col-sm-auto ms-sm-auto mt-sm-0 mt-3 d-flex">
20        <label class="form-check-label mb-0 me-2">
21          <small id="profileVisibility">Switch to invisible</small>
22        </label>
23        <argon-switch
24          id="switch-invisible"
25          name="Switch to Invisible"
26          checked
27        />
28      </div>
29    </div>
30  </div>
31  <div class="d-flex justify-content-around">
32    <div class="col-lg-8 mw-100 w-100-userprofile">
33      <form role="form" @submit.prevent="handleChangeProfile()">
34        <div id="basic-info" class="card mt-4">
35          <div class="card-header">
36            <h5>Basic Info</h5>
37          </div>
38          <div class="card-body pt-0">
39            <div class="d-flex justify-content-between">
40              <div class="col-lg-8">
41                <div class="row">
42                  <div class="col-11">
43                    <label class="form-label">Name</label>
44                    <argon-input
45                      id="name"
46                      v-model="userToUpdate.name"
47                      type="text"
48                      :value="userToUpdate.name"
49                    />
50                    <validation-error :errors="apiValidationErrors.name" />
51                  </div>
52                </div>
53                <div class="row">
54                  <div class="col-11">
55                    <label class="form-label mt-2">Email</label>
56                    <argon-input
57                      id="email"
58                      v-model="userToUpdate.email"
59                      type="email"
60                      placeholder="[email protected]"
61                      :value="userToUpdate.email"
62                    />
63                    <validation-error :errors="apiValidationErrors.email" />
64                  </div>
65                </div>
66              </div>
67              <div class="col-lg-4 d-flex align-items-center text-center">
68                <div class="col-12">
69                  <div class="avatar avatar-xxl position-relative">
70                    <img
71                      :src="previewImage()"
72                      class="border-radius-md w-100 h-100"
73                      alt="team-2"
74                    />
75                    <i
76                      class="
77                        fa fa-pen
78                        userprofile-button
79                        bottom-0
80                        position-absolute
81                        end-0
82                      "
83                    ></i>
84                    <input
85                      type="file"
86                      class="uploadImage bottom-0 btn btn-sm btn-icon-only bg-gradient-light position-absolute end-0 mb-n2 me-n2"
87                      accept="image/png, image/jpg, image/jpeg"
88                      @input="onFileChange"
89                    />
90                    <argon-button
91                      v-if="image"
92                      type="button"
93                      class="removeImage bottom-0 btn btn-sm btn-icon-only position-absolute start-0 mb-n2"
94                      @click="removeImage"
95                      ><i class="fa fa-remove"></i
96                    ></argon-button>
97                  </div>
98                </div>
99              </div>
100            </div>
101            <div class="d-flex justify-content-end">
102              <validation-error :errors="apiValidationErrors.attachment" />
103            </div>
104            <argon-button
105              class="float-end mt-6 mb-0"
106              color="dark"
107              variant="gradient"
108              size="sm"
109              >Update Info
110            </argon-button>
111          </div>
112        </div>
113      </form>
114      <form role="form" @submit.prevent="handleChangeProfile()">
115        <div id="password" class="card mt-4">
116          <div class="card-header">
117            <h5>Change Password</h5>
118          </div>
119          <div class="card-body pt-0">
120            <label class="form-label">New password</label>
121            <argon-input
122              id="new-password"
123              v-model="userToUpdate.password"
124              type="password"
125              placeholder="New Password"
126              :value="userToUpdate.password"
127            />
128            <div class="row mb-2">
129              <validation-error :errors="apiValidationErrors.password" />
130            </div>
131            <label class="form-label">Confirm new password</label>
132            <argon-input
133              id="confirm-password"
134              v-model="userToUpdate.password_confirmation"
135              type="password"
136              placeholder="Confirm password"
137              :value="userToUpdate.password_confirmation"
138            />
139            <h5 class="mt-5">Password requirements</h5>
140            <p class="text-muted mb-2">
141              Please follow this guide for a strong password:
142            </p>
143            <ul class="text-muted ps-4 mb-0 float-start">
144              <li>
145                <span class="text-sm">One special characters</span>
146              </li>
147              <li>
148                <span class="text-sm">Min 8 characters</span>
149              </li>
150              <li>
151                <span class="text-sm">One number (2 are recommended)</span>
152              </li>
153              <li>
154                <span class="text-sm">Change it often</span>
155              </li>
156            </ul>
157            <argon-button
158              class="float-end mt-6 mb-0"
159              color="dark"
160              variant="gradient"
161              size="sm"
162              >Update password
163            </argon-button>
164          </div>
165        </div>
166      </form>
167    </div>
168    <div
169      class="card position-sticky top-1 mt-4 h-100 col-lg-3 d-md-inline d-none mw-30"
170    >
171      <profile-info-card
172        title="Profile Information"
173        description="Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
174        :info="{
175          fullName: 'Alec M. Thompson',
176          mobile: '(44) 123 1234 123',
177          email: '[email protected]',
178          location: 'USA',
179        }"
180        :social="[
181          {
182            link: 'https://www.facebook.com/CreativeTim/',
183            icon: 'fab fa-facebook fa-lg',
184          },
185          {
186            link: 'https://twitter.com/creativetim',
187            icon: 'fab fa-twitter fa-lg',
188          },
189          {
190            link: 'https://www.instagram.com/creativetimofficial/',
191            icon: 'fab fa-instagram fa-lg',
192          },
193        ]"
194        :action="{
195          route: 'javascript:;',
196          tooltip: 'Edit Profile',
197        }"
198      />
199    </div>
200  </div>
201</template>

<template>
  <div id="profile" class="card card-body mt-4 m-usercard">
    <div class="row justify-content-center align-items-center">
      <div class="col-sm-auto col-4">
        <argon-avatar
          :img="profileImage()"
          :alt="user.name"
          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">{{ user.name }}</h5>
          <p class="mb-0 font-weight-bold text-sm">CEO / Co-Founder</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>
        <argon-switch
          id="switch-invisible"
          name="Switch to Invisible"
          checked
        />
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-around">
    <div class="col-lg-8 mw-100 w-100-userprofile">
      <form role="form" @submit.prevent="handleChangeProfile()">
        <div id="basic-info" class="card mt-4">
          <div class="card-header">
            <h5>Basic Info</h5>
          </div>
          <div class="card-body pt-0">
            <div class="d-flex justify-content-between">
              <div class="col-lg-8">
                <div class="row">
                  <div class="col-11">
                    <label class="form-label">Name</label>
                    <argon-input
                      id="name"
                      v-model="userToUpdate.name"
                      type="text"
                      :value="userToUpdate.name"
                    />
                    <validation-error :errors="apiValidationErrors.name" />
                  </div>
                </div>
                <div class="row">
                  <div class="col-11">
                    <label class="form-label mt-2">Email</label>
                    <argon-input
                      id="email"
                      v-model="userToUpdate.email"
                      type="email"
                      placeholder="example@email.com"
                      :value="userToUpdate.email"
                    />
                    <validation-error :errors="apiValidationErrors.email" />
                  </div>
                </div>
              </div>
              <div class="col-lg-4 d-flex align-items-center text-center">
                <div class="col-12">
                  <div class="avatar avatar-xxl position-relative">
                    <img
                      :src="previewImage()"
                      class="border-radius-md w-100 h-100"
                      alt="team-2"
                    />
                    <i
                      class="
                        fa fa-pen
                        userprofile-button
                        bottom-0
                        position-absolute
                        end-0
                      "
                    ></i>
                    <input
                      type="file"
                      class="uploadImage bottom-0 btn btn-sm btn-icon-only bg-gradient-light position-absolute end-0 mb-n2 me-n2"
                      accept="image/png, image/jpg, image/jpeg"
                      @input="onFileChange"
                    />
                    <argon-button
                      v-if="image"
                      type="button"
                      class="removeImage bottom-0 btn btn-sm btn-icon-only position-absolute start-0 mb-n2"
                      @click="removeImage"
                      ><i class="fa fa-remove"></i
                    ></argon-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex justify-content-end">
              <validation-error :errors="apiValidationErrors.attachment" />
            </div>
            <argon-button
              class="float-end mt-6 mb-0"
              color="dark"
              variant="gradient"
              size="sm"
              >Update Info
            </argon-button>
          </div>
        </div>
      </form>
      <form role="form" @submit.prevent="handleChangeProfile()">
        <div id="password" class="card mt-4">
          <div class="card-header">
            <h5>Change Password</h5>
          </div>
          <div class="card-body pt-0">
            <label class="form-label">New password</label>
            <argon-input
              id="new-password"
              v-model="userToUpdate.password"
              type="password"
              placeholder="New Password"
              :value="userToUpdate.password"
            />
            <div class="row mb-2">
              <validation-error :errors="apiValidationErrors.password" />
            </div>
            <label class="form-label">Confirm new password</label>
            <argon-input
              id="confirm-password"
              v-model="userToUpdate.password_confirmation"
              type="password"
              placeholder="Confirm password"
              :value="userToUpdate.password_confirmation"
            />
            <h5 class="mt-5">Password requirements</h5>
            <p class="text-muted mb-2">
              Please follow this guide for a strong password:
            </p>
            <ul class="text-muted ps-4 mb-0 float-start">
              <li>
                <span class="text-sm">One special characters</span>
              </li>
              <li>
                <span class="text-sm">Min 8 characters</span>
              </li>
              <li>
                <span class="text-sm">One number (2 are recommended)</span>
              </li>
              <li>
                <span class="text-sm">Change it often</span>
              </li>
            </ul>
            <argon-button
              class="float-end mt-6 mb-0"
              color="dark"
              variant="gradient"
              size="sm"
              >Update password
            </argon-button>
          </div>
        </div>
      </form>
    </div>
    <div
      class="card position-sticky top-1 mt-4 h-100 col-lg-3 d-md-inline d-none mw-30"
    >
      <profile-info-card
        title="Profile Information"
        description="Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality)."
        :info="{
          fullName: 'Alec M. Thompson',
          mobile: '(44) 123 1234 123',
          email: 'alecthompson@mail.com',
          location: 'USA',
        }"
        :social="[
          {
            link: 'https://www.facebook.com/CreativeTim/',
            icon: 'fab fa-facebook fa-lg',
          },
          {
            link: 'https://twitter.com/creativetim',
            icon: 'fab fa-twitter fa-lg',
          },
          {
            link: 'https://www.instagram.com/creativetimofficial/',
            icon: 'fab fa-instagram fa-lg',
          },
        ]"
        :action="{
          route: 'javascript:;',
          tooltip: 'Edit Profile',
        }"
      />
    </div>
  </div>
</template>