From 9c37af9477adb314cce58d4634ffd120ac2691bc Mon Sep 17 00:00:00 2001
From: Zhigang Wang <zhigangw@hotmail.com>
Date: Tue, 28 May 2024 22:15:36 -0700
Subject: [PATCH] added 'update' and 'cancel' function for self-intra

---
 .../src/pages/user/account/UserProfile.vue    | 637 ++++++------------
 frontend/src/pages/user/requests/Propose.vue  |   2 +-
 2 files changed, 189 insertions(+), 450 deletions(-)

diff --git a/frontend/src/pages/user/account/UserProfile.vue b/frontend/src/pages/user/account/UserProfile.vue
index 2e9c544..9f9f0ea 100644
--- a/frontend/src/pages/user/account/UserProfile.vue
+++ b/frontend/src/pages/user/account/UserProfile.vue
@@ -7,13 +7,8 @@
           <span v-if="accountNeedAttention" class="account-summary-header-attention-span">!</span>
         </div>
         <div class="account-summary-content-container" id="account-summary">
-          <button
-            class="profile-item-container-button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-id"
-            aria-expanded="false"
-            aria-controls="collapse-user-id"
-          >
+          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-id"
+            aria-expanded="false" aria-controls="collapse-user-id">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-user-id">User ID</label>
               <span class="profile-item-span" id="account-summary-user-id">
@@ -21,25 +16,15 @@
               </span>
             </div>
           </button>
-          <button
-            class="profile-item-container-button-1"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-password"
-            aria-expanded="false"
-            aria-controls="collapse-password"
-          >
+          <button class="profile-item-container-button-1" data-bs-toggle="collapse" data-bs-target="#collapse-password"
+            aria-expanded="false" aria-controls="collapse-password">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-password">Password</label>
               <span class="profile-item-span" id="account-summary-password"> ******** </span>
             </div>
           </button>
-          <button
-            class="profile-item-container-button-4"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-email"
-            aria-expanded="false"
-            aria-controls="collapse-user-email"
-          >
+          <button class="profile-item-container-button-4" data-bs-toggle="collapse" data-bs-target="#collapse-user-email"
+            aria-expanded="false" aria-controls="collapse-user-email">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-email">Email</label>
               <span class="profile-item-span" id="account-summary-email">
@@ -47,13 +32,8 @@
               </span>
             </div>
           </button>
-          <button
-            class="profile-item-container-button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-mobile"
-            aria-expanded="false"
-            aria-controls="collapse-user-mobile"
-          >
+          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-mobile"
+            aria-expanded="false" aria-controls="collapse-user-mobile">
             <div class="profile-item-container">
               <label class="profile-item-label" for="account-summary-mobile">Mobile</label>
               <span class="profile-item-span" id="account-summary-mobile">
@@ -63,71 +43,33 @@
           </button>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-user-id"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse" id="collapse-user-id" aria-labelledby="account-summary" data-bs-parent="#account-panel">
         <div class="user-id-password-operation-pannel-container">
           <div class="user-id-password-operation-container">
             <div class="user-id-operation-content-container">
               <label class="profile-item-label" for="user-id-operation-input">User ID(FILD)</label>
-              <input
-                class="user-id-operation-input"
-                type="text"
-                v-model="userProfile.account.basic.FLID.identity"
-                readonly="true"
-                v-tooltip
-                title="Generated automatically"
-                delay='{"show":"500", "hide":"100"}'
-              />
+              <input class="user-id-operation-input" type="text" v-model="userProfile.account.basic.FLID.identity"
+                readonly="true" v-tooltip title="Generated automatically" delay='{"show":"500", "hide":"100"}' />
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-password"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse" id="collapse-password" aria-labelledby="account-summary" data-bs-parent="#account-panel">
         <div class="user-id-password-operation-pannel-container">
           <div class="user-id-password-operation-container">
             <div class="user-password-operation-content-container">
               <label class="profile-item-label" for="user-password-operation-input">Password</label>
-              <input
-                class="user-password-operation-input"
-                type="password"
-                v-model="passwordOperation.password"
-                :placeholder="passwordOperation.placeholder"
-                readonly="true"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingPassword($event)"
-                @blur="stopEdittingPassword($event)"
-                @keyup.enter="blurInput($event)"
-              />
+              <input class="user-password-operation-input" type="password" v-model="passwordOperation.password"
+                :placeholder="passwordOperation.placeholder" readonly="true" v-tooltip title="Click to edit"
+                delay='{"show":"500", "hide":"100"}' @click="edittingPassword($event)"
+                @blur="stopEdittingPassword($event)" @keyup.enter="blurInput($event)" />
             </div>
             <div class="user-password-operation-content-container">
-              <label class="profile-item-label" for="user-id-operation-input"
-                >Repeat password</label
-              >
-              <input
-                class="user-password-operation-input"
-                type="password"
-                v-model="passwordOperation.password2"
-                :placeholder="passwordOperation.placeholder2"
-                readonly=" true"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingPassword2($event)"
-                @blur="stopEdittingPassword2($event)"
-                @keyup.enter="blurInput($event)"
-                ref="password2Input"
-              />
+              <label class="profile-item-label" for="user-id-operation-input">Repeat password</label>
+              <input class="user-password-operation-input" type="password" v-model="passwordOperation.password2"
+                :placeholder="passwordOperation.placeholder2" readonly=" true" v-tooltip title="Click to edit"
+                delay='{"show":"500", "hide":"100"}' @click="edittingPassword2($event)"
+                @blur="stopEdittingPassword2($event)" @keyup.enter="blurInput($event)" ref="password2Input" />
             </div>
           </div>
           <p v-if="passwordOperation.message" class="error-input">
@@ -135,67 +77,29 @@
           </p>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-user-email"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse" id="collapse-user-email" aria-labelledby="account-summary" data-bs-parent="#account-panel">
         <div class="user-email-operation-container">
           <div class="user-email-operation-content-container">
             <div class="user-email-operation-content-email-container">
               <label class="profile-item-label" for="user-email-operation-input">Email</label>
-              <input
-                class="user-email-operation-input"
-                type="text"
-                v-model="emailOperation.email.address"
-                readonly="true"
-                v-tooltip
-                title="Click to update"
-                delay='{"show":"500", "hide":"100"}'
-                @click="edittingEmail($event)"
-                @blur="stopEdittingEmail($event)"
-                @keyup.enter="blurInput($event)"
-              />
+              <input class="user-email-operation-input" type="text" v-model="emailOperation.email.address" readonly="true"
+                v-tooltip title="Click to update" delay='{"show":"500", "hide":"100"}' @click="edittingEmail($event)"
+                @blur="stopEdittingEmail($event)" @keyup.enter="blurInput($event)" />
             </div>
-            <div
-              v-if="emailOperation.verifyingMode"
-              class="user-email-operation-content-code-container"
-            >
-              <label class="profile-item-label" for="user-email-verification-code-operation-input"
-                >Code</label
-              >
-              <input
-                class="user-email-operation-input"
-                type="text"
-                v-model="emailOperation.verificationCode"
-                placeholder="verification code"
-                v-tooltip
-                title="Put the verification code received in the email"
-                delay='{"show":"500", "hide":"100"}'
-                @blur="stopEdittingEmailVerificationCode($event)"
-                @keyup.enter="blurInput($event)"
-              />
+            <div v-if="emailOperation.verifyingMode" class="user-email-operation-content-code-container">
+              <label class="profile-item-label" for="user-email-verification-code-operation-input">Code</label>
+              <input class="user-email-operation-input" type="text" v-model="emailOperation.verificationCode"
+                placeholder="verification code" v-tooltip title="Put the verification code received in the email"
+                delay='{"show":"500", "hide":"100"}' @blur="stopEdittingEmailVerificationCode($event)"
+                @keyup.enter="blurInput($event)" />
             </div>
-            <div
-              v-if="!emailOperation.verifyingMode"
-              class="user-email-operation-content-verify-container"
-            >
-              <label class="profile-item-label" for="user-email-operation-input"
-                >Verification</label
-              >
-              <button
-                class="user-email-operation-verified-button"
-                :disabled="emailOperation.email.verified"
-                @click="startVerifyingEmail()"
-                v-tooltip
-                :title="
-                  emailOperation.email.verified
-                    ? 'The email has been verified'
-                    : 'The email needs to be verify'
-                "
-                delay='{"show":"500", "hide":"100"}'
-              >
+            <div v-if="!emailOperation.verifyingMode" class="user-email-operation-content-verify-container">
+              <label class="profile-item-label" for="user-email-operation-input">Verification</label>
+              <button class="user-email-operation-verified-button" :disabled="emailOperation.email.verified"
+                @click="startVerifyingEmail()" v-tooltip :title="emailOperation.email.verified
+                  ? 'The email has been verified'
+                  : 'The email needs to be verify'
+                  " delay='{"show":"500", "hide":"100"}'>
                 {{ emailOperation.email.verified ? 'Verified' : 'Verify' }}
               </button>
             </div>
@@ -203,68 +107,29 @@
           <p v-if="emailOperation.message" class="error-input">{{ emailOperation.message }}</p>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-user-mobile"
-        aria-labelledby="account-summary"
-        data-bs-parent="#account-panel"
-      >
+      <div class="collapse" id="collapse-user-mobile" aria-labelledby="account-summary" data-bs-parent="#account-panel">
         <div class="user-mobile-operation-pannel-container">
           <div class="user-mobile-operation-content-container">
             <div class="user-mobile-operation-content-number-container">
-              <label class="profile-item-label" for="user-email-operation-number-input"
-                >Mobile</label
-              >
-              <input
-                class="user-mobile-operation-number-input"
-                type="text"
-                v-model="mobileOperation.mobile.number"
-                readonly="true"
-                v-tooltip
-                title="Click to update"
-                @click="edittingMobile($event)"
-                @blur="stopEdittingMobile($event)"
-                @keyup.enter="blurInput($event)"
-              />
+              <label class="profile-item-label" for="user-email-operation-number-input">Mobile</label>
+              <input class="user-mobile-operation-number-input" type="text" v-model="mobileOperation.mobile.number"
+                readonly="true" v-tooltip title="Click to update" @click="edittingMobile($event)"
+                @blur="stopEdittingMobile($event)" @keyup.enter="blurInput($event)" />
             </div>
-            <div
-              v-if="mobileOperation.verifyingMode"
-              class="user-mobile-operation-content-code-container"
-            >
-              <label class="profile-item-label" for="user-mobile-verification-code-operation-input"
-                >Code</label
-              >
-              <input
-                class="user-mobile-operation-code-input"
-                type="text"
-                v-model="mobileOperation.verificationCode"
-                placeholder="verification code"
-                v-tooltip
-                title="Put the verification code received in the mobile number"
-                delay='{"show":"500", "hide":"100"}'
-                @blur="stopEdittingMobileVerificationCode($event)"
-                @keyup.enter="blurInput($event)"
-              />
+            <div v-if="mobileOperation.verifyingMode" class="user-mobile-operation-content-code-container">
+              <label class="profile-item-label" for="user-mobile-verification-code-operation-input">Code</label>
+              <input class="user-mobile-operation-code-input" type="text" v-model="mobileOperation.verificationCode"
+                placeholder="verification code" v-tooltip title="Put the verification code received in the mobile number"
+                delay='{"show":"500", "hide":"100"}' @blur="stopEdittingMobileVerificationCode($event)"
+                @keyup.enter="blurInput($event)" />
             </div>
-            <div
-              v-if="!mobileOperation.verifyingMode"
-              class="user-mobile-operation-content-verify-container"
-            >
-              <label class="profile-item-label" for="user-mobile-operation-input"
-                >Verification</label
-              >
-              <button
-                class="user-mobile-operation-verified-button"
-                :disabled="mobileOperation.mobile.verified"
-                @click="startVerifyingMobile()"
-                v-tooltip
-                :title="
-                  mobileOperation.mobile.verified
-                    ? 'The mobile number has been verified'
-                    : 'The mobile number needs to be verify'
-                "
-                delay='{"show":"500", "hide":"100"}'
-              >
+            <div v-if="!mobileOperation.verifyingMode" class="user-mobile-operation-content-verify-container">
+              <label class="profile-item-label" for="user-mobile-operation-input">Verification</label>
+              <button class="user-mobile-operation-verified-button" :disabled="mobileOperation.mobile.verified"
+                @click="startVerifyingMobile()" v-tooltip :title="mobileOperation.mobile.verified
+                  ? 'The mobile number has been verified'
+                  : 'The mobile number needs to be verify'
+                  " delay='{"show":"500", "hide":"100"}'>
                 {{ mobileOperation.mobile.verified ? 'Verified' : 'Verify' }}
               </button>
             </div>
@@ -279,17 +144,10 @@
           <label class="personal-summary-header-label" for="personal-summary">Personal</label>
         </div>
         <div class="personal-summary-content-container" id="personal-summary">
-          <button
-            class="profile-item-container-button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-user-identity"
-            aria-expanded="false"
-            aria-controls="collapse-user-identity"
-          >
+          <button class="profile-item-container-button" data-bs-toggle="collapse" data-bs-target="#collapse-user-identity"
+            aria-expanded="false" aria-controls="collapse-user-identity">
             <div class="profile-item-container">
-              <label class="profile-item-label" for="account-summary-user-fullname"
-                >Full name</label
-              >
+              <label class="profile-item-label" for="account-summary-user-fullname">Full name</label>
               <span class="profile-item-span" id="account-summary-user-fullname">
                 {{ userProfile.account.basic.first_name }}
                 {{ userProfile.account.basic.last_name }}
@@ -297,30 +155,18 @@
             </div>
           </button>
 
-          <button
-            class="profile-item-container-button-1"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-photo"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-photo"
-          >
+          <button class="profile-item-container-button-1" data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-photo" aria-expanded="false"
+            aria-controls="collapse-personal-user-photo">
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
-              <img
-                class="personal-summary-user-portrait-img"
-                alt="user portrait"
-                id="personal-photo-operation-image"
-                src="@/assets/images/default-user-portrait.png"
-              />
+              <img class="personal-summary-user-portrait-img" alt="user portrait" id="personal-photo-operation-image"
+                src="@/assets/images/default-user-portrait.png" />
             </div>
           </button>
-          <button
-            class="profile-item-container-button-4"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-user-intro"
-            aria-expanded="false"
-            aria-controls="collapse-personal-user-intro"
-          >
+          <button class="profile-item-container-button-4" data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-user-intro" aria-expanded="false"
+            aria-controls="collapse-personal-user-intro">
             <div class="profile-item-container">
               <label class="profile-item-label" for="personal-summary-self-intro">Self-intro</label>
               <span class="profile-item-span" id="personal-summary-self-intro">
@@ -328,17 +174,11 @@
               </span>
             </div>
           </button>
-          <button
-            class="profile-item-container-button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-personal-earning-now"
-            aria-expanded="false"
-            aria-controls="collapse-personal-earning-now"
-          >
+          <button class="profile-item-container-button" data-bs-toggle="collapse"
+            data-bs-target="#collapse-personal-earning-now" aria-expanded="false"
+            aria-controls="collapse-personal-earning-now">
             <div class="profile-item-container">
-              <label class="profile-item-label" for="personal-summary-earning-now"
-                >Earning now</label
-              >
+              <label class="profile-item-label" for="personal-summary-earning-now">Earning now</label>
               <span class="profile-item-span" id="personal-summary-earning-now">
                 {{ userProfile.account.provider.accepting_request ? 'Yes' : 'No' }}
               </span>
@@ -346,146 +186,77 @@
           </button>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-user-identity"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse" id="collapse-user-identity" aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel">
         <div class="user-identity-operation-container">
           <div class="user-identity-operation-content-container">
             <div class="user-first-name-operation-container">
-              <label class="profile-item-label" for="user-first-name-operation-input"
-                >First name</label
-              >
-              <input
-                class="user-first-name-operation-input"
-                type="text"
-                v-model="identityOperation.first_name"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-                readonly="true"
-                @click="edittingFirstname($event)"
-                @blur="stopEdittingFirstname($event)"
-                @keyup.enter="blurInput($event)"
-              />
+              <label class="profile-item-label" for="user-first-name-operation-input">First name</label>
+              <input class="user-first-name-operation-input" type="text" v-model="identityOperation.first_name" v-tooltip
+                title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
+                @click="edittingFirstname($event)" @blur="stopEdittingFirstname($event)"
+                @keyup.enter="blurInput($event)" />
             </div>
             <div class="user-last-name-operation-container">
-              <label class="profile-item-label" for="user-last-name-operation-input"
-                >Last name</label
-              >
-              <input
-                class="user-last-name-operation-input"
-                type="text"
-                v-model="identityOperation.last_name"
-                readonly="true"
-                @click="edittingLastname($event)"
-                @blur="stopEdittingLastname($event)"
-                @keyup.enter="blurInput($event)"
-                v-tooltip
-                title="Click to edit"
-                delay='{"show":"500", "hide":"100"}'
-              />
+              <label class="profile-item-label" for="user-last-name-operation-input">Last name</label>
+              <input class="user-last-name-operation-input" type="text" v-model="identityOperation.last_name"
+                readonly="true" @click="edittingLastname($event)" @blur="stopEdittingLastname($event)"
+                @keyup.enter="blurInput($event)" v-tooltip title="Click to edit" delay='{"show":"500", "hide":"100"}' />
             </div>
           </div>
         </div>
       </div>
 
-      <div
-        class="collapse"
-        id="collapse-personal-user-photo"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse" id="collapse-personal-user-photo" aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel">
         <div class="personal-photo-operation-container">
           <label class="profile-item-label" for="personal-photo-operation-image">Photo</label>
-          <img
-            class="personal-operation-user-portrait-img"
-            id="personal-photo-operation-image"
-            alt="user portrait"
-            src="@/assets/images/default-user-portrait.png"
-            v-tooltip
-            title="Click to update"
-            @click="selectUserPhoto()"
-          />
-          <input
-            ref="uploadUserPhotoInput"
-            type="file"
-            :accept="identityOperation.photo.acceptableType"
-            style="display: none"
-            @change="onUserPhotoChange($event)"
-          />
+          <img class="personal-operation-user-portrait-img" id="personal-photo-operation-image" alt="user portrait"
+            src="@/assets/images/default-user-portrait.png" v-tooltip title="Click to update"
+            @click="selectUserPhoto()" />
+          <input ref="uploadUserPhotoInput" type="file" :accept="identityOperation.photo.acceptableType"
+            style="display: none" @change="onUserPhotoChange($event)" />
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-personal-user-intro"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse" id="collapse-personal-user-intro" aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel">
         <div class="personal-self-intro-operation-container">
           <div class="personal-self-intro-operation-header-container">
-            <label class="personal-self-intro-content-label" for="personal-self-intro-editor"
-              >Self-intro</label
-            >
+            <label class="personal-self-intro-content-label" for="personal-self-intro-editor">Self-intro</label>
+            <div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-header-editing-action-container">
+              <button class="personal-self-intro-template-button">templates</button>
+            </div>
           </div>
-          <div
-            class="personal-self-intro-content-editor"
-            id="personal-self-intro-editor"
-            v-html="personalOperation.self_intro.content_html"
-            contenteditable="false"
-            v-tooltip
-            title="Click to edit"
-            delay='{"show":"500", "hide":"100"}'
-            @click="edittingSelfintro($event)"
-            @blur="stopEdittingSelfintro($event)"
-            @keyup.enter="blurInput($event)"
-          ></div>
+          <div v-if="personalOperation.self_intro.is_editing" class="self-intro-in-content-editing-action-container">
+            <button @click="updateSelfIntro()" class="in-context-foward-button">Update</button>
+            <button @click="stopEdittingSelfintro($event)" class="in-context-back-button">Cancel</button>
+          </div>
+          <div class="personal-self-intro-content-editor" id="personal-self-intro-editor" ref="personal_self_intro_editor_div"
+            v-html="personalOperation.self_intro.content_html" contenteditable="false" v-tooltip title="Click to edit"
+            delay='{"show":"500", "hide":"100"}' @click="edittingSelfintro($event)" @keyup="keyUpOnSelfIntroEditor($event)"></div>
         </div>
       </div>
-      <div
-        class="collapse"
-        id="collapse-personal-earning-now"
-        aria-labelledby="personal-summary"
-        data-bs-parent="#personal-panel"
-      >
+      <div class="collapse" id="collapse-personal-earning-now" aria-labelledby="personal-summary"
+        data-bs-parent="#personal-panel">
         <div class="personal-earning-now-operation-container">
           <div class="personal-earning-now-content-container">
             <div class="form-check">
-              <input
-                class="form-check-input"
-                type="checkbox"
-                id="personal-earning-now-checkbox"
-                v-model="personalOperation.accepting_request"
-                @click="updateAcceptingRequest($event)"
-                :disabled="!paymentOperation.ready_to_receive_money"
-              />
-              <label class="form-check-label" for="personal-earning-now-checkbox"
-                >I want to be a service provider and earn money</label
-              >
+              <input class="form-check-input" type="checkbox" id="personal-earning-now-checkbox"
+                v-model="personalOperation.accepting_request" @click="updateAcceptingRequest($event)"
+                :disabled="!paymentOperation.ready_to_receive_money" />
+              <label class="form-check-label" for="personal-earning-now-checkbox">I want to be a service provider and earn
+                money</label>
               <br />
               <label v-if="personalOperation.show_stripe_status" style="color: red">
-                * Stripe account onboarding is not completed.</label
-              >
+                * Stripe account onboarding is not completed.</label>
             </div>
             <div class="personal-expected-salary-content-container">
-              <label class="profile-item-label" for="personal-expected-salary"
-                >Expected hourly salary</label
-              >
+              <label class="profile-item-label" for="personal-expected-salary">Expected hourly salary</label>
               <div class="input-group">
-                <input
-                  class="personal-expected-salary-input"
-                  id="personal-expected-salary"
-                  v-tooltip
-                  title="Click to edit"
-                  delay='{"show":"500", "hide":"100"}'
-                  readonly="true"
-                  @click="edittingExpectedSalary($event)"
-                  @blur="stopedittingExpectedSalary($event)"
-                  @keyup.enter="blurInput($event)"
-                  v-model="personalOperation.expected_salary.hourly"
-                />
+                <input class="personal-expected-salary-input" id="personal-expected-salary" v-tooltip
+                  title="Click to edit" delay='{"show":"500", "hide":"100"}' readonly="true"
+                  @click="edittingExpectedSalary($event)" @blur="stopedittingExpectedSalary($event)"
+                  @keyup.enter="blurInput($event)" v-model="personalOperation.expected_salary.hourly" />
                 <span class="input-group-text">{{
                   userProfile.account.provider.expected_salary.currency
                 }}</span>
@@ -493,182 +264,128 @@
             </div>
           </div>
           <div class="personal-payment-container">
-            <img
-              v-if="Is_Wechat_QR_Code_Payment()"
-              class="personal-payment-wechat-qr-code-image"
-              :src="paymentOperation.wechat_qr_code_img.data"
-              @click="selectWechatQRCodePhoto()"
-            />
-            <input
-              v-if="Is_Wechat_QR_Code_Payment()"
-              ref="uploadWechatQRCodePhotoInput"
-              type="file"
-              :accept="paymentOperation.wechat_qr_code_img.acceptableType"
-              style="display: none"
-              @change="onUploadWechatQRCodePhoto($event)"
-            />
+            <img v-if="Is_Wechat_QR_Code_Payment()" class="personal-payment-wechat-qr-code-image"
+              :src="paymentOperation.wechat_qr_code_img.data" @click="selectWechatQRCodePhoto()" />
+            <input v-if="Is_Wechat_QR_Code_Payment()" ref="uploadWechatQRCodePhotoInput" type="file"
+              :accept="paymentOperation.wechat_qr_code_img.acceptableType" style="display: none"
+              @change="onUploadWechatQRCodePhoto($event)" />
 
-            <span>Have you linked your strip account?</span
-            ><button v-if="Is_Stripe_Payment()" @click="visitStripe()">Visit Stripe</button>
+            <span>Have you linked your strip account?</span><button v-if="Is_Stripe_Payment()"
+              @click="visitStripe()">Visit Stripe</button>
           </div>
-          <span v-if="personalOperation.accepting_request" class="operation-note-text"
-            >You are a service provider now. Please review your self-intro to reflect your skills to
-            deliver projects.</span
-          >
+          <span v-if="personalOperation.accepting_request" class="operation-note-text">You are a service provider now.
+            Please review your self-intro to reflect your skills to
+            deliver projects.</span>
         </div>
       </div>
     </div>
     <div class="accordion" id="accordion-achievement-panel">
       <div class="accordion-item">
         <h2 class="accordion-header">
-          <button
-            class="accordion-button"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapse-achievement"
-            aria-expanded="true"
-            aria-controls="collapse-achievement"
-          >
+          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-achievement"
+            aria-expanded="true" aria-controls="collapse-achievement">
             <div class="achievement-bar-container">
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-stay-on-operation"
-                  >On Freeleaps</label
-                >
+                <label class="profile-item-label" for="achievement-stay-on-operation">On Freeleaps</label>
                 <span class="profile-item-span" id="achievement-stay-on-operation">
                   {{ userProfile.achievemnt.activeness.days_of_staying_on }} day(s)
                 </span>
               </div>
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content"
-                  >Connections</label
-                >
+                <label class="profile-item-label" for="achievement-connections-content">Connections</label>
                 <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.connections }}</span
-                >
+                  {{ userProfile.achievemnt.activeness.connections }}</span>
               </div>
               <div class="achievement-summary-item-container">
-                <label class="profile-item-label" for="achievement-connections-content"
-                  >Messages</label
-                >
+                <label class="profile-item-label" for="achievement-connections-content">Messages</label>
                 <span class="profile-item-span" id="achievement-connections-content">
-                  {{ userProfile.achievemnt.activeness.messages }}</span
-                >
+                  {{ userProfile.achievemnt.activeness.messages }}</span>
               </div>
               <div class="achievement-summary-item-container">
                 <label class="profile-item-label" for="achievement-credit-content">Credit</label>
                 <span class="profile-item-span" id="achievement-credit-content">
-                  {{ userProfile.achievemnt.activeness.credit }}</span
-                >
+                  {{ userProfile.achievemnt.activeness.credit }}</span>
               </div>
             </div>
           </button>
         </h2>
-        <div
-          id="collapse-achievement"
-          class="accordion-collapse collapse show"
-          data-bs-parent="#collapse-achievement"
-        >
+        <div id="collapse-achievement" class="accordion-collapse collapse show" data-bs-parent="#collapse-achievement">
           <div class="accordion-body">
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation"
-                  >Total spending</label
-                >
+                <label class="profile-item-label" for="achievement-spending-operation">Total spending</label>
                 <span class="achievement-summary-spending-span" id="achievement-spending-operation">
                   {{ userProfile.achievemnt.issuer.spending.total }}
                   {{ userProfile.achievemnt.issuer.spending.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
-                  >12-month spending</label
-                >
+                <label class="profile-item-label" for="achievement-twelve-month-spending-content">12-month
+                  spending</label>
                 <span class="profile-item-span" id="achievement-twelve-month-spending-content">
                   {{ userProfile.achievemnt.issuer.spending.twelve_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.spending.currency }}</span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
-                  >3-month spending</label
-                >
+                <label class="profile-item-label" for="achievement-thirty-day-spending-content">3-month spending</label>
                 <span class="profile-item-span" id="achievement-thirty-day-spending-content">
                   {{ userProfile.achievemnt.issuer.spending.three_month }}
-                  {{ userProfile.achievemnt.issuer.spending.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.spending.currency }}</span>
               </div>
               <div class="achievement-item-container">
                 <label class="profile-item-label" for="achievement-deposit-content">Deposit</label>
                 <span class="profile-item-span" id="achievement-deposit-content">
                   {{ userProfile.achievemnt.issuer.deposit.available }}
-                  {{ userProfile.achievemnt.issuer.deposit.currency }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.deposit.currency }}</span>
               </div>
             </div>
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-spending-operation"
-                  >Posted</label
-                >
+                <label class="profile-item-label" for="achievement-spending-operation">Posted</label>
                 <span class="profile-item-span" id="achievement-spending-operation">
                   {{ userProfile.achievemnt.issuer.request.issued }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-spending-content"
-                  >Accomplished</label
-                >
+                <label class="profile-item-label" for="achievement-twelve-month-spending-content">Accomplished</label>
                 <span class="profile-item-span" id="achievement-twelve-month-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.request.accomplished }}</span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-spending-content"
-                  >Active</label
-                >
+                <label class="profile-item-label" for="achievement-thirty-day-spending-content">Active</label>
                 <span class="profile-item-span" id="achievement-thirty-day-spending-content">
-                  {{ userProfile.achievemnt.issuer.request.active }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.request.active }}</span>
               </div>
               <div class="achievement-item-container">
                 <label class="profile-item-label" for="achievement-deposit-content">Ongoing</label>
                 <span class="profile-item-span" id="achievement-deposit-content">
-                  {{ userProfile.achievemnt.issuer.request.ongoing }}</span
-                >
+                  {{ userProfile.achievemnt.issuer.request.ongoing }}</span>
               </div>
             </div>
 
             <div class="achievement-panel-container">
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-total-earning-content"
-                  >Total earning</label
-                >
+                <label class="profile-item-label" for="achievement-total-earning-content">Total earning</label>
                 <span class="profile-item-span" id="achievement-total-earning-content">
                   {{ userProfile.achievemnt.provider.earnings.total }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-twelve-month-earning-content"
-                  >12-month earning</label
-                >
+                <label class="profile-item-label" for="achievement-twelve-month-earning-content">12-month earning</label>
                 <span class="profile-item-span" id="achievement-twelve-month-earning-content">
                   {{ userProfile.achievemnt.provider.earnings.twelve_month }}
                   {{ userProfile.achievemnt.provider.earnings.currency }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-thirty-day-earning-content"
-                  >Delivered</label
-                >
+                <label class="profile-item-label" for="achievement-thirty-day-earning-content">Delivered</label>
                 <span class="profile-item-span" id="achievement-thirty-day-earning-content">
                   {{ userProfile.achievemnt.provider.deliveries.delivered_projects }}
                 </span>
               </div>
               <div class="achievement-item-container">
-                <label class="profile-item-label" for="achievement-delivering-time"
-                  >Delivering time</label
-                >
+                <label class="profile-item-label" for="achievement-delivering-time">Delivering time</label>
                 <span class="profile-item-span" id="achievement-delivering-time">
                   {{
                     userProfile.achievemnt.provider.deliveries.delivering_time_per_project_in_day
@@ -687,7 +404,7 @@
 <script>
 import { moneyCollectionTypeEnum } from '../../../types/index'
 
-import { UserProfileApi, elementHandler } from '../../../utils/index'
+import { UserProfileApi, elementHandler,textAreaAujuster } from '../../../utils/index'
 
 export default {
   name: 'UserProfile',
@@ -768,7 +485,8 @@ export default {
       personalOperation: {
         self_intro: {
           summary: null,
-          content_html: null
+          content_html: "",
+          is_editing: false
         },
         expected_salary: {
           hourly: 140
@@ -1067,23 +785,24 @@ export default {
     //self-intro
     edittingSelfintro($event) {
       elementHandler.edittingContent($event.target)
+      this.personalOperation.self_intro.is_editing = true
       $event.target.focus()
     },
     stopEdittingSelfintro($event) {
       elementHandler.stopEdittingContent($event.target)
-      if (
-        !(
-          this.personalOperation.self_intro.content_html ===
-          this.userProfile.account.basic.self_intro.content_html
-        )
-      ) {
-        if (!this.personalOperation.self_intro.content_html) {
-          this.updateSelfIntro(this.personalOperation.self_intro.content_html)
-        }
-      }
+      this.personalOperation.self_intro.is_editing = false
+      this.personalOperation.self_intro.content_html = this.userProfile.account.basic.self_intro.content_html
     },
-    updateSelfIntro(content) {
-      UserProfileApi.updateSelfIntro(content)
+    keyUpOnSelfIntroEditor($event){
+      let element = $event.target
+      textAreaAujuster.adjustHight(element)
+    },
+    updateSelfIntro() {
+      this.personalOperation.self_intro.content_html = this.$refs.personal_self_intro_editor_div.innerHTML;
+      if (!this.personalOperation.self_intro.content_html) {
+        return;
+      }
+      UserProfileApi.updateSelfIntro(this.personalOperation.self_intro.content_html)
         .then((response) => {
           this.userProfile.account.basic.self_intro = response.data.self_intro
           this.personalOperation.self_intro = response.data.self_intro
@@ -1555,11 +1274,31 @@ export default {
   width: fit-content;
 }
 
+.self-intro-in-header-editing-action-container {
+  @extend .flex-row-container;
+  @extend .justify-content-around;
+  width: fit-content;
+}
+
+.self-intro-in-content-editing-action-container {
+  @extend .float-end;
+  @extend .flex-row-container;
+  @extend .justify-content-end;
+  @extend .w-20;
+}
+
 .personal-self-intro-template-button {
   @extend .initiate-button;
   width: fit-content;
 }
-
+.in-context-foward-button{
+  @extend .proceed-button;
+  width: fit-content;
+}
+.in-context-back-button{
+  @extend .back-button;
+  width: fit-content;
+}
 .personal-self-intro-content-editor {
   @extend .container;
   @extend .border;
diff --git a/frontend/src/pages/user/requests/Propose.vue b/frontend/src/pages/user/requests/Propose.vue
index a8e0fb5..8cab592 100644
--- a/frontend/src/pages/user/requests/Propose.vue
+++ b/frontend/src/pages/user/requests/Propose.vue
@@ -284,7 +284,7 @@ export default {
     back() {
       this.mnx_goBack()
     },
-    coverLetterDone($event) {
+    coverLetterDone(event) {
       this.proposal.content = event.target.innerHTML
     },
     submit() {