ts-glitter 20.9.4 → 20.9.6

package/lowcode/public-components/user-manager/um-login.ts

@@ -5,7 +5,7 @@ import { Language } from '../../glitter-base/global/language.js';
 import { Tool } from '../../modules/tool.js';
 import { GlobalUser } from '../../glitter-base/global/global-user.js';
 import { ApiUser } from '../../glitter-base/route/user.js';
-import {FormCheck} from "../../cms-plugin/module/form-check.js";
+import { FormCheck } from '../../cms-plugin/module/form-check.js';
 import { ShareDialog } from '../../glitterBundle/dialog/ShareDialog.js';
 
 const html = String.raw;
@@ -58,13 +58,18 @@ export class UMLogin {
           }
 
           if (vm.viewType === 'send_forget_pwd_email') {
-            return html`<section class="${gClass('container')}">
+            return html` <section class="${gClass('container')}">
               <div class="${gClass('box')}">
                 <div class="${gClass('login-title')}">${Language.text('forgot_password')}</div>
                 <div class="w-100 d-flex flex-column gap-3">
                   <div>
                     <label class="${gClass('label')}">${Language.text('email')}</label>
-                    <input class="bgw-input" type="text" id="vm-email" placeholder="${Language.text('email_placeholder')}" />
+                    <input
+                      class="bgw-input"
+                      type="text"
+                      id="vm-email"
+                      placeholder="${Language.text('email_placeholder')}"
+                    />
                   </div>
                   <div
                     class="${gClass('button')} my-2"
@@ -81,13 +86,18 @@ export class UMLogin {
           }
 
           if (vm.viewType === 'validation_code') {
-            return html`<section class="${gClass('container')}">
+            return html` <section class="${gClass('container')}">
               <div class="${gClass('box')}">
                 <div class="${gClass('login-title')}">${Language.text('enter_verification_code')}</div>
                 <div class="w-100 d-flex flex-column gap-3">
                   <div>
                     <label class="${gClass('label')}">${Language.text('verification_code')}</label>
-                    <input class="bgw-input" type="text" id="vm-code" placeholder="${Language.text('please_enter_verification_code')}" />
+                    <input
+                      class="bgw-input"
+                      type="text"
+                      id="vm-code"
+                      placeholder="${Language.text('please_enter_verification_code')}"
+                    />
                   </div>
                   ${this.sendCodeAgain(gvc, vm.prefix, () => {
                     this.sendResetEmail(widget, vm);
@@ -107,17 +117,27 @@ export class UMLogin {
           }
 
           if (vm.viewType === 'reset_password') {
-            return html`<section class="${gClass('container')}">
+            return html` <section class="${gClass('container')}">
               <div class="${gClass('box')}">
                 <div class="${gClass('login-title')}">${Language.text('reset_password')}</div>
                 <div class="w-100 d-flex flex-column gap-3">
                   <div>
                     <label class="${gClass('label')}">${Language.text('new_password')}</label>
-                    <input class="bgw-input" type="password" id="vm-new-password" placeholder="${Language.text('new_password_placeholder')}" />
+                    <input
+                      class="bgw-input"
+                      type="password"
+                      id="vm-new-password"
+                      placeholder="${Language.text('new_password_placeholder')}"
+                    />
                   </div>
                   <div>
                     <label class="${gClass('label')}">${Language.text('confirm_password')}</label>
-                    <input class="bgw-input" type="password" id="vm-confirm-password" placeholder="${Language.text('please_enter_password_again')}" />
+                    <input
+                      class="bgw-input"
+                      type="password"
+                      id="vm-confirm-password"
+                      placeholder="${Language.text('please_enter_password_again')}"
+                    />
                   </div>
                   <div
                     class="${gClass('button')} my-2"
@@ -134,24 +154,29 @@ export class UMLogin {
           }
 
           if (vm.viewType === 'register') {
-            return html`<section class="${gClass('container')}">
+            return html` <section class="${gClass('container')}">
               <div class="${gClass('box')}">
                 <div class="${gClass('login-title')}">${Language.text('member_register')}</div>
                 <div class="w-100 d-flex flex-column gap-3">
                   ${vm.registerConfig
                     .map((item: any) => {
                       if (item.hidden) return '';
-                      const title = ['name', 'email', 'phone', 'birth'].includes(item.key) ? Language.text(`form_${item.key}`) : item.title;
-                      const placeholder = Language.text(`please_enter_${item.key}`) || item.form_config.place_holder || '';
-                      const cell = html`<div class="position-relative">
+                      const title = ['name', 'email', 'phone', 'birth'].includes(item.key)
+                        ? Language.text(`form_${item.key}`)
+                        : item.title;
+                      const placeholder =
+                        Language.text(`please_enter_${item.key}`) || item.form_config.place_holder || '';
+                      const cell = html` <div class="position-relative">
                         <label class="${gClass('label')}">${title}</label>
                         <input
                           class="bgw-input"
                           type="${item.form_config.type}"
                           id="reg-${item.key}"
-                          ${(item.form_config.type==='date') ? ``:` placeholder="${placeholder}"
+                          ${item.form_config.type === 'date'
+                            ? ``
+                            : ` placeholder="${placeholder}"
                                                 data-placeholder="${placeholder}"`}
-                          onchange="${gvc.event((e) => {
+                          onchange="${gvc.event(e => {
                             if (CheckInput.isEmpty(e.value)) {
                               e.style.color = 'rgba(0,0,0,0)';
                               e.dataset.placeholder = placeholder;
@@ -165,25 +190,34 @@ export class UMLogin {
 
                       if (item.key === 'email' && vm.loginConfig.email_verify) {
                         return html`${cell}
-                        <div>
-                          <label class="${gClass('label')}">${Language.text('email_verification_code')}</label>
-                          <input class="bgw-input" type="text" id="reg-${item.key}-verify" placeholder="${Language.text('please_enter_verification_code')}" />
-                        </div>
-                        ${this.sendCodeAgain(gvc, vm.prefix, () => {
-                          this.sendVerifyEmailCode(widget, `reg-${item.key}`);
-                        })}`;
+                          <div>
+                            <label class="${gClass('label')}">${Language.text('email_verification_code')}</label>
+                            <input
+                              class="bgw-input"
+                              type="text"
+                              id="reg-${item.key}-verify"
+                              placeholder="${Language.text('please_enter_verification_code')}"
+                            />
+                          </div>
+                          ${this.sendCodeAgain(gvc, vm.prefix, () => {
+                            this.sendVerifyEmailCode(widget, `reg-${item.key}`);
+                          })}`;
                       }
 
                       if (item.key === 'phone' && vm.loginConfig.phone_verify) {
                         return html`${cell}
-                        <div>
-                          <label class="${gClass('label')}">${Language.text('sms_verification_code')}</label>
-                          <input class="bgw-input" type="text" id="reg-${item.key}-verify" placeholder="${Language.text('please_enter_verification_code')}" />
-                        </div>
-                        ${this.sendCodeAgain(gvc, vm.prefix, () => {
-
-                          this.sendVerifyPhoneCode(widget, `reg-${item.key}`);
-                        })}`;
+                          <div>
+                            <label class="${gClass('label')}">${Language.text('sms_verification_code')}</label>
+                            <input
+                              class="bgw-input"
+                              type="text"
+                              id="reg-${item.key}-verify"
+                              placeholder="${Language.text('please_enter_verification_code')}"
+                            />
+                          </div>
+                          ${this.sendCodeAgain(gvc, vm.prefix, () => {
+                            this.sendVerifyPhoneCode(widget, `reg-${item.key}`);
+                          })}`;
                       }
 
                       return cell;
@@ -191,11 +225,21 @@ export class UMLogin {
                     .join('')}
                   <div>
                     <label class="${gClass('label')}">${Language.text('password')}</label>
-                    <input class="bgw-input" type="password" id="vm-password" placeholder="${Language.text('please_enter_password')}" />
+                    <input
+                      class="bgw-input"
+                      type="password"
+                      id="vm-password"
+                      placeholder="${Language.text('please_enter_password')}"
+                    />
                   </div>
                   <div>
                     <label class="${gClass('label')}">${Language.text('confirm_password')}</label>
-                    <input class="bgw-input" type="password" id="vm-confirm-password" placeholder="${Language.text('please_enter_password_again')}" />
+                    <input
+                      class="bgw-input"
+                      type="password"
+                      id="vm-confirm-password"
+                      placeholder="${Language.text('please_enter_password_again')}"
+                    />
                   </div>
                   <div
                     class="${gClass('button')} my-2"
@@ -209,17 +253,19 @@ export class UMLogin {
                   <div class="d-flex flex-column gap-2 text-center mt-1">
                     <div class="${gClass('font-16')}">
                       ${Language.text('member_exists_prompt')}<span
-                      class="${gClass('blue-note')}"
-                      onclick="${gvc.event(() => {
-                        this.viewCallback(vm, '');
-                      })}"
-                    >${Language.text('login')}</span
-                    >
+                        class="${gClass('blue-note')}"
+                        onclick="${gvc.event(() => {
+                          this.viewCallback(vm, '');
+                        })}"
+                        >${Language.text('login')}</span
+                      >
                     </div>
                     <div class="${gClass('font-14')}">
-                      ${Language.text('registration_terms_agreement')}<a class="${gClass('blue-note')}" href="/privacy">${Language.text('terms_of_service')}</a>${Language.text(
-                      'and'
-                    )}<a class="${gClass('blue-note')}" href="/term">${Language.text('privacy_policy')}</a>
+                      ${Language.text('registration_terms_agreement')}<a class="${gClass('blue-note')}" href="/privacy"
+                        >${Language.text('terms_of_service')}</a
+                      >${Language.text('and')}<a class="${gClass('blue-note')}" href="/term"
+                        >${Language.text('privacy_policy')}</a
+                      >
                     </div>
                   </div>
                 </div>
@@ -227,26 +273,36 @@ export class UMLogin {
             </section>`;
           }
 
-          return html`<section class="${gClass('container')}">
+          return html` <section class="${gClass('container')}">
             <div class="${gClass('box')}">
               <div class="${gClass('login-title')}">${Language.text('member_login')}</div>
               <div class="w-100 d-flex flex-column gap-3">
                 <div>
                   <label class="${gClass('label')}">${Language.text('email_phone')}</label>
-                  <input class="bgw-input" type="text" id="vm-account" placeholder="${Language.text('email_phone_placeholder')}" />
+                  <input
+                    class="bgw-input"
+                    type="text"
+                    id="vm-account"
+                    placeholder="${Language.text('email_phone_placeholder')}"
+                  />
                 </div>
                 <div>
                   <label class="${gClass('label')}">${Language.text('password')}</label>
-                  <input class="bgw-input" type="password" id="vm-password" placeholder="${Language.text('please_enter_password')}" />
+                  <input
+                    class="bgw-input"
+                    type="password"
+                    id="vm-password"
+                    placeholder="${Language.text('please_enter_password')}"
+                  />
                 </div>
                 <div class="text-end">
-                                <span
-                                  class="${gClass('blue-note')}"
-                                  onclick="${gvc.event(() => {
-                                    vm.viewType = 'send_forget_pwd_email';
-                                  })}"
-                                >${Language.text('forgot_password')}</span
-                                >
+                  <span
+                    class="${gClass('blue-note')}"
+                    onclick="${gvc.event(() => {
+                      vm.viewType = 'send_forget_pwd_email';
+                    })}"
+                    >${Language.text('forgot_password')}</span
+                  >
                 </div>
                 <div
                   class="${gClass('button')} my-2"
@@ -260,36 +316,35 @@ export class UMLogin {
                 <div class="d-flex flex-column gap-2 text-center mt-1">
                   <div class="${gClass('font-16')}">
                     ${Language.text('member_not_exists_prompt')}<span
-                    class="${gClass('blue-note')}"
-                    onclick="${gvc.event(() => {
-                      this.viewCallback(vm, 'register');
-                    })}"
-                  >${Language.text('register')}</span
-                  >
+                      class="${gClass('blue-note')}"
+                      onclick="${gvc.event(() => {
+                        this.viewCallback(vm, 'register');
+                      })}"
+                      >${Language.text('register')}</span
+                    >
                   </div>
                   <div class="${gClass('font-14')}">
-                    ${Language.text('login_terms_agreement')}<a class="${gClass('blue-note')}" href="/privacy">${Language.text('terms_of_service')}</a>${Language.text('and')}<a
-                    class="${gClass('blue-note')}"
-                    href="/term"
-                  >${Language.text('privacy_policy')}</a
-                  >
+                    ${Language.text('login_terms_agreement')}<a class="${gClass('blue-note')}" href="/privacy"
+                      >${Language.text('terms_of_service')}</a
+                    >${Language.text('and')}<a class="${gClass('blue-note')}" href="/term"
+                      >${Language.text('privacy_policy')}</a
+                    >
                   </div>
                 </div>
               </div>
             </div>
           </section>`;
-        }catch (e) {
-          console.log(`error==>`,e)
-          return  ``
+        } catch (e) {
+          console.log(`error==>`, e);
+          return ``;
         }
-
       },
       divCreate: {},
       onCreate: () => {
         if (loadings.view) {
           Promise.all([
             new Promise((resolve, reject) => {
-              ApiUser.getPublicConfig('login_config', 'manager').then((dd) => {
+              ApiUser.getPublicConfig('login_config', 'manager').then(dd => {
                 if (dd.result && dd.response.value) {
                   resolve(dd.response.value);
                 } else {
@@ -298,7 +353,7 @@ export class UMLogin {
               });
             }),
             new Promise((resolve, reject) => {
-              ApiUser.getPublicConfig('custom_form_register', 'manager').then((dd) => {
+              ApiUser.getPublicConfig('custom_form_register', 'manager').then(dd => {
                 try {
                   resolve(dd.response.value.list || []);
                 } catch (e) {
@@ -306,9 +361,9 @@ export class UMLogin {
                 }
               });
             }),
-          ]).then((dataArray) => {
+          ]).then(dataArray => {
             vm.loginConfig = dataArray[0];
-            vm.registerConfig = FormCheck.initialRegisterForm((dataArray[1] as any));
+            vm.registerConfig = FormCheck.initialRegisterForm(dataArray[1] as any);
             setTimeout(() => {
               loadings.view = false;
               gvc.notifyDataChange(ids.view);
@@ -322,96 +377,109 @@ export class UMLogin {
   static addStyle(gvc: GVC, prefix: string) {
     const isPhone = document.body.clientWidth < 768;
     gvc.addStyle(css`
-        .${prefix}-container {
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding-top: ${isPhone ? 0 : '100px'};
-            padding-bottom: ${isPhone ? '0px' : '230px'};
-            overflow: hidden;
-        }
-        .${prefix}-box {
-            border-radius: ${isPhone ? '0px' : '30px'};
-            background: #fff;
-            ${isPhone ? '' : 'box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.15)'};
-            display: flex;
-            width: 576px;
-            padding: ${isPhone ? '56px 16px' : '56px'};
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            gap: 32px;
-            overflow: hidden;
-        }
-        .${prefix}-login-title {
-            color: #393939;
-            text-align: center;
-            font-size: 32px;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 140%;
-            margin-bottom: 24px;
-        }
-        .${prefix}-label {
-            color: #393939;
-            font-size: 16px;
-            font-weight: 500;
-            margin-bottom: 6px;
-        }
-        .${prefix}-button {
-            border-radius: 10px;
-            background: #393939;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            padding: 14px 0;
-            cursor: pointer;
-            height: 48px;
-        }
-        .${prefix}-button:hover {
-            background: #656565;
-        }
-        .${prefix}-button-text {
-            color: #fff;
-            text-align: center;
-            font-size: 16px;
-            font-weight: 700;
-            letter-spacing: 0.64px;
-        }
-        .${prefix}-auth-thrid-button {
-            border-radius: 5px;
-            background: #f1f1f1;
-            height: 50px;
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-        }
-        .${prefix}-auth-thrid-button:hover {
-            background: #dbdbdb;
-        }
-        .${prefix}-blue-note {
-            color: #4d86db;
-            cursor: pointer;
-            margin: 0 4px;
-        }
-        .${prefix}-blue-note:hover {
-            color: #4d86db !important;
-        }
-        .${prefix}-gray-hr {
-            flex: 1 1 auto !important;
-            height: 1px;
-            background-color: #ddd;
-        }
-        .${prefix}-font-16 {
-            font-size: 16px;
-        }
-        .${prefix}-font-14 {
-            font-size: 14px;
-        }
+      .${prefix}-container {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: ${isPhone ? 0 : '100px'};
+        padding-bottom: ${isPhone ? '0px' : '230px'};
+        overflow: hidden;
+      }
+
+      .${prefix}-box {
+        border-radius: ${isPhone ? '0px' : '30px'};
+        background: #fff;
+        ${isPhone ? '' : 'box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.15)'};
+        display: flex;
+        width: 576px;
+        padding: ${isPhone ? '56px 16px' : '56px'};
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 32px;
+        overflow: hidden;
+      }
+
+      .${prefix}-login-title {
+        color: #393939;
+        text-align: center;
+        font-size: 32px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 140%;
+        margin-bottom: 24px;
+      }
+
+      .${prefix}-label {
+        color: #393939;
+        font-size: 16px;
+        font-weight: 500;
+        margin-bottom: 6px;
+      }
+
+      .${prefix}-button {
+        border-radius: 10px;
+        background: #393939;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        padding: 14px 0;
+        cursor: pointer;
+        height: 48px;
+      }
+
+      .${prefix}-button:hover {
+        background: #656565;
+      }
+
+      .${prefix}-button-text {
+        color: #fff;
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        letter-spacing: 0.64px;
+      }
+
+      .${prefix}-auth-thrid-button {
+        border-radius: 5px;
+        background: #f1f1f1;
+        height: 50px;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      .${prefix}-auth-thrid-button:hover {
+        background: #dbdbdb;
+      }
+
+      .${prefix}-blue-note {
+        color: #4d86db;
+        cursor: pointer;
+        margin: 0 4px;
+      }
+
+      .${prefix}-blue-note:hover {
+        color: #4d86db !important;
+      }
+
+      .${prefix}-gray-hr {
+        flex: 1 1 auto !important;
+        height: 1px;
+        background-color: #ddd;
+      }
+
+      .${prefix}-font-16 {
+        font-size: 16px;
+      }
+
+      .${prefix}-font-14 {
+        font-size: 14px;
+      }
     `);
   }
 
@@ -425,85 +493,88 @@ export class UMLogin {
     widget.event('success', { title: text ?? Language.text('login_success') });
     setTimeout(() => {
       ApiUser.getUserData(GlobalUser.token, 'me').then(res => {
-        if (res.response.userData && !res.response.userData.phone && (window as any).login_config.phone_verify && gvc.glitter.getUrlParameter('page')!=='account_edit') {
-          const dialog=new ShareDialog(gvc.glitter);
+        if (
+          res.response.userData &&
+          !res.response.userData.phone &&
+          (window as any).login_config.phone_verify &&
+          gvc.glitter.getUrlParameter('page') !== 'account_edit'
+        ) {
+          const dialog = new ShareDialog(gvc.glitter);
           dialog.infoMessage({
-            text:Language.text('phone_verify_check')
+            text: Language.text('phone_verify_check'),
           });
-          gvc.glitter.href='/account_edit'
-        }else{
-          if( GlobalUser.loginRedirect){
-            const red=GlobalUser.loginRedirect
-            GlobalUser.loginRedirect='';
+          gvc.glitter.href = '/account_edit';
+        } else {
+          if (GlobalUser.loginRedirect) {
+            const red = GlobalUser.loginRedirect;
+            GlobalUser.loginRedirect = '';
             gvc.glitter.href = red;
-          }else {
+          } else {
             //蔡先生的Proshake頁面，沒時間先這樣改
-            if((window as any).appName==='proshake_v2'){
+            if ((window as any).appName === 'proshake_v2') {
               gvc.glitter.href = '/user_info';
-            }else{
+            } else {
               gvc.glitter.href = '/account_userinfo';
             }
-
           }
         }
       });
-
     }, 700);
   }
 
   static authThirdPartyHTML(gvc: GVC, widget: any, vm: VM) {
     const loginEvents = this.getAuthLoginEvents(gvc, widget);
 
-    return html`<div class="w-100 d-flex align-items-center gap-2" style="color:#8D8D8D;">
-      <div class="${vm.prefix}-gray-hr"></div>
-      ${Language.text('or')}
-      <div class="${vm.prefix}-gray-hr"></div>
-    </div>
-    <div class="d-flex w-100 align-items-center justify-content-center gap-2">
-      ${[
-        {
-          type: 'google',
-          icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/Google__G__logo.svg.webp',
-        },
-        {
-          type: 'line',
-          icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/LINE_Brand_icon.png',
-        },
-        {
-          type: 'apple',
-          icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/14776639.png',
-        },
-        {
-          type: 'fb',
-          icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/5968764.png',
-        },
-      ]
-        .map((item) => {
-          if (!vm.loginConfig[item.type]) {
-            return '';
-          }
+    return html` <div class="w-100 d-flex align-items-center gap-2" style="color:#8D8D8D;">
+        <div class="${vm.prefix}-gray-hr"></div>
+        ${Language.text('or')}
+        <div class="${vm.prefix}-gray-hr"></div>
+      </div>
+      <div class="d-flex w-100 align-items-center justify-content-center gap-2">
+        ${[
+          {
+            type: 'google',
+            icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/Google__G__logo.svg.webp',
+          },
+          {
+            type: 'line',
+            icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/LINE_Brand_icon.png',
+          },
+          {
+            type: 'apple',
+            icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/14776639.png',
+          },
+          {
+            type: 'fb',
+            icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/5968764.png',
+          },
+        ]
+          .map(item => {
+            if (!vm.loginConfig[item.type]) {
+              return '';
+            }
 
-          //Android版本不需要有APPLE登入
-          if(gvc.glitter.deviceType===gvc.glitter.deviceTypeEnum.Android && item.type === 'apple'){
-            return ``
-          }
-          const event = loginEvents.find((data) => data.key === item.type);
-          if (!event) {
-            return '';
-          }
-          event.created();
-
-          return html`<div
-            class="${vm.prefix}-auth-thrid-button"
-            onclick="${gvc.event(() => {
-              event.call();
-            })}"
-          >
-            <img style="width: 28px" src="${item.icon}" />
-          </div>`;
-        })
-        .join('')}
-    </div>`;
+            //Android版本不需要有APPLE登入
+            if (gvc.glitter.deviceType === gvc.glitter.deviceTypeEnum.Android && item.type === 'apple') {
+              return ``;
+            }
+            const event = loginEvents.find(data => data.key === item.type);
+            if (!event) {
+              return '';
+            }
+            event.created();
+
+            return html` <div
+              class="${vm.prefix}-auth-thrid-button"
+              onclick="${gvc.event(() => {
+                event.call();
+              })}"
+            >
+              <img style="width: 28px" src="${item.icon}" />
+            </div>`;
+          })
+          .join('')}
+      </div>`;
   }
 
   static checkValue(name: string): string | false {
@@ -519,7 +590,7 @@ export class UMLogin {
   }
 
   static backToLogin(gvc: GVC, vm: VM): string {
-    return html`<section
+    return html` <section
       class="m-auto d-flex align-items-center justify-content-center my-2"
       style="cursor: pointer;"
       onclick="${gvc.event(() => {
@@ -549,7 +620,9 @@ export class UMLogin {
               }, 100);
             }
           })}"
-        >${n > 0 ? Language.text('resend_code_timer').replace('xxx', n) : Language.text('get_verification_code')}</span
+          >${n > 0
+            ? Language.text('resend_code_timer').replace('xxx', n)
+            : Language.text('get_verification_code')}</span
         >`;
       },
       divCreate: {
@@ -569,53 +642,15 @@ export class UMLogin {
   static getAuthLoginEvents(gvc: GVC, widget: any): { key: string; created: () => void; call: () => void }[] {
     const glitter = gvc.glitter;
     return [
-      {
-        key: 'line',
-        created: () => {
-          if (gvc.glitter.getUrlParameter('state') === 'line_login') {
-            gvc.glitter.setUrlParameter('state', '');
-            ApiUser.login({
-              login_type: 'line',
-              line_token: gvc.glitter.getUrlParameter('code'),
-              redirect: (() => {
-                if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
-                  return 'app';
-                } else {
-                  const url = new URL(location.origin + location.pathname);
-                  if (gvc.glitter.getUrlParameter('appName')) {
-                    url.searchParams.set('appName', (window as any).appName);
-                  }
-                  return encodeURI(url.href);
-                }
-              })(),
-            }).then((r) => {
-              gvc.glitter.setUrlParameter('code', '');
-              if (r.result) {
-                this.successCallback(gvc, widget, r.response);
-              } else {
-                widget.event('error', { title: `Line: ${Language.text('login_failure')}` });
-              }
-            });
-          } else {
-            ApiUser.getPublicConfig('login_line_setting', 'manager').then((dd) => {
-              widget.share.line = dd.response.value || {};
-              if (gvc.glitter.getUrlParameter('line_liff') === 'true') {
-                widget.event('loading', { visible: true });
-                setTimeout(() => {
-                  localStorage.setItem('login_page', 'account');
-                }, 100);
-              }
-            });
-          }
-        },
-        call: () => {
+      (() => {
+        function callLogin() {
           if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
             gvc.glitter.runJsInterFace(
               'line_login',
               {
                 id: widget.share.line.id,
               },
-              (response) => {
+              response => {
                 if (response.result) {
                   gvc.glitter.setUrlParameter('state', 'line_login');
                   gvc.glitter.setUrlParameter('code', response.code);
@@ -629,8 +664,49 @@ export class UMLogin {
               redirect_url
             )}&state=line_login&scope=profile%20openid%20email&nonce=09876xyz`;
           }
-        },
-      },
+        }
+
+        return {
+          key: 'line',
+          created: () => {
+            if (gvc.glitter.getUrlParameter('state') === 'line_login') {
+              gvc.glitter.setUrlParameter('state', '');
+              ApiUser.login({
+                login_type: 'line',
+                line_token: gvc.glitter.getUrlParameter('code'),
+                redirect: (() => {
+                  if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
+                    return 'app';
+                  } else {
+                    const url = new URL(location.origin + location.pathname);
+                    if (gvc.glitter.getUrlParameter('appName')) {
+                      url.searchParams.set('appName', (window as any).appName);
+                    }
+                    return encodeURI(url.href);
+                  }
+                })(),
+              }).then(r => {
+                gvc.glitter.setUrlParameter('code', '');
+                if (r.result) {
+                  this.successCallback(gvc, widget, r.response);
+                } else {
+                  widget.event('error', { title: `Line: ${Language.text('login_failure')}` });
+                }
+              });
+            } else {
+              ApiUser.getPublicConfig('login_line_setting', 'manager').then((dd) => {
+                widget.share.line = dd.response.value || {};
+                if (gvc.glitter.getUrlParameter('line_liff') === 'true') {
+                  callLogin();
+                }
+              })
+              }
+          },
+          call: () => {
+            callLogin();
+          },
+        };
+      })(),
       {
         key: 'google',
         created: () => {
@@ -641,13 +717,13 @@ export class UMLogin {
               google_token: gvc.glitter.getUrlParameter('code'),
               redirect: (() => {
                 if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
-                  return (glitter.deviceType===glitter.deviceTypeEnum.Android) ? 'android':'app';
+                  return glitter.deviceType === glitter.deviceTypeEnum.Android ? 'android' : 'app';
                 } else {
                   const googleRedirect = localStorage.getItem('google_redirect');
                   return googleRedirect ? encodeURI(googleRedirect) : '';
                 }
               })(),
-            }).then((r) => {
+            }).then(r => {
               if (r.result) {
                 this.successCallback(gvc, widget, r.response);
               } else {
@@ -655,7 +731,7 @@ export class UMLogin {
               }
             });
           } else {
-            ApiUser.getPublicConfig('login_google_setting', 'manager').then((dd) => {
+            ApiUser.getPublicConfig('login_google_setting', 'manager').then(dd => {
               widget.share.google = dd.response.value || {};
             });
           }
@@ -667,14 +743,17 @@ export class UMLogin {
           localStorage.setItem('google_redirect', redirect_url);
 
           if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
-            ApiUser.getPublicConfig('login_google_setting', 'manager').then((dd) => {
+            ApiUser.getPublicConfig('login_google_setting', 'manager').then(dd => {
               widget.share.google = dd.response.value || {};
               gvc.glitter.runJsInterFace(
                 'google_login',
                 {
-                  app_id: (glitter.deviceType===glitter.deviceTypeEnum.Android) ? widget.share.google.android_app_id:widget.share.google.app_id,
+                  app_id:
+                    glitter.deviceType === glitter.deviceTypeEnum.Android
+                      ? widget.share.google.android_app_id
+                      : widget.share.google.app_id,
                 },
-                (response) => {
+                response => {
                   if (response.result) {
                     gvc.glitter.setUrlParameter('state', 'google_login');
                     gvc.glitter.setUrlParameter('code', response.code);
@@ -683,7 +762,6 @@ export class UMLogin {
                 }
               );
             });
-
           } else {
             gvc.glitter.href = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${widget.share.google.id}&redirect_uri=${redirect_url}&state=google_login&response_type=code&scope=profile+email`;
           }
@@ -692,7 +770,7 @@ export class UMLogin {
       {
         key: 'fb',
         created: () => {
-          ApiUser.getPublicConfig('login_fb_setting', 'manager').then((dd) => {
+          ApiUser.getPublicConfig('login_fb_setting', 'manager').then(dd => {
             widget.share.fb = dd.response.value || {};
             const loadFacebookSDK = () => {
               const intervalId = setInterval(() => {
@@ -702,8 +780,8 @@ export class UMLogin {
                   clearInterval(intervalId); // 清除間隔
                   FB.init({
                     appId: widget.share.fb.id,
-                    xfbml      : true,
-                    version    : 'v22.0'
+                    xfbml: true,
+                    version: 'v22.0',
                   });
                   return;
                 }
@@ -725,26 +803,30 @@ export class UMLogin {
         },
         call: () => {
           return new Promise(async (resolve, reject) => {
-            console.log('call fb',widget.share.fb)
+            console.log('call fb', widget.share.fb);
 
             if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
-              gvc.glitter.runJsInterFace('facebook_login', {
-                app_id:widget.share.fb.id,
-                secret:widget.share.fb.secret
-              }, (response) => {
-                if (response.result) {
-                  ApiUser.login({
-                    login_type: 'fb',
-                    fb_token: response.accessToken,
-                  }).then((r) => {
-                    if (r.result) {
-                      this.successCallback(gvc, widget, r.response);
-                    } else {
-                      widget.event('error', { title: `Facebook: ${Language.text('login_failure')}` });
-                    }
-                  });
+              gvc.glitter.runJsInterFace(
+                'facebook_login',
+                {
+                  app_id: widget.share.fb.id,
+                  secret: widget.share.fb.secret,
+                },
+                response => {
+                  if (response.result) {
+                    ApiUser.login({
+                      login_type: 'fb',
+                      fb_token: response.accessToken,
+                    }).then(r => {
+                      if (r.result) {
+                        this.successCallback(gvc, widget, r.response);
+                      } else {
+                        widget.event('error', { title: `Facebook: ${Language.text('login_failure')}` });
+                      }
+                    });
+                  }
                 }
-              });
+              );
             } else {
               (window as any).FB.login(
                 (response: any) => {
@@ -752,7 +834,7 @@ export class UMLogin {
                   ApiUser.login({
                     login_type: 'fb',
                     fb_token: accessToken,
-                  }).then((r) => {
+                  }).then(r => {
                     if (r.result) {
                       this.successCallback(gvc, widget, r.response);
                     } else {
@@ -774,7 +856,7 @@ export class UMLogin {
             ApiUser.login({
               login_type: 'apple',
               token: appleCode,
-            }).then((r) => {
+            }).then(r => {
               if (r.result) {
                 this.successCallback(gvc, widget, r.response);
               } else {
@@ -789,7 +871,7 @@ export class UMLogin {
                 },
               ],
               () => {
-                ApiUser.getPublicConfig('login_apple_setting', 'manager').then((dd) => {
+                ApiUser.getPublicConfig('login_apple_setting', 'manager').then(dd => {
                   widget.share.apple = dd.response.value || {};
                 });
               },
@@ -835,7 +917,10 @@ export class UMLogin {
         continue;
       }
 
-      if ((item.key === 'email' && vm.loginConfig.email_verify) || (item.key === 'phone' && vm.loginConfig.phone_verify)) {
+      if (
+        (item.key === 'email' && vm.loginConfig.email_verify) ||
+        (item.key === 'phone' && vm.loginConfig.phone_verify)
+      ) {
         const vData = this.checkValue(`reg-${item.key}-verify`);
         if (item.key === 'email') {
           if (!vData) {
@@ -874,7 +959,7 @@ export class UMLogin {
       account: userData.email || userData.phone,
       pwd: password,
       userData: userData,
-    }).then((r) => {
+    }).then(r => {
       widget.event('loading', { visible: false });
       if (r.result) {
         this.successCallback(gvc, widget, r.response, Language.text('registration_success'));
@@ -915,7 +1000,7 @@ export class UMLogin {
     ApiUser.login({
       account: account,
       pwd: password,
-    }).then((r) => {
+    }).then(r => {
       if (r.result) {
         this.successCallback(gvc, widget, r.response);
       } else {
@@ -941,7 +1026,7 @@ export class UMLogin {
     }
 
     widget.event('loading', { visible: true });
-    ApiUser.forgetPwd(vm.resetEmail).then((r) => {
+    ApiUser.forgetPwd(vm.resetEmail).then(r => {
       widget.event('loading', { visible: false });
       if (r.result && r.response.result) {
         widget.event('success', { title: Language.text('verification_code_sent') });
@@ -968,7 +1053,7 @@ export class UMLogin {
       return;
     }
 
-    ApiUser.emailVerify(email).then((r) => {
+    ApiUser.emailVerify(email).then(r => {
       if (r.result && r.response.result) {
         widget.event('success', { title: Language.text('verification_code_sent') });
       } else {
@@ -977,7 +1062,7 @@ export class UMLogin {
     });
   }
 
-  static async  sendVerifyPhoneCode(widget: any, id: string) {
+  static async sendVerifyPhoneCode(widget: any, id: string) {
     const phone = UMLogin.checkValue(id);
 
     if (!phone) {
@@ -992,7 +1077,7 @@ export class UMLogin {
     if ((await ApiUser.getPhoneCount(phone)).response.result) {
       widget.event('error', { title: Language.text('phone_number_already_exists') });
     } else {
-      ApiUser.phoneVerify(phone).then((r) => {
+      ApiUser.phoneVerify(phone).then(r => {
         if (r.result && r.response.result) {
           widget.event('success', { title: Language.text('verification_code_sent') });
         } else {
@@ -1000,7 +1085,6 @@ export class UMLogin {
         }
       });
     }
-
   }
 
   static verifySubmitCode(widget: any, vm: VM) {
@@ -1011,7 +1095,7 @@ export class UMLogin {
       return;
     }
 
-    ApiUser.forgetPwdCheckCode(vm.resetEmail, code).then((r) => {
+    ApiUser.forgetPwdCheckCode(vm.resetEmail, code).then(r => {
       if (r.result && r.response.result) {
         vm.validationCode = code;
         vm.viewType = 'reset_password';
@@ -1038,7 +1122,7 @@ export class UMLogin {
       return;
     }
 
-    ApiUser.resetPwdV2(vm.resetEmail, vm.validationCode, newPassword).then((r) => {
+    ApiUser.resetPwdV2(vm.resetEmail, vm.validationCode, newPassword).then(r => {
       vm.resetEmail = '';
       if (r.result && r.response.result) {
         widget.event('success', { title: Language.text('password_change_success') });