Edit Profile
The Edit Profile allows a user to edit his profile information. Users can edit Firstname, Lastname, Email Id (if Email is required ), and Mobile number.
To edit Email-ID:
- User has to verify the email id by verifying the OTP sent to Email ( Email is set to HARD).
- Verifying the link sent to the Email or he can cancel verification for next five days (Email is set to SOFT).
To edit Number:
- Verify the mobile by verifying the OTP sent to the respective mobile number.
Arguments
Context | Type | Description |
---|---|---|
isShowVerifyEmail | Boolean | show Email verify otp |
isShowVerifyMobile | Boolean | show Mobile verify otp |
verifyBothData | object | user related information |
Example:
The below example will render an Edit profile.
theme/templates/pages/edit-profile.vue
<div className="edit-profile-warpper" v-if="!showVerifyBoth">
<div className="edit-profile-title">Complete Registration</div>
<div className="edit-profile-name-input">
<div
:className="{
'input-group': true,
'error-input': formData.first_name.showError
}"
>
<label className="input-title" for="firstName"
>First Name*</label
><input
type="text"
name="firstName"
required=""
v-model="formData.first_name.value"
@input="validateFname"
/>
</div>
<div
:className="{
'input-group': true,
'error-input': formData.last_name.showError
}"
>
<label className="input-title" for="lastName"
>Last Name*</label
><input
type="text"
name="lastName"
required=""
v-model="formData.last_name.value"
@input="validateLname"
/>
</div>
</div>
<div className="gender-radio-container">
<label className="radio-container"
>Male<input
type="radio"
name="gender"
value="male"
checked
v-model="formData.gender.value"/><span
className="checkmark"
></span
></label>
<label className="radio-container"
>Female<input
type="radio"
name="gender"
value="female"
v-model="formData.gender.value"/><span
className="checkmark"
></span></label
><label className="radio-container"
>Other<input
type="radio"
name="gender"
value="unisex"
v-model="formData.gender.value"/><span
className="checkmark"
></span
></label>
</div>
<div
:className="{
'edit-profile-email': true,
'input-group': true,
'error-input': formData.email.showError
}"
v-if="isEmail"
>
<label className="input-title" for="email"
>Email {{ isEmailRequired }}</label
><input
type="text"
name="email"
required=""
v-model="formData.email.value"
@input="validateEmail"
:disabled="isEmailExist"
/>
<p className="error-text">
{{ formData.email.errorMessage }}
</p>
</div>
<div className="edit-profile-mobile-input">
<mobile-input
:mobile="getMobileNumber"
:countryCode="getCountryCode"
:disable="isMobileDisabled"
@change="onChange"
ref="mobileInput"
/>
</div>
<div
className="edit-profile-alert alert-error"
v-if="updateProfileError"
>
<span className="alert-message">{{
updateProfileErrorMsg
}}</span>
</div>
<button
className="update-btn secondary-btn"
@click="updateButtonClick(accountData)"
type="submit"
>
Update
</button>
<button
className="logout-btn secondary-btn"
@click="cancelButtonClick(accountData)"
v-if="isCancelButton"
>
Cancel
</button>
<button
className="logout-btn secondary-btn"
@click="accountData.signOut()"
v-if="isloggedIn"
>
Logout
</button>
</div>
<div v-else>
<verify-both
:isShowVerifyEmail="showVerifyEmail"
:isShowVerifyMobile="showVerifyMobile"
:verifyBothData="verifyBothData"
/>
</div>