From bf5ae0fcaa046e9619e2c7f25399c3a97a609aa1 Mon Sep 17 00:00:00 2001
From: wangjinlei <751475802@qq.com>
Date: Thu, 24 Jun 2021 15:11:53 +0800
Subject: [PATCH] 20210624

---
 src/components/common/langs/en.js |   2 +-
 src/components/page/Login.vue     |  64 ++++---
 src/components/page/orcidLink.vue | 284 +++++++++++++++++++++---------
 3 files changed, 242 insertions(+), 108 deletions(-)

diff --git a/src/components/common/langs/en.js b/src/components/common/langs/en.js
index 36f2c93..0628f4c 100644
--- a/src/components/common/langs/en.js
+++ b/src/components/common/langs/en.js
@@ -2,7 +2,7 @@ const en = {
 
     system: {
         title: 'Submission System',
-        repassword:'Forgot your password?',
+        repassword:'Reset password ',
         register:'Register now',
         login:'Log in',
         forgetpwd:'Find Your Password',
diff --git a/src/components/page/Login.vue b/src/components/page/Login.vue
index ae5a0ab..0014a10 100644
--- a/src/components/page/Login.vue
+++ b/src/components/page/Login.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login-wrap">
         <div class="ms-login">
-            <div class="ms-title">{{$t('system.title')}}</div>
+            <div class="ms-title">{{ $t('system.title') }}</div>
             <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                 <el-form-item prop="username">
                     <el-input v-model="param.username" auto-complete="off" placeholder="username">
@@ -10,24 +10,28 @@
                     </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                    <el-input
-                        type="password"
-                        auto-complete="off"
-                        placeholder="password"
-                        v-model="param.password"
-                    >
-                    <i slot="prefix" class="el-icon-lx-lock" />
+                    <el-input type="password" auto-complete="off" placeholder="password" v-model="param.password">
+                        <i slot="prefix" class="el-icon-lx-lock" />
                         <!-- <el-button slot="prepend" icon="el-icon-lx-lock"></el-button> -->
                     </el-input>
                 </el-form-item>
                 <div class="login-btn">
-                    <el-button type="primary" @click="submitForm()">{{$t('system.login')}}</el-button>
+                    <el-button type="primary" @click="submitForm()">{{ $t('system.login') }}</el-button>
                 </div>
-                <el-row style="text-align: center;" >
-                    <el-col :span="12"><el-link :underline="false" type="primary" @click="doRetrieve()">{{$t('system.repassword')}}</el-link></el-col>
-                    <el-col :span="12"><el-link :underline="false" type="primary" @click="doRegister()">{{$t('system.register')}}</el-link></el-col>
+                <el-row style="text-align: center">
+                    <el-col :span="12"
+                        ><el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link></el-col
+                    >
+                    <el-col :span="12"
+                        ><el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link></el-col
+                    >
+                </el-row>
+                <el-row style="text-align: center">
+                    <el-col :span="20"
+                        ><el-link :underline="false" type="primary" @click="doRetrieve()"
+                            ><img class="orcid" src="../../assets/img/orcid.png" />login with your </el-link
+                    ></el-col>
                 </el-row>
-                
             </el-form>
         </div>
     </div>
@@ -35,9 +39,9 @@
 
 <script>
 export default {
-    data: function() {
+    data: function () {
         return {
-            aa:localStorage.getItem('ms_journal'),
+            aa: localStorage.getItem('ms_journal'),
             param: {
                 username: '',
                 password: ''
@@ -51,28 +55,29 @@ export default {
     methods: {
         submitForm() {
             //登录操作
-            this.$refs.login.validate(valid => {
+            this.$refs.login.validate((valid) => {
                 if (valid) {
                     this.$api
-                        .post('api/user/checkLogin',this.param)
-                        .then(res => {console.log(res);
-                            if(res.code==1){
+                        .post('api/user/checkLogin', this.param)
+                        .then((res) => {
+                            console.log(res);
+                            if (res.code == 1) {
                                 this.$message.error('Login failed, user name or password error!');
                                 return false;
-                            }else{
+                            } else {
                                 this.$message.success('login success');
                                 localStorage.setItem('ms_username', res.userinfo.account);
-                                if(this.param.username=='superadmin'||this.param.username=='wuxiongzhi2'){
-                                    localStorage.setItem('ms_userrole','admin');
-                                }else if(res.userinfo.type==1&&res.userinfo.is_reviewer){
-                                    localStorage.setItem('ms_userrole','reviewer')
-                                }else{
-                                    localStorage.setItem('ms_userrole',res.userinfo.type);
+                                if (this.param.username == 'superadmin' || this.param.username == 'wuxiongzhi2') {
+                                    localStorage.setItem('ms_userrole', 'admin');
+                                } else if (res.userinfo.type == 1 && res.userinfo.is_reviewer) {
+                                    localStorage.setItem('ms_userrole', 'reviewer');
+                                } else {
+                                    localStorage.setItem('ms_userrole', res.userinfo.type);
                                 }
                                 this.$router.push('/');
                             }
                         })
-                        .catch(err => {
+                        .catch((err) => {
                             console.log(err);
                         });
                 } else {
@@ -136,4 +141,9 @@ export default {
     line-height: 30px;
     color: #fff;
 }
+.orcid {
+    display: block;
+    width: 20px;
+    height: 20px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/page/orcidLink.vue b/src/components/page/orcidLink.vue
index 1f33086..fc51558 100644
--- a/src/components/page/orcidLink.vue
+++ b/src/components/page/orcidLink.vue
@@ -1,86 +1,210 @@
 <template>
-    <div class="login-wrap" v-loading="loading">
-        <div class="ms_link" v-if="has_user"></div>
-        <div class="ms-login" v-else>
-            <div class="ms-title">User Register</div>
-            <el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
-                <!-- 用户名 -->
-                <el-form-item prop="username">
-                    <el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
-                        <i slot="prefix" class="el-icon-user"></i>
-                    </el-input>
-                </el-form-item>
-                <!-- 密码 -->
-                <el-form-item prop="password">
-                    <el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
-                        <i slot="prefix" class="el-icon-lock"></i>
-                    </el-input>
-                </el-form-item>
-                <!-- 姓名 -->
-                <el-form-item prop="name">
-                    <el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname">
-                        <i slot="prefix" class="el-icon-edit-outline"></i>
-                    </el-input>
-                </el-form-item>
-                <!-- 手机 -->
-                <el-form-item prop="phone">
-                    <el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone">
-                        <i slot="prefix" class="el-icon-mobile-phone" />
-                    </el-input>
-                </el-form-item>
-                <!-- 邮件 -->
-                <el-form-item prop="email">
-                    <el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email">
-                        <i slot="prefix" class="el-icon-message"></i>
-                    </el-input>
-                </el-form-item>
-                <!-- 按钮 -->
-                <el-row type="flex" justify="center">
-                    <el-col :span="6">
-                        <el-form-item>
-                            <el-button size="small" type="primary" @click.native.prevent="handleRegister" class="register-submit"
-                                >bind</el-button
-                            >
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="14"></el-col>
-                    <el-col :span="4"> </el-col>
-                </el-row>
-            </el-form>
-        </div>
-    </div>
+	<div class="login-wrap" v-loading="loading">
+		<template>
+			<p class="ms_notes">Thank you for your login with your ORCID ID, please login or register TMR Publshing Group
+				account to connect with your ORCID ID. </p>
+			<!--  <p class="ms_noter">
+			  如果你拥有账户但没有绑定相应的ORCID，请点击绑定操作，<br/>
+			  如果你没有账户，请点击注册进行相应操作
+			</p> -->
+			<el-tabs v-model="activeName" class="ms_tab_n">
+				<el-tab-pane label="Binding" name="first">
+					<div class="ms_link">
+						<div class="ms-title">User Login</div>
+						<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
+							<!-- 用户名 -->
+							<el-form-item prop="username">
+								<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
+									<i slot="prefix" class="el-icon-user"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 密码 -->
+							<el-form-item prop="password">
+								<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
+									<i slot="prefix" class="el-icon-lock"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 按钮 -->
+							<el-row justify="center">
+								<el-form-item>
+									<el-button type="primary" @click.native.prevent="handleLogin" class="register-submit" style="width: 100%;">bind</el-button>
+								</el-form-item>
+							</el-row>
+						</el-form>
+
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="Register" name="second">
+					<div class="ms_login">
+						<div class="ms-title">User Register</div>
+						<el-form class="ms-content" :rules="registerRules" ref="registerForm" :model="registerForm" label-width="0">
+							<!-- 用户名 -->
+							<el-form-item prop="username">
+								<el-input size="small" v-model="registerForm.username" auto-complete="off" placeholder="username">
+									<i slot="prefix" class="el-icon-user"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 密码 -->
+							<el-form-item prop="password">
+								<el-input size="small" v-model="registerForm.password" auto-complete="off" placeholder="password" show-password>
+									<i slot="prefix" class="el-icon-lock"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 姓名 -->
+							<el-form-item prop="name">
+								<el-input size="small" v-model="registerForm.name" auto-complete="off" placeholder="realname">
+									<i slot="prefix" class="el-icon-edit-outline"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 手机 -->
+							<el-form-item prop="phone">
+								<el-input size="small" v-model="registerForm.phone" auto-complete="off" placeholder="phone">
+									<i slot="prefix" class="el-icon-mobile-phone" />
+								</el-input>
+							</el-form-item>
+							<!-- 邮件 -->
+							<el-form-item prop="email">
+								<el-input size="small" v-model="registerForm.email" auto-complete="off" placeholder="email">
+									<i slot="prefix" class="el-icon-message"></i>
+								</el-input>
+							</el-form-item>
+							<!-- 按钮 -->
+							<el-row justify="center">
+								<el-form-item>
+									<el-button type="primary" @click.native.prevent="handleRegister" class="register-submit" style="width: 100%;">bind</el-button>
+								</el-form-item>
+							</el-row>
+						</el-form>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</template>
+	</div>
 </template>
 
 <script>
-export default {
-    data: function () {
-        return {
-            account: localStorage.getItem('ms_username'),
-            loading: true,
-            has_user: false,
-            query: {
-                account: localStorage.getItem('ms_username'),
-                code: this.$route.query.code
-            }
-        };
-    },
-    created: function () {
-        this.initLinkOrcid();
-    },
-    methods: {
-        //推送记录信息
-        initLinkOrcid() {
-            this.$message.success(this.query.account);
+	export default {
+		data: function() {
+			return {
+				account: localStorage.getItem('ms_username'),
+				loading: false,
+				has_user: true,
+				query: {
+					account: localStorage.getItem('ms_username'),
+					code: this.$route.query.code
+				},
+				registerForm: {},
+				activeName: 'first',
+				registerRules: {
+					username: [{
+						required: true,
+						message: '请输入用户名',
+						trigger: 'blur'
+					}],
+					password: [{
+						required: true,
+						message: '请输入密码',
+						trigger: 'blur'
+					}],
+					name: [{
+						required: true,
+						message: '请输入姓名',
+						trigger: 'blur'
+					}],
+					phone: [{
+						required: true,
+						message: '请输入手机号',
+						trigger: 'blur'
+					}],
+					email: [{
+						required: true,
+						message: '请输入邮箱',
+						trigger: 'blur'
+					}]
+				}
+			};
+		},
+		created: function() {
+			// this.initLinkOrcid();
+		},
+		methods: {
+			//推送记录信息
+			initLinkOrcid() {
+				// this.$message.success(this.query.account);
 
-            // this.$api
-            //     .post('api/User/getUserForOrcid', this.query)
-            //     .then((res) => {
-            //         alert('okokok!!!!');
-            //     })
-            //     .catch((err) => {
-            //         console.log(err);
-            //     });
-        }
-    }
-};
+				// this.$api
+				//     .post('api/User/getUserForOrcid', this.query)
+				//     .then((res) => {
+				//         alert('okokok!!!!');
+				//     })
+				//     .catch((err) => {
+				//         console.log(err);
+				//     });
+			}
+		}
+	};
 </script>
+
+<style>
+	.login-wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		background-image: url(../../assets/img/login-bg.jpg);
+		background-size: 100%;
+				padding-top: 80px;
+	}
+
+	.ms_login,
+	.ms_link{
+		width: 400px;
+		margin: 0 auto;
+	}
+
+	.ms_login .ms-title,
+	.ms_link .ms-title {
+		text-align: center;
+		font-size: 18px;
+		margin: 20px 0;
+		color: #fff;
+	}
+
+	.ms_notes {
+		width: 400px;
+		margin: 0 auto 60px auto;
+		padding: 20px 50px;
+		line-height: 24px;
+		background: rgba(255, 255, 255, 0.5);
+		color: #fe7300;
+		border-radius: 5px;
+	}
+
+	/* .ms_link {}
+
+	.ms_link .ms-title {} */
+
+	.ms_tab_n {
+		width: 500px;
+		margin: 0 auto;
+		border-radius: 5px;
+		padding-bottom: 30px;
+			background: rgba(255, 255, 255, 0.3);
+	}
+
+	.ms_tab_n .el-tabs__nav {
+		margin-left: 130px;
+		height: 60px;
+		padding-top: 25px;
+	}
+
+	.ms_tab_n .el-tabs__item {
+		font-size: 22px;
+		padding: 0 40px;
+		color: #fff;
+	}
+
+	.ms_tab_n .el-tabs__active-bar {
+		left: -22px;
+		width: 120px !important;
+	}
+</style>