diff --git a/.electron-vue/build.js b/.electron-vue/build.js
index 84449b9afd..6e0e0cb4e3 100644
--- a/.electron-vue/build.js
+++ b/.electron-vue/build.js
@@ -11,6 +11,7 @@ const Multispinner = require('multispinner');
 
 const mainConfig = require('./webpack.main.config');
 const rendererConfig = require('./webpack.renderer.config');
+const webConfig = require('./webpack.web.config');
 
 const doneLog = chalk.bgGreen.white(' DONE ') + ' ';
 const errorLog = chalk.bgRed.white(' ERROR ') + ' ';
@@ -60,17 +61,29 @@ function build() {
       process.exit(1);
     });
 
-  pack(rendererConfig)
-    .then(result => {
-      results += result + '\n\n';
-      m.success('renderer');
-    })
-    .catch(err => {
-      m.error('renderer');
-      console.log(`\n  ${errorLog}failed to build renderer process`);
-      console.error(`\n${err}\n`);
-      process.exit(1);
-    });
+    pack(rendererConfig)
+      .then(result => {
+        results += result + '\n\n';
+        m.success('renderer');
+      })
+      .catch(err => {
+        m.error('renderer');
+        console.log(`\n  ${errorLog}failed to build renderer process`);
+        console.error(`\n${err}\n`);
+        process.exit(1);
+      });
+
+    pack(webConfig)
+      .then(result => {
+        results += result + '\n\n';
+        m.success('renderer');
+      })
+      .catch(err => {
+        m.error('renderer');
+        console.log(`\n  ${errorLog}failed to build renderer process`);
+        console.error(`\n${err}\n`);
+        process.exit(1);
+      });
 }
 
 function pack(config) {
diff --git a/.electron-vue/dev-runner.js b/.electron-vue/dev-runner.js
index 1e82e4a61e..ef6534c7d9 100644
--- a/.electron-vue/dev-runner.js
+++ b/.electron-vue/dev-runner.js
@@ -12,6 +12,7 @@ const webpackHotMiddleware = require('webpack-hot-middleware');
 
 const mainConfig = require('./webpack.main.config');
 const rendererConfig = require('./webpack.renderer.config');
+const webConfig = require('./webpack.web.config');
 
 let electronProcess = null;
 let manualRestart = false;
@@ -83,6 +84,49 @@ function startRenderer() {
   });
 }
 
+
+
+function startWeb() {
+  return new Promise((resolve, reject) => {
+    webConfig.entry.index = [path.join(__dirname, 'dev-client')].concat(
+      webConfig.entry.index,
+    );
+    webConfig.mode = 'development';
+    const compiler = webpack(webConfig);
+    hotMiddleware = webpackHotMiddleware(compiler, {
+      log: false,
+      heartbeat: 2500,
+    });
+
+    compiler.hooks.compilation.tap('compilation', compilation => {
+      compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync(
+        'html-webpack-plugin-after-emit',
+        (data, cb) => {
+          hotMiddleware.publish({ action: 'reload' });
+          cb();
+        },
+      );
+    });
+
+    compiler.hooks.done.tap('done', stats => {
+      logStats('Renderer', stats);
+    });
+
+    const server = new WebpackDevServer(compiler, {
+      contentBase: path.join(__dirname, '../'),
+      quiet: true,
+      before(app, ctx) {
+        app.use(hotMiddleware);
+        ctx.middleware.waitUntilValid(() => {
+          resolve();
+        });
+      },
+    });
+
+    server.listen(9081);
+  });
+}
+
 function startMain() {
   return new Promise((resolve, reject) => {
     mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(
@@ -189,7 +233,7 @@ function greeting() {
 function init() {
   greeting();
 
-  Promise.all([startRenderer(), startMain()])
+  Promise.all([startRenderer(), startMain(), startWeb()])
     .then(() => {
       startElectron();
     })
diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js
index 8be5ef84e4..1d96cc7d7b 100644
--- a/.electron-vue/webpack.renderer.config.js
+++ b/.electron-vue/webpack.renderer.config.js
@@ -59,7 +59,6 @@ let rendererConfig = {
   devtool: '#module-eval-source-map',
   entry: {
     preference: path.join(__dirname, '../src/renderer/preference.js'),
-    login: path.join(__dirname, '../src/renderer/login.ts'),
     about: path.join(__dirname, '../src/renderer/about.js'),
     labor: path.join(__dirname, '../src/renderer/labor.ts'),
     index: path.join(__dirname, '../src/renderer/main.ts'),
@@ -201,7 +200,6 @@ let rendererConfig = {
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('index')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('labor')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('about')),
-    new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('login')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('preference')),
     new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('browsing')),
     new webpack.HotModuleReplacementPlugin(),
diff --git a/.electron-vue/webpack.web.config.js b/.electron-vue/webpack.web.config.js
new file mode 100644
index 0000000000..17255fbd54
--- /dev/null
+++ b/.electron-vue/webpack.web.config.js
@@ -0,0 +1,306 @@
+'use strict';
+
+process.env.BABEL_ENV = 'renderer';
+
+const path = require('path');
+const childProcess = require('child_process');
+const webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const { dependencies, optionalDependencies } = require('../package.json');
+
+let release = '';
+try {
+  const result = childProcess.spawnSync('git', [
+    'describe',
+    '--tag',
+    '--exact-match',
+    '--abbrev=0',
+  ]);
+  if (result.status === 0) {
+    const tag = result.stdout.toString('utf8').replace(/^\s+|\s+$/g, '');
+    if (tag) release = `SPlayer${tag}`;
+  }
+} catch (ex) {
+  console.error(ex);
+}
+
+function generateHtmlWebpackPluginConfig(name) {
+  return {
+    chunks: [name],
+    filename: `${name}.html`,
+    template: path.resolve(__dirname, `../src/login.ejs`),
+    minify: {
+      collapseWhitespace: true,
+      removeAttributeQuotes: true,
+      removeComments: true,
+    },
+    nodeModules:
+      process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false,
+  };
+}
+
+/**
+ * List of node_modules to include in webpack bundle
+ *
+ * Required for specific packages like Vue UI libraries
+ * that provide pure *.vue files that need compiling
+ * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
+ */
+let whiteListedModules = ['vue', 'vuex', 'vue-router', 'vue-i18n', 'vue-axios', 'axios'];
+
+let rendererConfig = {
+  mode: 'development',
+  devtool: '#module-eval-source-map',
+  entry: {
+    index: path.join(__dirname, '../src/renderer/login.ts'),
+    login: path.join(__dirname, '../src/renderer/login.ts'),
+  },
+  externals: [
+    ...Object.keys(Object.assign({}, dependencies, optionalDependencies)).filter(
+      d => !whiteListedModules.includes(d),
+    ),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        enforce: 'pre',
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter'),
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader',
+        }),
+      },
+      {
+        test: /\.html$/,
+        use: 'vue-html-loader',
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              appendTsSuffixTo: [/\.vue$/],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.vue$/,
+        use: {
+          loader: 'vue-loader',
+          options: {
+            extractCSS: process.env.NODE_ENV === 'production',
+            loaders: {
+              i18n: 'vue-i18n-loader',
+            },
+          },
+        },
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          { loader: 'sass-loader', options: { indentedSyntax: 1 } },
+          {
+            loader: 'sass-resources-loader',
+            options: { resources: path.join(__dirname, '../src/renderer/css/global.scss') },
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader',
+          {
+            loader: 'sass-resources-loader',
+            options: { resources: path.join(__dirname, '../src/renderer/css/global.scss') },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        include: [path.resolve(__dirname, '../src/renderer/assets/icon')],
+        use: {
+          loader: 'svg-sprite-loader',
+          options: {
+            symbolId: '[name]',
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        exclude: [path.resolve(__dirname, '../src/renderer/assets/icon')],
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'imgs/[name]--[folder].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 10000,
+            name: 'media/[name]--[folder].[ext]',
+          },
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|ttc|otf)(\?.*)?$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 10000,
+            name: 'fonts/[name]--[folder].[ext]',
+          },
+        },
+      },
+    ],
+  },
+  node: {
+    __dirname: process.env.NODE_ENV !== 'production',
+    __filename: process.env.NODE_ENV !== 'production',
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new ExtractTextPlugin('styles.css'),
+    new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('index')),
+    new HtmlWebpackPlugin(generateHtmlWebpackPluginConfig('login')),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
+  output: {
+    filename: '[name].js',
+    libraryTarget: 'umd',
+    path: path.join(__dirname, '../dist/electron'),
+    globalObject: 'this',
+  },
+  resolve: {
+    alias: {
+      '@': path.join(__dirname, '../src/renderer'),
+      vue$: 'vue/dist/vue.esm.js',
+      electron: '@chiflix/electron',
+      grpc: '@grpc/grpc-js',
+    },
+    extensions: ['.ts', '.tsx', '.js', '.json', '.node'],
+  },
+  target: 'web',
+};
+
+const sharedDefinedVariables = {
+  'process.platform': `"${process.platform}"`,
+};
+
+if (process.env.ENVIRONMENT_NAME === 'APPX') {
+  // quick fix for process.windowsStore undefined on Windows Store build
+  sharedDefinedVariables['process.windowsStore'] = 'true';
+}
+/**
+ * Adjust rendererConfig for development settings
+ */
+if (process.env.NODE_ENV !== 'production') {
+  rendererConfig.plugins.push(
+    new ForkTsCheckerWebpackPlugin({ eslint: true, vue: true }),
+    new webpack.DefinePlugin(
+      Object.assign(sharedDefinedVariables, {
+        'process.env.SAGI_API': `"${process.env.SAGI_API || 'apis.stage.sagittarius.ai:8443'}"`,
+        'process.env.ACCOUNT_API': `"${process.env.ACCOUNT_API || 'https://account.stage.splayer.org'}"`,
+        __static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`,
+      }),
+    ),
+  );
+}
+
+/**
+ * Adjust rendererConfig for production settings
+ */
+if (process.env.NODE_ENV === 'production') {
+  rendererConfig.mode = 'production';
+  rendererConfig.devtool = '#source-map';
+
+  rendererConfig.plugins.push(
+    new CopyWebpackPlugin([
+      {
+        from: path.join(__dirname, '../static'),
+        to: path.join(__dirname, '../dist/electron/static'),
+        ignore: ['.*'],
+      },
+    ]),
+    new webpack.DefinePlugin(
+      Object.assign(sharedDefinedVariables, {
+        'process.env.SAGI_API': `"${process.env.SAGI_API || 'apis.sagittarius.ai:8443'}"`,
+        'process.env.ACCOUNT_API': `"${process.env.ACCOUNT_API || 'https://account.splayer.org'}"`,
+        'process.env.SENTRY_RELEASE': `"${release}"`,
+        'process.env.NODE_ENV': '"production"',
+      }),
+    ),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+  );
+
+  rendererConfig.optimization = {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          keep_classnames: true,
+        },
+      }),
+    ],
+  };
+
+  if (process.platform === 'darwin') {
+    // only check on mac, to speed up Windows build
+    rendererConfig.plugins.push(new ForkTsCheckerWebpackPlugin({ eslint: true, vue: true }));
+  }
+
+  if (release && process.env.SENTRY_AUTH_TOKEN) {
+    rendererConfig.plugins.push(
+      new SentryWebpackPlugin({
+        release,
+        include: './dist',
+        urlPrefix: 'app:///dist/',
+        ext: ['js', 'map'],
+        ignore: ['node_modules'],
+      }),
+      new SentryWebpackPlugin({
+        release,
+        include: './src',
+        urlPrefix: 'webpack:///./src/',
+        ext: ['js', 'ts', 'vue'],
+        ignore: ['node_modules'],
+      }),
+    );
+  }
+}
+
+module.exports = rendererConfig;
diff --git a/package.json b/package.json
index 8995bef8b0..1e39030645 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "pack": "npm run pack:main && npm run pack:renderer",
     "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
+    "pack:web": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.web.config.js",
     "test": "npm run unit",
     "unit": "karma start test/unit/karma.conf.js",
     "postinstall": "node ./scripts/post-install.js"
@@ -47,7 +48,6 @@
     "electron-updater": "^4.0.0",
     "franc": "^4.0.0",
     "fs-extra": "^7.0.1",
-    "geoip-lite": "^1.3.8",
     "get-video-id": "^3.1.4",
     "google-protobuf": "^3.6.0",
     "iconv-lite": "^0.4.24",
diff --git a/src/login.ejs b/src/login.ejs
new file mode 100644
index 0000000000..63c692d98d
--- /dev/null
+++ b/src/login.ejs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>SPlayer</title>
+  </head>
+  <body class="platform-<%= process.platform %>">
+    <div id="app"></div>
+    <!-- webpack builds are automatically injected -->
+  </body>
+</html>
diff --git a/src/main/helpers/AudioGrabService.ts b/src/main/helpers/AudioGrabService.ts
index 618e43d286..f429f1e650 100644
--- a/src/main/helpers/AudioGrabService.ts
+++ b/src/main/helpers/AudioGrabService.ts
@@ -2,7 +2,7 @@
  * @Author: tanghaixiang@xindong.com
  * @Date: 2019-07-22 17:18:34
  * @Last Modified by: tanghaixiang@xindong.com
- * @Last Modified time: 2019-09-27 10:11:29
+ * @Last Modified time: 2019-10-11 14:22:07
  */
 
 import { EventEmitter } from 'events';
@@ -204,7 +204,6 @@ export default class AudioGrabService extends EventEmitter {
       getIP().then((ip) => {
         metadata.set('clientip', ip);
       }).finally(() => {
-        console.log(metadata); // eslint-disable-line
         cb(null, metadata);
       });
     };
diff --git a/src/main/index.js b/src/main/index.js
index 0d0bf156d1..b5460872fc 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -8,13 +8,16 @@ import path, {
   basename, dirname, extname, join, resolve,
 } from 'path';
 import fs from 'fs';
+import http from 'http';
 import rimraf from 'rimraf';
-// import { audioHandler } from './helpers/audioHandler';
 import { audioGrabService } from './helpers/AudioGrabService';
 import './helpers/electronPrototypes';
 import writeLog from './helpers/writeLog';
 import {
-  getValidVideoRegex, getValidSubtitleRegex, getToken, saveToken,
+  getValidVideoRegex, getValidSubtitleRegex,
+  getToken, saveToken,
+  getIP,
+  getRightPort,
 } from '../shared/utils';
 import { mouse } from './helpers/mouse';
 import MenuService from './menu/MenuService';
@@ -88,6 +91,9 @@ let needBlockCloseLaborWindow = true; // 标记是否阻塞nsfw窗口关闭
 let inited = false;
 let hideBrowsingWindow = false;
 let finalVideoToOpen = [];
+let signInEndPoint = '';
+let localHostPort = 0;
+let fileDirServerOnLine = false;
 const locale = new Locale();
 const tmpVideoToOpen = [];
 const tmpSubsToOpen = [];
@@ -108,8 +114,8 @@ const aboutURL = process.env.NODE_ENV === 'development'
 const preferenceURL = process.env.NODE_ENV === 'development'
   ? 'http://localhost:9080/preference.html'
   : `file://${__dirname}/preference.html`;
-const loginURL = process.env.NODE_ENV === 'development'
-  ? 'http://localhost:9080/login.html'
+let loginURL = process.env.NODE_ENV === 'development'
+  ? 'http://localhost:9081/login.html'
   : `file://${__dirname}/login.html`;
 const browsingURL = process.env.NODE_ENV === 'development'
   ? 'http://localhost:9080/browsing.html'
@@ -302,23 +308,73 @@ function createPreferenceWindow(e, route) {
   preferenceWindow.once('ready-to-show', () => {
     preferenceWindow.show();
   });
+  preferenceWindow.on('focus', () => {
+    menuService.enableMenu(false);
+  });
+}
+
+/**
+ * @description sign in window need aliyun nc valication with // protocal
+ * @author tanghaixiang
+ */
+function createFileDirServer() {
+  http.createServer((request, response) => {
+    console.log('request ', request.url);
+    let filePath = `${request.url}`;
+    if (filePath === '/') {
+      filePath = '/login.html';
+    }
+    const extname = String(path.extname(filePath)).toLowerCase();
+    const mimeTypes = {
+      '.html': 'text/html',
+      '.js': 'text/javascript',
+      '.css': 'text/css',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpg',
+      '.gif': 'image/gif',
+      '.svg': 'image/svg+xml',
+      '.wav': 'audio/wav',
+      '.mp4': 'video/mp4',
+      '.woff': 'application/font-woff',
+      '.ttf': 'application/font-ttf',
+      '.eot': 'application/vnd.ms-fontobject',
+      '.otf': 'application/font-otf',
+      '.wasm': 'application/wasm',
+    };
+    const contentType = mimeTypes[extname] || 'application/octet-stream';
+    fs.readFile(`${__dirname}${filePath}`, (error, content) => {
+      if (error) {
+        return;
+      }
+      response.writeHead(200, { 'Content-Type': contentType });
+      response.end(content, 'utf-8');
+    });
+  }).listen(localHostPort);
 }
 
 function createLoginWindow(e, route) {
+  // in production use http protocal
+  // aliyun captcha use // protocal
+  if (process.env.NODE_ENV === 'production' && !fileDirServerOnLine) {
+    createFileDirServer();
+    fileDirServerOnLine = true;
+    loginURL = `http://localhost:${localHostPort}/login.html`;
+  }
   const loginWindowOptions = {
     useContentSize: true,
     frame: false,
     titleBarStyle: 'none',
     width: 412,
     height: 284,
-    transparent: true,
-    resizable: false,
-    show: false,
     webPreferences: {
-      webSecurity: false,
-      nodeIntegration: true,
       experimentalFeatures: true,
+      webSecurity: false,
+      preload: `${require('path').resolve(__static, 'login/preload.js')}`,
     },
+    transparent: true,
+    resizable: false,
+    show: false,
     acceptFirstMouse: true,
     fullscreenable: false,
     maximizable: false,
@@ -350,6 +406,9 @@ function createLoginWindow(e, route) {
   loginWindow.once('ready-to-show', () => {
     loginWindow.show();
   });
+  loginWindow.on('focus', () => {
+    menuService.enableMenu(false);
+  });
 }
 
 function createAboutWindow() {
@@ -1093,6 +1152,9 @@ function registerMainWindowEvent(mainWindow) {
     if (mainWindow && !mainWindow.webContents.isDestroyed()) {
       mainWindow.webContents.send('mainDispatch', 'setPreference', args);
     }
+    if (loginWindow && !loginWindow.webContents.isDestroyed()) {
+      loginWindow.webContents.send('setPreference', args);
+    }
   });
   ipcMain.on('main-to-preference', (e, args) => {
     if (preferenceWindow && !preferenceWindow.webContents.isDestroyed()) {
@@ -1124,6 +1186,12 @@ function registerMainWindowEvent(mainWindow) {
 
   ipcMain.on('add-login', createLoginWindow);
 
+  ipcMain.on('login-captcha', () => {
+    if (loginWindow && !loginWindow.webContents.isDestroyed()) {
+      loginWindow.setSize(412, 336, true);
+    }
+  });
+
   ipcMain.on('account-enabled', () => {
     // get storage token
     getToken().then((account) => {
@@ -1140,6 +1208,10 @@ function registerMainWindowEvent(mainWindow) {
       }
     }).catch(console.error);
   });
+
+  ipcMain.on('sign-in-end-point', (events, data) => {
+    signInEndPoint = data;
+  });
 }
 
 function createMainWindow(openDialog, playlistId) {
@@ -1217,6 +1289,9 @@ function createMainWindow(openDialog, playlistId) {
       if (mainWindow) mainWindow.openDevTools({ mode: 'detach' });
     }, 1000);
   }
+  mainWindow.on('focus', () => {
+    menuService.enableMenu(true);
+  });
 }
 
 ['left-drag', 'left-up'].forEach((channel) => {
@@ -1472,6 +1547,12 @@ app.on('sign-in', (account) => {
   }
 });
 
+app.on('sign-out-confirm', () => {
+  if (mainWindow && !mainWindow.webContents.isDestroyed()) {
+    mainWindow.webContents.send('sign-out-confirm', undefined);
+  }
+});
+
 app.on('sign-out', () => {
   global['account'] = undefined;
   menuService.updateAccount(undefined);
@@ -1481,3 +1562,18 @@ app.on('sign-out', () => {
     mainWindow.webContents.send('sign-in', undefined);
   }
 });
+
+app.getDisplayLanguage = () => {
+  locale.getDisplayLanguage();
+  return locale.displayLanguage;
+};
+
+// export getIp to static login preload.js
+app.getIP = getIP;
+
+// export getSignInEndPoint to static login preload.js
+app.getSignInEndPoint = () => signInEndPoint;
+
+getRightPort().then((port) => {
+  localHostPort = port;
+}).catch(console.error);
diff --git a/src/main/menu/Menu.ts b/src/main/menu/Menu.ts
index 261439ab54..79861b47ca 100644
--- a/src/main/menu/Menu.ts
+++ b/src/main/menu/Menu.ts
@@ -357,7 +357,7 @@ export default class Menubar {
       }, undefined, false);
       accountMenu.append(idMenu);
       const logout = this.createMenuItem('msg.account.logout', () => {
-        app.emit('sign-out');
+        app.emit('sign-out-confirm');
       }, undefined, true);
       accountMenu.append(logout);
       Menu.setApplicationMenu(this.menubar);
@@ -865,7 +865,7 @@ export default class Menubar {
       }, undefined, false);
       accountMenu.append(idMenu);
       const logout = this.createMenuItem('msg.account.logout', () => {
-        app.emit('sign-out');
+        app.emit('sign-out-confirm');
       }, undefined, true);
       accountMenu.append(logout);
     } else {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 2bf86a3fd5..e64a2abfd6 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -37,17 +37,21 @@
 
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ipcRenderer, Event } from 'electron';
+import { ipcRenderer, Event, remote } from 'electron';
 import { mapActions, mapGetters } from 'vuex';
-import { SubtitleManager as smActions, UserInfo as uActions } from '@/store/actionTypes';
+import {
+  SubtitleManager as smActions,
+  UserInfo as uActions,
+  AudioTranslate as atActions,
+} from '@/store/actionTypes';
 import Titlebar from '@/components/Titlebar.vue';
 import Sidebar from '@/components/Sidebar.vue';
 import '@/css/style.scss';
 import drag from '@/helpers/drag';
-import { setToken } from '@/libs/apis';
+import { setToken, checkToken } from '@/libs/apis';
 import sagi from '@/libs/sagi';
-import { isAccountEnabled } from '@/helpers/featureSwitch';
-import { log } from './libs/Log';
+import { apiOfAccountService } from './helpers/featureSwitch';
+import { AudioTranslateBubbleOrigin, AudioTranslateStatus } from '@/store/modules/AudioTranslate';
 
 export default {
   name: 'Splayer',
@@ -61,10 +65,11 @@ export default {
       openFileArgs: null,
       showSidebar: false,
       currentUrl: '',
+      checkedToken: false,
     };
   },
   computed: {
-    ...mapGetters(['signInCallback']),
+    ...mapGetters(['signInCallback', 'isTranslating', 'translateStatus']),
     isDarwin() {
       return process.platform === 'darwin';
     },
@@ -113,6 +118,12 @@ export default {
       this.$ga.event('app', 'heartbeat');
     }, 1500000); // keep alive every 25 min.
 
+    // main window get sign in api send to main process
+    // for sign in window use
+    apiOfAccountService().then((api: string) => {
+      ipcRenderer.send('sign-in-end-point', api);
+    }).catch(() => {});
+
     // sign in success
     ipcRenderer.on('sign-in', (e: Event, account?: {
       token: string, id: string,
@@ -121,6 +132,10 @@ export default {
       if (account) {
         setToken(account.token);
         sagi.setToken(account.token);
+        if (!this.checkedToken) {
+          this.checkedToken = true;
+          checkToken();
+        }
         // sign in success, callback
         if (this.signInCallback) {
           this.signInCallback();
@@ -131,14 +146,17 @@ export default {
         sagi.setToken('');
       }
     });
-    // get config cat is account enabled
-    isAccountEnabled().then((enabled) => {
-      log.debug('account', enabled);
-      if (enabled) {
-        ipcRenderer.send('account-enabled');
+
+    ipcRenderer.on('sign-out-confirm', () => {
+      // is translating stop
+      if (this.isTranslating || this.translateStatus === AudioTranslateStatus.Back) {
+        this.showTranslateBubble(AudioTranslateBubbleOrigin.OtherAIButtonClick);
+        this.addTranslateBubbleCallBack(() => {
+          remote.app.emit('sign-out');
+        });
+      } else {
+        remote.app.emit('sign-out');
       }
-    }).catch(() => {
-      // empty
     });
     // load global data when sign in is opend
     // const account = remote.getGlobal('account');
@@ -155,6 +173,8 @@ export default {
       resetManager: smActions.resetManager,
       updateUserInfo: uActions.UPDATE_USER_INFO,
       removeCallback: uActions.UPDATE_SIGN_IN_CALLBACK,
+      showTranslateBubble: atActions.AUDIO_TRANSLATE_SHOW_BUBBLE,
+      addTranslateBubbleCallBack: atActions.AUDIO_TRANSLATE_BUBBLE_CALLBACK,
     }),
     mainCommitProxy(commitType: string, commitPayload: any) {
       this.$store.commit(commitType, commitPayload);
diff --git a/src/renderer/assets/icon/deleteSub-active-icon.svg b/src/renderer/assets/icon/deleteSub-active-icon.svg
index e3b5fb3319..868bc0649c 100644
--- a/src/renderer/assets/icon/deleteSub-active-icon.svg
+++ b/src/renderer/assets/icon/deleteSub-active-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/delete-active-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="84.2036702%" cy="81.3988863%" fx="84.2036702%" fy="81.3988863%" r="117.458653%" gradientTransform="translate(0.842037,0.813989),scale(0.952153,1.000000),rotate(-138.842503),translate(-0.842037,-0.813989)" id="radialGradient-1">
diff --git a/src/renderer/assets/icon/deleteSub-default-icon.svg b/src/renderer/assets/icon/deleteSub-default-icon.svg
index 4eae314d06..ec5cc173f0 100644
--- a/src/renderer/assets/icon/deleteSub-default-icon.svg
+++ b/src/renderer/assets/icon/deleteSub-default-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/delete-default-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="81.8460892%" cy="79.2345085%" fx="81.8460892%" fy="79.2345085%" r="114.16998%" gradientTransform="translate(0.818461,0.792345),scale(0.952153,1.000000),rotate(-138.842503),translate(-0.818461,-0.792345)" id="radialGradient-1">
diff --git a/src/renderer/assets/icon/deleteSub-hover-icon.svg b/src/renderer/assets/icon/deleteSub-hover-icon.svg
index dbc9b20d96..ad19138e46 100644
--- a/src/renderer/assets/icon/deleteSub-hover-icon.svg
+++ b/src/renderer/assets/icon/deleteSub-hover-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/delete-hover-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="84.2036702%" cy="81.3988863%" fx="84.2036702%" fy="81.3988863%" r="117.458653%" gradientTransform="translate(0.842037,0.813989),scale(0.952153,1.000000),rotate(-138.842503),translate(-0.842037,-0.813989)" id="radialGradient-1">
diff --git a/src/renderer/assets/icon/reload-active-icon.svg b/src/renderer/assets/icon/reload-active-icon.svg
index 22cff6a549..c5fb89dd02 100644
--- a/src/renderer/assets/icon/reload-active-icon.svg
+++ b/src/renderer/assets/icon/reload-active-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/reload-active-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="84.2036702%" cy="81.3988863%" fx="84.2036702%" fy="81.3988863%" r="117.900008%" gradientTransform="translate(0.842037,0.813989),scale(0.945892,1.000000),rotate(-139.029722),translate(-0.842037,-0.813989)" id="radialGradient-1">
diff --git a/src/renderer/assets/icon/reload-default-icon.svg b/src/renderer/assets/icon/reload-default-icon.svg
index 1e202c3107..687ff5e4cc 100644
--- a/src/renderer/assets/icon/reload-default-icon.svg
+++ b/src/renderer/assets/icon/reload-default-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/reload-default-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="81.8460892%" cy="79.2345085%" fx="81.8460892%" fy="79.2345085%" r="114.598978%" gradientTransform="translate(0.818461,0.792345),scale(0.945892,1.000000),rotate(-139.029722),translate(-0.818461,-0.792345)" id="radialGradient-1">
diff --git a/src/renderer/assets/icon/reload-hover-icon.svg b/src/renderer/assets/icon/reload-hover-icon.svg
index 8a978de133..70e8efa350 100644
--- a/src/renderer/assets/icon/reload-hover-icon.svg
+++ b/src/renderer/assets/icon/reload-hover-icon.svg
@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 53.1 (72631) - https://sketchapp.com -->
-    <title>Icons/reload-hover-icon</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <radialGradient cx="84.2036702%" cy="81.3988863%" fx="84.2036702%" fy="81.3988863%" r="117.900008%" gradientTransform="translate(0.842037,0.813989),scale(0.945892,1.000000),rotate(-139.029722),translate(-0.842037,-0.813989)" id="radialGradient-1">
diff --git a/src/renderer/containers/Login/Login.vue b/src/renderer/containers/Login/Login.vue
index dcf3b24b74..0845c2b46e 100644
--- a/src/renderer/containers/Login/Login.vue
+++ b/src/renderer/containers/Login/Login.vue
@@ -64,7 +64,8 @@ export default Vue.extend({
   },
   computed: {
     isDarwin() {
-      return process.platform === 'darwin';
+      // @ts-ignore
+      return window.isDarwin; // eslint-disable-line
     },
   },
   methods: {
diff --git a/src/renderer/containers/Login/SMS.vue b/src/renderer/containers/Login/SMS.vue
index 361570c086..e75e6f43f2 100644
--- a/src/renderer/containers/Login/SMS.vue
+++ b/src/renderer/containers/Login/SMS.vue
@@ -22,9 +22,10 @@
     </div>
     <div class="code-box">
       <input
-        :disabled="isValidMobile || count > 0"
+        :disabled="isValidMobile || isGettingCode || count > 0 || isRobot"
         @click="getCode"
-        :value="count > 0 ? countString(count) : $t('loginModal.sendCode')"
+        :value="count > 0 ? countString(count) : isGettingCode ?
+          $t('loginModal.sendingCode') : $t('loginModal.sendCode')"
         type="button"
       >
       <input
@@ -37,9 +38,10 @@
         type="number"
       >
     </div>
+    <div id="captcha" />
     <input
-      :disabled="isAllValid || isLogin"
-      :value="$t('loginModal.submit')"
+      :disabled="isAllValid || isLogin || isRobot"
+      :value="isLogin ? $t('loginModal.submitting') : $t('loginModal.submit')"
       type="submit"
       class="submit"
     >
@@ -52,16 +54,16 @@
   </form>
 </template>
 <script lang="ts">
+/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable no-script-url */
 import Vue from 'vue';
 // @ts-ignore
-import geoip from 'geoip-lite';
-// @ts-ignore
 import metadata from 'libphonenumber-js/metadata.mobile.json';
-import { remote } from 'electron';
-import { parsePhoneNumberFromString, getCountryCallingCode } from 'libphonenumber-js/mobile';
-import { log } from '@/libs/Log';
-import { signIn, getSMSCode } from '@/libs/apis';
-import { getIP } from '@/../shared/utils';
+import { parsePhoneNumberFromString, getCountryCallingCode, CountryCode } from 'libphonenumber-js/mobile';
+import { getSMSCode, signIn, getGeoIP } from '@/libs/webApis';
+
+const ALI_CAPTCHA_APP_KEY = 'FFFF0N000000000084CE';
+const ALI_CAPTCHA_SCENE = 'nvc_message';
 
 export default Vue.extend({
   name: 'SMS',
@@ -73,11 +75,17 @@ export default Vue.extend({
       mobile: '',
       code: '',
       count: 0,
+      isGettingCode: false,
       isLogin: false,
       message: '',
+      isRobot: false,
     };
   },
   computed: {
+    isDarwin() {
+      // @ts-ignore
+      return window.isDarwin; // eslint-disable-line
+    },
     isValidMobile() {
       return !this.validMobile();
     },
@@ -93,13 +101,93 @@ export default Vue.extend({
       return len;
     },
   },
-  async mounted() {
+  created() {
     // @ts-ignore
-    const ip = await getIP();
-    log.debug('ip', ip);
-    const geo = geoip.lookup(ip);
-    if (geo && geo.country && getCountryCallingCode(geo.country)) {
-      this.countryCallCode = getCountryCallingCode(geo.country);
+    window.NVC_Opt = { // eslint-disable-line
+      // 无痕配置 && 滑动验证、刮刮卡通用配置
+      appkey: ALI_CAPTCHA_APP_KEY,
+      scene: ALI_CAPTCHA_SCENE,
+      isH5: false,
+      popUp: false,
+      renderTo: '#captcha',
+      trans: {},
+      language: 'en',
+      // 滑动验证长度配置
+      customWidth: 312,
+      // 刮刮卡配置项
+      width: 321,
+      height: 125,
+      callback: async (result?: {
+        value: string,
+        csessionid: string,
+        sig: string,
+        token: string,
+      }) => {
+        if (result && result.value === 'pass') {
+          this.message = '';
+          // 滑动成功
+          // @ts-ignore
+          const afs = undefined;
+          const sms = {
+            session: result.csessionid,
+            sig: result.sig,
+            token: result.token,
+            scene: ALI_CAPTCHA_SCENE,
+            appKey: ALI_CAPTCHA_APP_KEY,
+            // @ts-ignore
+            remoteIp: window.client_ip, // eslint-disable-line
+          };
+          this.isGettingCode = true;
+          getSMSCode(`+${this.countryCallCode}${this.mobile}`, afs, sms) // eslint-disable-line
+            .then((pass) => {
+              this.isGettingCode = false;
+              if (pass) {
+                this.count = 60;
+                if (this.$refs.code) {
+                  this.$refs.code.focus();
+                }
+                this.countDown();
+                this.message = '';
+                this.isRobot = false;
+              } else {
+                this.message = this.$t('loginModal.afsError');
+                this.count = 0;
+                this.showNvc();
+              }
+            }).catch(() => {
+              this.message = this.$t('loginModal.netWorkError');
+              this.count = 0;
+              this.isGettingCode = false;
+              this.showNvc();
+            });
+        }
+      },
+      elements: [
+        'https://img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
+        'https://img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
+      ],
+      bg_back_prepared: 'https://img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
+      bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
+      obj_ok: 'https://img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
+      bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
+      obj_error: 'https://img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
+      bg_back_fail: 'https://img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
+    };
+    const date = new Date().toISOString().split('T')[0];
+    const guideScript = document.createElement('script');
+    guideScript.setAttribute('src', `//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=${date}`);
+    document.head.appendChild(guideScript);
+  },
+  async mounted() {
+    try {
+      const geo = await getGeoIP();
+      // @ts-ignore
+      window.client_ip = geo.ip;
+      if (geo.countryCode && getCountryCallingCode(geo.countryCode as CountryCode)) {
+        this.countryCallCode = getCountryCallingCode(geo.countryCode as CountryCode);
+      }
+    } catch (error) {
+      // empty
     }
   },
   methods: {
@@ -136,23 +224,33 @@ export default Vue.extend({
       return /\d{4}/g.test(code);
     },
     async getCode() {
-      if (this.validMobile(this.mobile) && this.count === 0) {
+      if (this.validMobile(this.mobile) && !this.isGettingCode) {
         if (!navigator.onLine) {
           this.message = this.$t('loginModal.noLineError');
           return;
         }
-        this.count = 60;
-        if (this.$refs.code) {
-          this.$refs.code.focus();
-        }
+        this.isGettingCode = true;
         try {
-          await getSMSCode(`+${this.countryCallCode}${this.mobile}`);
-          this.countDown();
-          this.message = '';
+          // @ts-ignore
+          const afs =  getNVCVal() // eslint-disable-line
+          const result = await getSMSCode(`+${this.countryCallCode}${this.mobile}`, afs);
+          if (result) {
+            this.count = 60;
+            if (this.$refs.code) {
+              this.$refs.code.focus();
+            }
+            this.countDown();
+            this.message = '';
+            this.isRobot = false;
+          } else {
+            this.count = 0;
+            this.showNvc();
+          }
+          this.isGettingCode = false;
         } catch (error) {
-          log.debug('sms', error);
           this.message = this.$t('loginModal.netWorkError');
           this.count = 0;
+          this.isGettingCode = false;
         }
       }
     },
@@ -176,24 +274,45 @@ export default Vue.extend({
         this.isLogin = true;
         this.message = '';
         try {
-          await signIn('code', `+${this.countryCallCode}${this.mobile}`, this.code);
-          window.close();
-        } catch (error) {
-          if (error.status === 400 || error.status === 500) {
-            this.message = this.$t('loginModal.codeError');
+          const result = await signIn('code', `+${this.countryCallCode}${this.mobile}`, this.code);
+          if (result) {
+            window.close();
           } else {
-            this.message = this.$t('loginModal.netWorkError');
+            this.message = this.$t('loginModal.codeError');
           }
-          log.debug('submit', error);
-          this.count = 0;
-          this.isLogin = false;
+        } catch (error) {
+          this.message = this.$t('loginModal.netWorkError');
         }
+        this.isLogin = false;
       }
     },
+    showNvc() {
+      this.isRobot = true;
+      // @ts-ignore
+      window.ipcRenderer.send('login-captcha'); // eslint-disable-line
+      setTimeout(() => {
+        // 唤醒滑动验证
+        // @ts-ignore
+        getNC().then(() => { // eslint-disable-line
+          // @ts-ignore
+          _nvc_nc.upLang('en', { // eslint-disable-line
+            _startTEXT: this.$t('loginModal.afs.start'),
+            _yesTEXT: this.$t('loginModal.afs.yes'),
+            _error300: this.$t('loginModal.afs.error300'),
+            _errorNetwork: this.$t('loginModal.afs.errorNetwork'),
+          });
+          // @ts-ignore
+          _nvc_nc.reset(); // eslint-disable-line
+        });
+      }, 100);
+    },
     keydown(e: KeyboardEvent) { // eslint-disable-line
-      const browserWindow = remote.BrowserWindow;
+      const rightCode = [8, 9, 13, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57];
+      const { isDarwin } = this;
+      // @ts-ignore
+      const browserWindow = window.remote.BrowserWindow; // eslint-disable-line
       const focusWindow = browserWindow.getFocusedWindow();
-      const checkCmdOrCtrl = (process.platform === 'darwin' && e.metaKey) || (process.platform !== 'darwin' && e.ctrlKey);
+      const checkCmdOrCtrl = (isDarwin && e.metaKey) || (isDarwin && e.ctrlKey); // eslint-disable-line
       if (e && e.keyCode === 65 && checkCmdOrCtrl && focusWindow) { // c+a
         focusWindow.webContents.selectAll();
         e.preventDefault();
@@ -212,6 +331,8 @@ export default Vue.extend({
       } else if (e && e.keyCode === 90 && checkCmdOrCtrl && e.shiftKey && focusWindow) { // c+s+z
         focusWindow.webContents.redo();
         e.preventDefault();
+      } else if (e && !(rightCode.indexOf(e.keyCode) > -1)) {
+        e.preventDefault();
       }
     },
   },
@@ -335,9 +456,77 @@ button {
     text-align: center;
   }
 }
+#captcha {
+  -webkit-app-region: no-drag;
+  margin-bottom: 12px;
+}
 .submit {
   width: 100%;
   display: block;
   margin-bottom: 14px;
 }
 </style>
+<style lang="scss">
+  .nc_scale {
+    height: 40px !important;
+    background: rgba(94, 93, 102, .25) !important;
+  }
+  .nc_scale div.nc_bg {
+    background: rgba(94, 93, 102, .6) !important;
+  }
+  .nc_scale .scale_text {
+    width: 310px !important;
+    line-height: 38px !important;
+    color: rgba(255, 255, 255, 80) !important;
+    span[data-nc-lang='_startTEXT'] {
+      -webkit-text-fill-color: rgba(255,255,255,0.3) !important;
+      color: rgba(255,255,255,0.3) !important;
+    }
+  }
+  .nc_scale .scale_text2 {
+    width: 310px !important;
+    height: 38px !important;
+    border: 1px solid rgba(255,255,255,0.30) !important;
+    border-radius: 2px !important;
+    span[data-nc-lang='_Loading'], span[data-nc-lang='_yesTEXT'] {
+      border: none !important;
+    }
+  }
+  .nc_scale span {
+    line-height: 38px !important;
+    border: 1px solid #FFFFFF !important;
+    border-radius: 2px !important;
+    &.nc_lang_cnt {
+      width: calc(100% - 2px) !important;
+      height: 38px;
+    }
+  }
+  .errloading {
+    width: 300px !important;
+    height: 20px !important;
+    padding: 9px 5px !important;
+    border: 1px solid #FFFFFF !important;
+    color: rgba(255,255,255,0.8) !important;
+    border-radius: 2px !important;
+    .icon_warn {
+      color: rgba(255,255,255,1) !important;
+      margin-right: 5px!important;
+    }
+    a {
+      color: #f5a623 !important;
+    }
+  }
+  .nc_scale .btn_slide {
+    height: 38px !important;
+    line-height: 38px !important;
+    background-color: #A4A4A8 !important;
+    color: #ffffff !important;
+    font-weight: 700 !important;
+  }
+  .nc_scale .btn_ok {
+    height: 38px !important;
+    color: #FFFFFF !important;
+    background-color: #A4A4A8 !important;
+    border-color: rgba(255,255,255,0.30) !important;
+  }
+</style>
diff --git a/src/renderer/libs/apis.ts b/src/renderer/libs/apis.ts
index ca0db2147c..e7a026d155 100644
--- a/src/renderer/libs/apis.ts
+++ b/src/renderer/libs/apis.ts
@@ -29,7 +29,7 @@ fetcher.useResponseInterceptor((res) => {
     const token = authorization.replace('Bearer', '').trim();
     let displayName = '';
     try {
-      displayName = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString()).display_name; // eslint-disable-line
+      displayName = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString()).displayName; // eslint-disable-line
       log.debug('apis/account/token', token);
       remote.app.emit('sign-in', {
         token,
diff --git a/src/renderer/libs/webApis.ts b/src/renderer/libs/webApis.ts
new file mode 100644
index 0000000000..73ee4eb6d8
--- /dev/null
+++ b/src/renderer/libs/webApis.ts
@@ -0,0 +1,130 @@
+import Fetcher from '@/../shared/Fetcher';
+
+/**
+ * @description http intercept method
+ * @author tanghaixiang
+ * @param {Response} response
+ * @returns Response
+ */
+function intercept(response: Response) {
+  const headers = response.headers;
+  const authorization = headers.get('authorization');
+  if (headers && authorization) {
+    const token = authorization.replace('Bearer', '').trim();
+    let displayName = '';
+    try {
+      displayName = JSON.parse(new Buffer(token.split('.')[1], 'base64').toString()).displayName; // eslint-disable-line
+    } catch (error) {
+      // tmpty
+    }
+    // @ts-ignore
+    window.remote.app.emit('sign-in', {
+      token,
+      displayName,
+    });
+  }
+  return response;
+}
+
+const fetcher = new Fetcher({
+  timeout: 1000 * 10,
+  responseInterceptors: [intercept],
+});
+
+// @ts-ignore
+const endpoint = window.remote && window.remote.app.getSignInEndPoint();
+
+/**
+ * @description get IP && geo data from server
+ * @author tanghaixiang
+ * @returns Promise
+ */
+export function getGeoIP(): Promise<{ip: string, countryCode: string}> {
+  return new Promise((resolve, reject) => {
+    fetcher.get(`${endpoint}/api/geoip`).then((response: Response) => {
+      if (response.ok) {
+        response.json().then((data: { ip: string, countryCode: string }) => resolve(data));
+      } else {
+        reject(new Error());
+      }
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+}
+
+/**
+ * @description get sms code with no-captcha validation
+ * @author tanghaixiang
+ * @param {string} phone
+ * @param {string} [afs]
+ * @param {{
+ *   session: string,
+ *   sig: string,
+ *   token: string,
+ *   scene: string,
+ *   appKey: string, // eslint-disable-line
+ *   remoteIp: string, // eslint-disable-line
+ * }} [sms]
+ * @returns Promise
+ */
+export function getSMSCode(phone: string, afs?: string, sms?: {
+  session: string,
+  sig: string,
+  token: string,
+  scene: string,
+  appKey: string, // eslint-disable-line
+  remoteIp: string, // eslint-disable-line
+}) {
+  return new Promise((resolve, reject) => {
+    const data = {
+      phone,
+    };
+    if (afs) {
+      Object.assign(data, { afs });
+    } else if (sms) {
+      Object.assign(data, sms);
+    }
+    fetcher.post(`${endpoint}/api/auth/sms`, data)
+      .then((response: Response) => {
+        if (response.status === 200) {
+          resolve(true);
+        } else if (response.status === 400) {
+          resolve(false);
+        } else {
+          reject(new Error());
+        }
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+
+/**
+ * @description sign api
+ * @author tanghaixiang
+ * @param {string} type sign type
+ * @param {string} phone
+ * @param {string} code sms code
+ * @returns Promise
+ */
+export function signIn(type: string, phone: string, code: string) {
+  return new Promise((resolve, reject) => {
+    fetcher.post(`${endpoint}/api/auth/login`, {
+      phone,
+      type,
+      code,
+    })
+      .then((response: Response) => {
+        if (response.ok) {
+          resolve(true);
+        } else {
+          resolve(false);
+        }
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json
index 25f77957db..ea3e49494d 100644
--- a/src/renderer/locales/lang/en.json
+++ b/src/renderer/locales/lang/en.json
@@ -478,14 +478,23 @@
   "loginModal": {
     "title": "Sign in with phone number",
     "sendCode": "Send",
+    "sendingCode": "Sending ...",
     "countDown": "{count} s",
     "placeholder": {
       "mobile": "Your phone number",
       "code": "Enter verification code"
     },
     "submit": "Sign In",
+    "submitting": "Processing ...",
     "codeError": "Incorrect Vertification Code",
     "netWorkError": "Connection Timeout",
-    "noLineError": "No Network Connection"
+    "noLineError": "No Network Connection",
+    "afsError": "Captcha Validation Failed",
+    "afs": {
+      "start": "Please slide to verify",
+      "yes": "Successful",
+      "error300": "Verification failed, please <a href=\"javascript:__nc.reset()\">retry</a> ",
+      "errorNetwork": "Network Error. Please <a href=\"javascript:__nc.reset()\">retry</a > "
+    }
   }
 }
diff --git a/src/renderer/login.ts b/src/renderer/login.ts
index ac5400df9e..decbe7a0b8 100644
--- a/src/renderer/login.ts
+++ b/src/renderer/login.ts
@@ -2,11 +2,8 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import VueI18n from 'vue-i18n';
-import electron from 'electron';
-import osLocale from 'os-locale';
 import { hookVue } from '@/kerning';
 import messages from '@/locales';
-import store from '@/store';
 // @ts-ignore
 import Login from '@/containers/Login/Login.vue';
 import '@/css/style.scss';
@@ -15,18 +12,6 @@ Vue.use(VueI18n);
 Vue.use(Vuex);
 Vue.use(VueRouter);
 
-function getSystemLocale() {
-  const { app } = electron.remote;
-  const locale = process.platform === 'win32' ? app.getLocale() : osLocale.sync();
-  if (locale === 'zh-TW' || locale === 'zh-HK' || locale === 'zh-Hant') {
-    return 'zh-Hant';
-  }
-  if (locale.startsWith('zh')) {
-    return 'zh-Hans';
-  }
-  return 'en';
-}
-
 const routes = [
   {
     path: '*',
@@ -44,7 +29,8 @@ const router = new VueRouter({
 });
 
 const i18n = new VueI18n({
-  locale: getSystemLocale(), // set locale
+  // @ts-ignore
+  locale: window.displayLanguage, // set locale
   fallbackLocale: 'en',
   messages, // set locale messages
 });
@@ -56,9 +42,15 @@ new Vue({
   router,
   components: { Login },
   data: {},
-  store,
   mounted() {
-    this.$store.commit('getLocalPreference');
+    // @ts-ignore
+    window.ipcRenderer.on('setPreference', (event: Event, data: {
+      displayLanguage: string,
+    }) => {
+      if (data && data.displayLanguage) {
+        this.$i18n.locale = data.displayLanguage;
+      }
+    });
   },
   template: '<Login/>',
 }).$mount('#app');
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 1e03cca98f..0db8066752 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -39,6 +39,7 @@ import { checkForUpdate } from '@/libs/utils';
 import asyncStorage from '@/helpers/asyncStorage';
 import { videodata } from '@/store/video';
 import { addBubble } from '@/helpers/notificationControl';
+import { isAccountEnabled } from '@/helpers/featureSwitch';
 import { CHECK_FOR_UPDATES_OFFLINE, REQUEST_TIMEOUT } from '@/helpers/notificationcodes';
 import { SNAPSHOT_FAILED, SNAPSHOT_SUCCESS, LOAD_SUBVIDEO_FAILED } from './helpers/notificationcodes';
 import InputPlugin, { getterTypes as iGT } from '@/plugins/input';
@@ -404,6 +405,15 @@ new Vue({
     });
     getClientUUID().then((clientId: string) => {
       this.$ga && this.$ga.set('userId', clientId);
+      // get config cat is account enabled
+      isAccountEnabled().then((enabled: boolean) => {
+        log.debug('account', enabled);
+        if (enabled) {
+          this.$electron.ipcRenderer.send('account-enabled');
+        }
+      }).catch(() => {
+        // empty
+      });
     });
     this.$on('wheel-event', this.wheelEventHandler);
 
diff --git a/src/shared/utils.js b/src/shared/utils.js
index bca290a098..2ff8acc56b 100644
--- a/src/shared/utils.js
+++ b/src/shared/utils.js
@@ -3,6 +3,7 @@ import { join } from 'path';
 import osLocale from 'os-locale';
 import uuidv4 from 'uuid/v4';
 import storage from 'electron-json-storage';
+import net from 'net';
 import { checkPathExist, read, write } from '../renderer/libs/file';
 import { ELECTRON_CACHE_DIRNAME, TOKEN_FILE_NAME } from '../renderer/constants';
 import electronBuilderConfig from '../../electron-builder.json';
@@ -118,6 +119,11 @@ export const getClientUUID = crossThreadCache(
   }),
 );
 
+/**
+ * @description check local has token
+ * @author tanghaixiang
+ * @returns Promise
+ */
 export async function getToken() {
   try {
     const exist = await checkPathExist(tokenPath);
@@ -127,7 +133,7 @@ export async function getToken() {
         let displayName = '';
         try {
           displayName = JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString())
-            .display_name; // eslint-disable-line
+            .displayName; // eslint-disable-line
         } catch (error) {
           // tmpty
         }
@@ -143,6 +149,12 @@ export async function getToken() {
   return undefined;
 }
 
+/**
+ * @description save token to local file
+ * @author tanghaixiang
+ * @param {String} nToken
+ * @returns Promise<string>
+ */
 export async function saveToken(nToken) {
   const token = !nToken ? '' : nToken;
   try {
@@ -152,3 +164,42 @@ export async function saveToken(nToken) {
   }
   return token;
 }
+
+/**
+ * @description check port can use
+ * @author tanghaixiang
+ * @param {Number} port number
+ * @returns Promise<boolean>
+ */
+function checkPort(port) {
+  return new Promise((resolve) => {
+    const server = net.createServer().listen(port);
+    server.on('listening', () => {
+      server.close();
+      resolve(true);
+    });
+
+    server.on('error', (err) => {
+      if (err.code === 'EADDRINUSE') {
+        resolve(false);
+      }
+    });
+  });
+}
+
+/**
+ * @description get port can use
+ * @author tanghaixiang
+ * @returns Promise<number>
+ */
+export async function getRightPort() {
+  let port = 20000;
+  let done = false;
+
+  do {
+    port += 1;
+    done = await checkPort(port);
+  } while (!done);
+
+  return port;
+}
diff --git a/static/login/preload.js b/static/login/preload.js
new file mode 100644
index 0000000000..c6ccabf409
--- /dev/null
+++ b/static/login/preload.js
@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// eslint-disable-next-line no-console
+const { ipcRenderer, remote } = require('electron');
+
+window.isDarwin = process.platform === 'darwin';
+
+window.ipcRenderer = ipcRenderer;
+
+window.remote = remote;
+
+window.displayLanguage = remote.app.getDisplayLanguage();