Edit Profile

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

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>