Skip to main content

Edit Profile

You are reading an outdated document

Get the latest developer guides on Fynd Partners Help

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.

Email id is edited

  • 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)

Mobile Number is Edited

  • Verify the mobile by verifying the OTP sent to the respective mobile number

QG21


Arguments

ContextTypeDescription
isShowVerifyEmailBooleanshow Email verify otp
isShowVerifyMobileBooleanshow Mobile verify otp
verifyBothDataobjectuser related information

Example:

The below example will render an Edit profile.

           <div class="edit-profile-warpper" v-if="!showVerifyBoth">
<div class="edit-profile-title">Complete Registration</div>
<div class="edit-profile-name-input">
<div
:class="{
'input-group': true,
'error-input': formData.first_name.showError
}"
>
<label class="input-title" for="firstName"
>First Name*</label
><input
type="text"
name="firstName"
required=""
v-model="formData.first_name.value"
@input="validateFname"
/>
</div>
<div
:class="{
'input-group': true,
'error-input': formData.last_name.showError
}"
>
<label class="input-title" for="lastName"
>Last Name*</label
><input
type="text"
name="lastName"
required=""
v-model="formData.last_name.value"
@input="validateLname"
/>
</div>
</div>
<div class="gender-radio-container">
<label class="radio-container"
>Male<input
type="radio"
name="gender"
value="male"
checked
v-model="formData.gender.value"/><span
class="checkmark"
></span
></label>
<label class="radio-container"
>Female<input
type="radio"
name="gender"
value="female"
v-model="formData.gender.value"/><span
class="checkmark"
></span></label
><label class="radio-container"
>Other<input
type="radio"
name="gender"
value="unisex"
v-model="formData.gender.value"/><span
class="checkmark"
></span
></label>
</div>
<div
:class="{
'edit-profile-email': true,
'input-group': true,
'error-input': formData.email.showError
}"
v-if="isEmail"
>
<label class="input-title" for="email"
>Email {{ isEmailRequired }}</label
><input
type="text"
name="email"
required=""
v-model="formData.email.value"
@input="validateEmail"
:disabled="isEmailExist"
/>
<p class="error-text">
{{ formData.email.errorMessage }}
</p>
</div>
<div class="edit-profile-mobile-input">
<mobile-input
:mobile="getMobileNumber"
:countryCode="getCountryCode"
:disable="isMobileDisabled"
@change="onChange"
ref="mobileInput"
/>
</div>
<div
class="edit-profile-alert alert-error"
v-if="updateProfileError"
>
<span class="alert-message">{{
updateProfileErrorMsg
}}</span>
</div>
<button
class="update-btn secondary-btn"
@click="updateButtonClick(accountData)"
type="submit"
>
Update
</button>
<button
class="logout-btn secondary-btn"
@click="cancelButtonClick(accountData)"
v-if="isCancelButton"
>
Cancel
</button>
<button
class="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>