ts-glitter 20.9.4 → 20.9.6

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

@@ -13,7 +13,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;
 const css = String.raw;
@@ -48,13 +48,18 @@ export class UMLogin {
                         return UmClass.spinner();
                     }
                     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"
@@ -70,13 +75,18 @@ export class UMLogin {
             </section>`;
                     }
                     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);
@@ -95,17 +105,27 @@ export class UMLogin {
             </section>`;
                     }
                     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"
@@ -121,7 +141,7 @@ export class UMLogin {
             </section>`;
                     }
                     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">
@@ -129,17 +149,21 @@ export class UMLogin {
                             .map((item) => {
                             if (item.hidden)
                                 return '';
-                            const title = ['name', 'email', 'phone', 'birth'].includes(item.key) ? Language.text(`form_${item.key}`) : item.title;
+                            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 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;
@@ -153,21 +177,31 @@ export class UMLogin {
                       </div>`;
                             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, () => {
+                          <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, () => {
+                          <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}`);
                                 })}`;
                             }
@@ -176,11 +210,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"
@@ -194,41 +238,55 @@ 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(() => {
+                        class="${gClass('blue-note')}"
+                        onclick="${gvc.event(() => {
                             this.viewCallback(vm, '');
                         })}"
-                    >${Language.text('login')}</span
-                    >
+                        >${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>
               </div>
             </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(() => {
+                  <span
+                    class="${gClass('blue-note')}"
+                    onclick="${gvc.event(() => {
                         vm.viewType = 'send_forget_pwd_email';
                     })}"
-                                >${Language.text('forgot_password')}</span
-                                >
+                    >${Language.text('forgot_password')}</span
+                  >
                 </div>
                 <div
                   class="${gClass('button')} my-2"
@@ -242,19 +300,19 @@ 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(() => {
+                      class="${gClass('blue-note')}"
+                      onclick="${gvc.event(() => {
                         this.viewCallback(vm, 'register');
                     })}"
-                  >${Language.text('register')}</span
-                  >
+                      >${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>
@@ -271,7 +329,7 @@ export class UMLogin {
                 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);
                                 }
@@ -281,7 +339,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 || []);
                                 }
@@ -290,7 +348,7 @@ export class UMLogin {
                                 }
                             });
                         }),
-                    ]).then((dataArray) => {
+                    ]).then(dataArray => {
                         vm.loginConfig = dataArray[0];
                         vm.registerConfig = FormCheck.initialRegisterForm(dataArray[1]);
                         setTimeout(() => {
@@ -305,96 +363,109 @@ export class UMLogin {
     static addStyle(gvc, prefix) {
         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;
+      }
     `);
     }
     static successCallback(gvc, widget, response, text) {
@@ -407,10 +478,13 @@ export class UMLogin {
         widget.event('success', { title: text !== null && text !== void 0 ? text : Language.text('login_success') });
         setTimeout(() => {
             ApiUser.getUserData(GlobalUser.token, 'me').then(res => {
-                if (res.response.userData && !res.response.userData.phone && window.login_config.phone_verify && gvc.glitter.getUrlParameter('page') !== 'account_edit') {
+                if (res.response.userData &&
+                    !res.response.userData.phone &&
+                    window.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';
                 }
@@ -434,13 +508,13 @@ export class UMLogin {
     }
     static authThirdPartyHTML(gvc, widget, 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">
-      ${[
+        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',
@@ -458,29 +532,29 @@ export class UMLogin {
                 icon: 'https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/5968764.png',
             },
         ]
-            .map((item) => {
+            .map(item => {
             if (!vm.loginConfig[item.type]) {
                 return '';
             }
             if (gvc.glitter.deviceType === gvc.glitter.deviceTypeEnum.Android && item.type === 'apple') {
                 return ``;
             }
-            const event = loginEvents.find((data) => data.key === item.type);
+            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(() => {
+            return html ` <div
+              class="${vm.prefix}-auth-thrid-button"
+              onclick="${gvc.event(() => {
                 event.call();
             })}"
-          >
-            <img style="width: 28px" src="${item.icon}" />
-          </div>`;
+            >
+              <img style="width: 28px" src="${item.icon}" />
+            </div>`;
         })
             .join('')}
-    </div>`;
+      </div>`;
     }
     static checkValue(name) {
         const e = document.getElementById(name);
@@ -493,7 +567,7 @@ export class UMLogin {
         vm.viewType = type;
     }
     static backToLogin(gvc, vm) {
-        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(() => {
@@ -522,7 +596,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: {
@@ -541,53 +617,12 @@ export class UMLogin {
     static getAuthLoginEvents(gvc, widget) {
         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.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);
@@ -599,8 +634,51 @@ export class UMLogin {
                         const redirect_url = location.origin + location.pathname;
                         gvc.glitter.href = `https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=${widget.share.line.id}&redirect_uri=${encodeURI(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.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: () => {
@@ -611,14 +689,14 @@ 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);
                             }
@@ -628,7 +706,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 || {};
                         });
                     }
@@ -638,11 +716,13 @@ export class UMLogin {
                     localStorage.setItem('google_login', 'true');
                     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,
-                            }, (response) => {
+                                app_id: glitter.deviceType === glitter.deviceTypeEnum.Android
+                                    ? widget.share.google.android_app_id
+                                    : widget.share.google.app_id,
+                            }, response => {
                                 if (response.result) {
                                     gvc.glitter.setUrlParameter('state', 'google_login');
                                     gvc.glitter.setUrlParameter('code', response.code);
@@ -659,7 +739,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(() => {
@@ -670,7 +750,7 @@ export class UMLogin {
                                     FB.init({
                                         appId: widget.share.fb.id,
                                         xfbml: true,
-                                        version: 'v22.0'
+                                        version: 'v22.0',
                                     });
                                     return;
                                 }
@@ -693,13 +773,13 @@ export class UMLogin {
                         if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
                             gvc.glitter.runJsInterFace('facebook_login', {
                                 app_id: widget.share.fb.id,
-                                secret: widget.share.fb.secret
-                            }, (response) => {
+                                secret: widget.share.fb.secret,
+                            }, response => {
                                 if (response.result) {
                                     ApiUser.login({
                                         login_type: 'fb',
                                         fb_token: response.accessToken,
-                                    }).then((r) => {
+                                    }).then(r => {
                                         if (r.result) {
                                             this.successCallback(gvc, widget, r.response);
                                         }
@@ -716,7 +796,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);
                                     }
@@ -737,7 +817,7 @@ export class UMLogin {
                         ApiUser.login({
                             login_type: 'apple',
                             token: appleCode,
-                        }).then((r) => {
+                        }).then(r => {
                             if (r.result) {
                                 this.successCallback(gvc, widget, r.response);
                             }
@@ -752,7 +832,7 @@ export class UMLogin {
                                 src: 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js',
                             },
                         ], () => {
-                            ApiUser.getPublicConfig('login_apple_setting', 'manager').then((dd) => {
+                            ApiUser.getPublicConfig('login_apple_setting', 'manager').then(dd => {
                                 widget.share.apple = dd.response.value || {};
                             });
                         }, () => { });
@@ -791,7 +871,8 @@ export class UMLogin {
             if (item.hidden) {
                 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) {
@@ -828,7 +909,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'));
@@ -866,7 +947,7 @@ export class UMLogin {
         ApiUser.login({
             account: account,
             pwd: password,
-        }).then((r) => {
+        }).then(r => {
             if (r.result) {
                 this.successCallback(gvc, widget, r.response);
             }
@@ -889,7 +970,7 @@ export class UMLogin {
             vm.resetEmail = email;
         }
         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') });
@@ -914,7 +995,7 @@ export class UMLogin {
             widget.event('error', { title: Language.text('enter_valid_email') });
             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') });
             }
@@ -938,7 +1019,7 @@ export class UMLogin {
                 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') });
                     }
@@ -955,7 +1036,7 @@ export class UMLogin {
             widget.event('error', { title: Language.text('please_enter_verification_code') });
             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';
@@ -980,7 +1061,7 @@ export class UMLogin {
             widget.event('error', { title: Language.text('password_mismatch') });
             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') });