refactor userlayout and view-user from hard-coded to language support

src/layouts/UserLayout.vue

@@ -1,6 +1,10 @@
 <template>
+
   <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
     <div class="container">
+      <div :class="wrpCls">
+        <select-lang :class="prefixCls" />
+      </div>
       <div class="top">
         <div class="header">
           <a href="/">
@@ -31,9 +35,27 @@
 
 <script>
 import { deviceMixin } from '@/store/device-mixin'
+import SelectLang from '@/components/SelectLang'
 
 export default {
   name: 'UserLayout',
+  components: {
+    SelectLang
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-global-header-index-action'
+    }
+  },
+  computed: {
+    wrpCls () {
+      return {
+        'ant-pro-global-header-index-right': true,
+        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
+      }
+    }
+  },
   mixins: [deviceMixin],
   mounted () {
     document.body.classList.add('userLayout')
@@ -62,7 +84,7 @@ export default {
       min-height: 100%;
       background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
       background-size: 100%;
-      padding: 110px 0 144px;
+      padding: 110px 0 84px;
       position: relative;
 
       a {

src/locales/lang/en-US.js

@@ -4,6 +4,8 @@ import global from './en-US/global'
 
 import menu from './en-US/menu'
 import setting from './en-US/setting'
+import user from './en-US/user'
+
 import dashboard from './en-US/dashboard'
 import form from './en-US/form'
 import result from './en-US/result'
@@ -25,6 +27,7 @@ export default {
   ...global,
   ...menu,
   ...setting,
+  ...user,
   ...dashboard,
   ...form,
   ...result,

src/locales/lang/en-US/user.js

@@ -0,0 +1,44 @@
+export default {
+  'user.login.userName': 'userName',
+  'user.login.password': 'password',
+  'user.login.username.placeholder': 'Account: admin',
+  'user.login.password.placeholder': 'password: admin or ant.design',
+  'user.login.message-invalid-credentials':
+    'Invalid username or password（admin/ant.design）',
+  'user.login.message-invalid-verification-code': 'Invalid verification code',
+  'user.login.tab-login-credentials': 'Credentials',
+  'user.login.tab-login-mobile': 'Mobile number',
+  'user.login.mobile.placeholder': 'Mobile number',
+  'user.login.mobile.verification-code.placeholder': 'Verification code',
+  'user.login.remember-me': 'Remember me',
+  'user.login.forgot-password': 'Forgot your password?',
+  'user.login.sign-in-with': 'Sign in with',
+  'user.login.signup': 'Sign up',
+  'user.login.login': 'Login',
+  'user.register.register': 'Register',
+  'user.register.email.placeholder': 'Email',
+  'user.register.password.placeholder': 'Password ',
+  'user.register.password.popover-message': 'Please enter at least 6 characters. Please do not use passwords that are easy to guess. ',
+  'user.register.confirm-password.placeholder': 'Confirm password',
+  'user.register.get-verification-code': 'Get code',
+  'user.register.sign-in': 'Already have an account?',
+  'user.register-result.msg': 'Account：registered at {email}',
+  'user.register-result.activation-email':
+    'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+  'user.register-result.back-home': 'Back to home',
+  'user.register-result.view-mailbox': 'View mailbox',
+  'user.email.required': 'Please enter your email!',
+  'user.email.wrong-format': 'The email address is in the wrong format!',
+  'user.userName.required': 'Please enter account name or email address',
+  'user.password.required': 'Please enter your password!',
+  'user.password.twice': 'The passwords entered twice do not match!',
+  'user.strength.msg':
+    "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+  'user.strength.strong': 'Strength: strong',
+  'user.strength.medium': 'Strength: medium',
+  'user.strength.short': 'Strength: too short',
+  'user.confirm-password.required': 'Please confirm your password!',
+  'user.phone-number.required': 'Please enter your phone number!',
+  'user.phone-number.wrong-format': 'Please enter a valid phone number',
+  'user.verification-code.required': 'Please enter the verification code!'
+}

src/locales/lang/zh-CN.js

@@ -3,6 +3,7 @@ import momentCN from 'moment/locale/zh-cn'
 import global from './zh-CN/global'
 
 import menu from './zh-CN/menu'
+import user from './zh-CN/user'
 import dashboard from './zh-CN/dashboard'
 import form from './zh-CN/form'
 import result from './zh-CN/result'
@@ -23,6 +24,7 @@ export default {
   ...components,
   ...global,
   ...menu,
+  ...user,
   ...dashboard,
   ...form,
   ...result,

src/locales/lang/zh-CN/user.js

@@ -0,0 +1,42 @@
+export default {
+  'user.login.userName': '用户名',
+  'user.login.password': '密码',
+  'user.login.username.placeholder': '账户: admin',
+  'user.login.password.placeholder': '密码: admin or ant.design',
+  'user.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+  'user.login.message-invalid-verification-code': '验证码错误',
+  'user.login.tab-login-credentials': '账户密码登录',
+  'user.login.tab-login-mobile': '手机号登录',
+  'user.login.mobile.placeholder': '手机号',
+  'user.login.mobile.verification-code.placeholder': '验证码',
+  'user.login.remember-me': '自动登录',
+  'user.login.forgot-password': '忘记密码',
+  'user.login.sign-in-with': '其他登录方式',
+  'user.login.signup': '注册账户',
+  'user.login.login': '登录',
+  'user.register.register': '注册',
+  'user.register.email.placeholder': '邮箱',
+  'user.register.password.placeholder': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'user.register.password.popover-message': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'user.register.confirm-password.placeholder': '确认密码',
+  'user.register.get-verification-code': '获取验证码',
+  'user.register.sign-in': '使用已有账户登录',
+  'user.register-result.msg': '你的账户：{email} 注册成功',
+  'user.register-result.activation-email':
+    '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+  'user.register-result.back-home': '返回首页',
+  'user.register-result.view-mailbox': '查看邮箱',
+  'user.email.required': '请输入邮箱地址！',
+  'user.email.wrong-format': '邮箱地址格式错误！',
+  'user.userName.required': '请输入帐户名或邮箱地址',
+  'user.password.required': '请输入密码！',
+  'user.password.twice': '两次输入的密码不匹配!',
+  'user.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+  'user.strength.strong': '强度：强',
+  'user.strength.medium': '强度：中',
+  'user.strength.short': '强度：太短',
+  'user.confirm-password.required': '请确认密码！',
+  'user.phone-number.required': '请输入正确的手机号',
+  'user.phone-number.wrong-format': '手机号格式错误！',
+  'user.verification-code.required': '请输入验证码！'
+}

src/views/user/Login.vue

@@ -12,16 +12,16 @@
         :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
         @change="handleTabClick"
       >
-        <a-tab-pane key="tab1" tab="账号密码登录">
-          <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="账户或密码错误（admin/ant.design )" />
+        <a-tab-pane key="tab1" :tab="$t('user.login.tab-login-credentials')">
+          <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" :message="$t('user.login.message-invalid-credentials')" />
           <a-form-item>
             <a-input
               size="large"
               type="text"
-              placeholder="账户: admin"
+              :placeholder="$t('user.login.username.placeholder')"
               v-decorator="[
                 'username',
-                {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
+                {rules: [{ required: true, message: $t('user.userName.required') }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
               ]"
             >
               <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
@@ -31,19 +31,19 @@
           <a-form-item>
             <a-input-password
               size="large"
-              placeholder="密码: admin or ant.design"
+              :placeholder="$t('user.login.password.placeholder')"
               v-decorator="[
                 'password',
-                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
+                {rules: [{ required: true, message: $t('user.password.required') }], validateTrigger: 'blur'}
               ]"
             >
               <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input-password>
           </a-form-item>
         </a-tab-pane>
-        <a-tab-pane key="tab2" tab="手机号登录">
+        <a-tab-pane key="tab2" :tab="$t('user.login.tab-login-mobile')">
           <a-form-item>
-            <a-input size="large" type="text" placeholder="手机号" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
+            <a-input size="large" type="text" :placeholder="$t('user.login.mobile.placeholder')" v-decorator="['mobile', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: $t('user.login.mobile.placeholder') }], validateTrigger: 'change'}]">
               <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
           </a-form-item>
@@ -51,7 +51,7 @@
           <a-row :gutter="16">
             <a-col class="gutter-row" :span="16">
               <a-form-item>
-                <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
+                <a-input size="large" type="text" :placeholder="$t('user.login.mobile.verification-code.placeholder')" v-decorator="['captcha', {rules: [{ required: true, message: $t('user.verification-code.required') }], validateTrigger: 'blur'}]">
                   <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                 </a-input>
               </a-form-item>
@@ -62,7 +62,7 @@
                 tabindex="-1"
                 :disabled="state.smsSendBtn"
                 @click.stop.prevent="getCaptcha"
-                v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
+                v-text="!state.smsSendBtn && $t('user.register.get-verification-code') || (state.time+' s')"
               ></a-button>
             </a-col>
           </a-row>
@@ -70,12 +70,12 @@
       </a-tabs>
 
       <a-form-item>
-        <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">自动登录</a-checkbox>
+        <a-checkbox v-decorator="['rememberMe', { valuePropName: 'checked' }]">{{ $t('user.login.remember-me') }}</a-checkbox>
         <router-link
           :to="{ name: 'recover', params: { user: 'aaa'} }"
           class="forge-password"
           style="float: right;"
-        >忘记密码</router-link>
+        >{{ $t('user.login.forgot-password') }}</router-link>
       </a-form-item>
 
       <a-form-item style="margin-top:24px">
@@ -86,11 +86,11 @@
           class="login-button"
           :loading="state.loginBtn"
           :disabled="state.loginBtn"
-        >确定</a-button>
+        >{{ $t('user.login.login') }}</a-button>
       </a-form-item>
 
       <div class="user-login-other">
-        <span>其他登录方式</span>
+        <span>{{ $t('user.login.sign-in-with') }}</span>
         <a>
           <a-icon class="item-icon" type="alipay-circle"></a-icon>
         </a>
@@ -100,7 +100,7 @@
         <a>
           <a-icon class="item-icon" type="weibo-circle"></a-icon>
         </a>
-        <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
+        <router-link class="register" :to="{ name: 'register' }">{{ $t('user.login.signup') }}</router-link>
       </div>
     </a-form>
 

src/views/user/Register.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="main user-layout-register">
-    <h3><span>注册</span></h3>
+    <h3><span>{{ $t('user.register.register') }}</span></h3>
     <a-form ref="formRegister" :form="form" id="formRegister">
       <a-form-item>
         <a-input
           size="large"
           type="text"
-          placeholder="邮箱"
-          v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
+          :placeholder="$t('user.register.email.placeholder')"
+          v-decorator="['email', {rules: [{ required: true, type: 'email', message: $t('user.email.required') }], validateTrigger: ['change', 'blur']}]"
         ></a-input>
       </a-form-item>
 
@@ -21,7 +21,8 @@
             <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
             <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
             <div style="margin-top: 10px;">
-              <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
+              <span>{{ $t('user.register.password.popover-message') }}
+              </span>
             </div>
           </div>
         </template>
@@ -29,8 +30,8 @@
           <a-input-password
             size="large"
             @click="handlePasswordInputClick"
-            placeholder="至少6位密码，区分大小写"
-            v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+            :placeholder="$t('user.register.password.placeholder')"
+            v-decorator="['password', {rules: [{ required: true, message: $t('user.password.required')}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
           ></a-input-password>
         </a-form-item>
       </a-popover>
@@ -38,13 +39,13 @@
       <a-form-item>
         <a-input-password
           size="large"
-          placeholder="确认密码"
-          v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
+          :placeholder="$t('user.register.confirm-password.placeholder')"
+          v-decorator="['password2', {rules: [{ required: true, message: $t('user.password.required') }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
         ></a-input-password>
       </a-form-item>
 
       <a-form-item>
-        <a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
+        <a-input size="large" :placeholder="$t('user.login.mobile.placeholder')" v-decorator="['mobile', {rules: [{ required: true, message: $t('user.phone-number.required'), pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
           <a-select slot="addonBefore" size="large" defaultValue="+86">
             <a-select-option value="+86">+86</a-select-option>
             <a-select-option value="+87">+87</a-select-option>
@@ -62,7 +63,7 @@
       <a-row :gutter="16">
         <a-col class="gutter-row" :span="16">
           <a-form-item>
-            <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
+            <a-input size="large" type="text" :placeholder="$t('user.login.mobile.verification-code.placeholder')" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
               <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
           </a-form-item>
@@ -73,7 +74,7 @@
             size="large"
             :disabled="state.smsSendBtn"
             @click.stop.prevent="getCaptcha"
-            v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
+            v-text="!state.smsSendBtn && $t('user.register.get-verification-code')||(state.time+' s')"></a-button>
         </a-col>
       </a-row>
 
@@ -85,9 +86,9 @@
           class="register-button"
           :loading="registerBtn"
           @click.stop.prevent="handleSubmit"
-          :disabled="registerBtn">注册
+          :disabled="registerBtn">{{ $t('user.register.register') }}
         </a-button>
-        <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
+        <router-link class="login" :to="{ name: 'login' }">{{ $t('user.register.sign-in') }}</router-link>
       </a-form-item>
 
     </a-form>