From f6069a74fa255ec99a929e51465ace7db183fe24 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Sat, 24 Aug 2019 16:56:08 +0800
Subject: [PATCH] added language switch on login page

---
 frontend/src/assets/logo.svg                  | 14 +++++++
 frontend/src/i18n/zh.js                       |  1 +
 .../src/views/layout/components/Navbar.vue    |  2 +-
 frontend/src/views/login/index.vue            | 38 ++++++++++++++++++-
 4 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/assets/logo.svg

diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
new file mode 100644
index 00000000..b0e23910
--- /dev/null
+++ b/frontend/src/assets/logo.svg
@@ -0,0 +1,14 @@
+<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="150" cy="150" r="150" fill="#409eff">
+    </circle>
+    <circle cx="150" cy="150" r="110" fill="#fff">
+    </circle>
+    <circle cx="150" cy="150" r="70" fill="#409eff">
+    </circle>
+    <path d="
+        M 150,150
+        L 280,225
+        A 150,150 90 0 0 280,75
+        " fill="#409eff">
+    </path>
+</svg>
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index c8573bd4..b1de3b47 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -214,6 +214,7 @@ export default {
   // 下拉框
   User: '用户',
   Logout: '退出登录',
+  Documentation: '文档',
 
   // 选择
   'Yes': '是',
diff --git a/frontend/src/views/layout/components/Navbar.vue b/frontend/src/views/layout/components/Navbar.vue
index 976d98d9..f60c0051 100644
--- a/frontend/src/views/layout/components/Navbar.vue
+++ b/frontend/src/views/layout/components/Navbar.vue
@@ -30,7 +30,7 @@
     <el-dropdown class="documentation right">
       <a href="https://tikazyq.github.io/crawlab-docs" target="_blank">
         <font-awesome-icon :icon="['far', 'question-circle']"/>
-        <span style="margin-left: 5px;">文档</span>
+        <span style="margin-left: 5px;">{{$t('Documentation')}}</span>
       </a>
     </el-dropdown>
   </div>
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 195ae1de..a21c0f42 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -4,7 +4,7 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
              label-position="left">
       <h3 class="title">
-        CRAWLAB
+        <span><img style="width:48px;margin-bottom:-5px;margin-right:2px" src="../../assets/logo.svg"></span>RAWLAB
       </h3>
       <el-form-item prop="username" style="margin-bottom: 28px;">
         <el-input
@@ -61,11 +61,18 @@
           <img src="https://img.shields.io/badge/github-crawlab-blue">
         </a>
       </div>
+      <div class="lang">
+        <span @click="setLang('zh')" :class="lang==='zh'?'active':''">中文</span>
+        <span @click="setLang('en')" :class="lang==='en'?'active':''">English</span>
+      </div>
     </el-form>
   </div>
 </template>
 
 <script>
+import {
+  mapState
+} from 'vuex'
 import { isValidUsername } from '../../utils/validate'
 
 export default {
@@ -109,6 +116,9 @@ export default {
     }
   },
   computed: {
+    ...mapState('lang', [
+      'lang'
+    ]),
     isSignUp () {
       return this.$route.path === '/signup'
     },
@@ -149,6 +159,11 @@ export default {
     onKeyEnter () {
       const func = this.isSignUp ? this.handleSignup : this.handleLogin
       func()
+    },
+    setLang (lang) {
+      window.localStorage.setItem('lang', lang)
+      this.$set(this.$i18n, 'locale', lang)
+      this.$store.commit('lang/SET_LANG', lang)
     }
   },
   mounted () {
@@ -374,6 +389,7 @@ const initCanvas = () => {
       color: #409EFF;
       margin: 0px auto 20px auto;
       text-align: center;
+      cursor: default;
     }
 
     .show-pwd {
@@ -407,5 +423,25 @@ const initCanvas = () => {
         font-weight: 600;
       }
     }
+
+    .lang {
+      margin-top: 20px;
+      text-align: center;
+
+      span {
+        cursor: pointer;
+        margin: 10px;
+        color: #666;
+        font-size: 14px;
+      }
+
+      span.active {
+        font-weight: 600;
+      }
+
+      span:hover {
+        text-decoration: underline;
+      }
+    }
   }
 </style>