Commit a1fc4dec authored by 李纪文's avatar 李纪文

feat: 广州节水增加验证码登录

parent fa6eb9e9
Pipeline #93668 waiting for manual action with stages
......@@ -94,6 +94,7 @@ const appReducer = (state = initialState, action) => {
window.__INITIAL_STATE__.menu = 'banner-left';
const temp = AppConfig(window.__INITIAL_STATE__)
temp.displayMode = window.__INITIAL_STATE__?.displayMode||''
temp.isVerification = action.data.isVerification || '';
window.globalConfig = temp;
......
......@@ -1460,6 +1460,93 @@ class Login {
}
}
loginValidate(usr, pwd, userPhone, isRememberPWD, mode = SERVICE_APP_LOGIN_MODE.password, validateCode = '') {
this.globalConfig = getGlobalConfig();
const self = this;
if (window.globalConfig && window.globalConfig.hasGateWay) {
usr = userPhone ? userPhone : usr;
appService
.authorizationToken({
loginName: usr,
// password: pwd ? (params.getParams('generateType') ? pwd : sha1(pwd).toUpperCase()) : '',
password: pwd
? params.getParams('generateType')
? pwd
: encipher(pwd, this.globalConfig.encrypt).toUpperCase()
: '',
vCode: validateCode,
type: mode,
generateType: params.getParams('generateType') || '',
})
.then(res => {
if (res.code === 0) {
const data = res.data;
self.updateConfig &&
self.updateConfig(
Object.assign({}, self.globalConfig, {
access_token: data.access_token,
token: data.user_token,
}),
);
if (res.msg === '密码过期') {
localStorage.setItem('password_needChange', true);
} else {
localStorage.removeItem('password_needChange');
}
return data;
} else {
message.error({
duration: 3,
content: `授权失败:${res.msg}`,
});
self.hasTry = true;
self.handleLoginError();
self.events.emit('loginError', res.msg);
return Promise.reject(res);
}
})
.then(res => {
self.transformLoginHander(res, isRememberPWD, pwd);
});
} else {
appService
.generateToken({
f: 'json',
expiration: this.globalConfig.expiration, // token过期时间(单位:秒)
client: 'referer',
username: usr,
// password: pwd ? (params.getParams('generateType') ? pwd : sha1(pwd).toUpperCase()) : '',
password: pwd
? params.getParams('generateType')
? pwd
: encipher(pwd, this.globalConfig.encrypt).toUpperCase()
: '',
vCode: validateCode,
referer: this.globalConfig.client,
skipMenuTest: 1,
userPhone,
'request.preventCache': Date.now(),
ignoreSite: true,
loginName: usr,
generateType: params.getParams('generateType') || '',
})
.then(response => {
if (response?.msg === '密码过期') {
localStorage.setItem('password_needChange', true);
} else {
localStorage.removeItem('password_needChange');
}
self.transformLoginHander(response, isRememberPWD, pwd);
})
.catch(error => {
self.hasTry = true;
self.handleLoginError();
self.events.emit('loginError', error.message);
message.error('登录服务异常');
});
}
}
loginHandler(user, pwd, userPhone, isRememberPWD, ref) {
const self = this;
if (user && pwd) {
......@@ -1474,6 +1561,23 @@ class Login {
}
}
}
loginHandlerValidate(user, pwd, userPhone, isRememberPWD, ref, validateCode = '') {
const self = this;
if(this.globalConfig?.isVerification == 1) return self.loginValidate(user, pwd, userPhone, isRememberPWD, '', validateCode);
if (user && pwd) {
if (self.loginFailed && self.captchaObj) {
self.captchaObj.verify();
} else if (self.hasTry) {
self.slideVerify(ref, () => {
self.login(user, pwd, userPhone, isRememberPWD);
});
} else {
self.login(user, pwd, userPhone, isRememberPWD);
}
}
}
loginHandlerJiangXi(user, pwd, userPhone, isRememberPWD, ref) {
const self = this;
if (user && pwd) {
......
/* eslint-disable */
import { Checkbox } from 'antd';
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useIntl } from '@wisdom-utils/components';
import LoginForm from '../../components/Login';
import { Form } from 'antd';
import { Form, Input } from 'antd';
import { FieldNumberOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons';
import LoginMessage from '../../js/loginMessage';
import LoginContext from '../../components/Login/LoginContext';
import styles from './index.less';
const { UserName, Password, Submit } = LoginForm;
const ValidateCode = props => {
const [count, setCount] = useState(0);
useEffect(() => {
window.share.event.on('loginError', handError);
return () => {
window.share.event.removeListener('loginError', handError);
};
}, []);
const handError = () => {
setCount(Date.now());
};
const handeRefresh = () => {
setCount(Date.now());
};
const handChange = value => {
props?.onChange?.(value);
};
return (
<div className={styles.validate_view}>
<Input
size={'large'}
prefix={<FieldNumberOutlined />}
className={styles.validate_input}
value={props.value || ''}
placeholder="请输入验证码"
onChange={handChange}
/>
<div className={styles.validate_img}>
<img
src={`/PandaCore/GCK/BussinessAuth/GetVerificationCode?time=${count}`}
// key={count}
/>
<div className={styles.validate_refresh} onClick={handeRefresh}>
<ReloadOutlined />
</div>
</div>
</div>
);
};
const FormLogin = props => (
<div className={styles.form_login}>
<LoginContext.Provider>
......@@ -54,12 +100,30 @@ const FormLogin = props => (
},
]}
/>
{window?.globalConfig?.isVerification == 1 ? (
<Form.Item shouldUpdate noStyle>
{({ getFieldValue, validateFields }) => (
<Form.Item
name="validateCode"
rules={[
{
required: true,
message: '请输入验证码',
},
]}
>
<ValidateCode />
</Form.Item>
)}
</Form.Item>
) : null}
<div className={styles.checkbox_wrap}>
{ // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
// {'记住密码'}
// </Checkbox>
// <a href="#">忘记密码?</a>
}
{
// <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
// {'记住密码'}
// </Checkbox>
// <a href="#">忘记密码?</a>
}
</div>
<Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
</Form>
......
......@@ -15,6 +15,7 @@ import { actionCreators } from '@/containers/App/store';
import LoginAction from '../../login';
import styles from './index.less';
import { defaultApp } from '@/micro';
import classNames from 'classnames';
import { log } from 'kit_utils';
let big = '广州大.png'
let bigNew = ''
......@@ -23,7 +24,6 @@ let slogan = ''
class HuaNongLogin extends Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
time: '16:00',
week: '星期一',
......@@ -60,7 +60,7 @@ class HuaNongLogin extends Component {
const { action, type, autoLogin } = this.state;
action &&
(type === 'Account'
? action.loginHandler(values.userName, values.password, null, autoLogin, this.sliVerify)
? action.loginHandlerValidate(values.userName, values.password, null, autoLogin, this.sliVerify, values.validateCode)
: type === 'Mobile'
? action.phoneLoginFormHandler(values.mobile, values.captcha)
: null);
......@@ -219,8 +219,6 @@ class HuaNongLogin extends Component {
.toUpperCase();
}
componentDidMount() {
console.log(this.props, this.props.global.logo, this.props.global.transformDevAssetsBaseURL('assets/images/广州/背景.png'));
console.log(this);
this.onActinoChange(this.state.action);
this.getCurrentTime(this.showTime);
/* request(urlUtils.getUrl(
......@@ -260,7 +258,7 @@ class HuaNongLogin extends Component {
</div>
</div>
<div className={styles.wrap_content}>
<div className={styles.from}>
<div className={classNames(styles.from, this.props.global.isVerification == 1 ? styles.from_validate : '')}>
<div className={styles.slogan}>
<div className={styles.slogan_back} style={{ background: `url( ${!slogan ? require("@/assets/images/login/节水/建桥宣传语.png") : this.props.global.transformDevAssetsBaseURL(slogan)}) center no-repeat` }} />
</div>
......
@import '~antd/es/style/themes/default.less';
/* 0.5px */
.borderSlender(@color) {
position: absolute;
......@@ -11,14 +12,16 @@
transform: scaleY(0.5);
content: '';
}
.quota {
position: relative;
width: 100%;
height: 100%;
// background: url('@/assets/images/login/节水/广州大.png') no-repeat;
// background: url('@/assets/images/login/节水/广州大.png') no-repeat;
background-size: cover;
background-size:100% 100% !important;
background-attachment:fixed;
background-size: 100% 100% !important;
background-attachment: fixed;
.head {
position: absolute;
top: 0;
......@@ -27,6 +30,7 @@ background-attachment:fixed;
display: flex;
justify-content: space-between;
z-index: 10;
.title {
padding-left: 20px;
font-size: 24px;
......@@ -35,15 +39,18 @@ background-attachment:fixed;
text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
line-height: 66px;
}
.imgs{
.imgs {
width: 44px;
margin-bottom: 7px;
margin-right: 10px;
}
.time_and_date {
padding-right: 50px;
display: flex;
align-items: center;
.time {
padding: 5px;
font-size: 34px;
......@@ -51,6 +58,7 @@ background-attachment:fixed;
color: #FFFFFF;
text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.8);
}
.date {
padding: 5px;
font-size: 16px;
......@@ -63,13 +71,16 @@ background-attachment:fixed;
}
}
}
.head::after {
.borderSlender(@color: rgb(255, 255, 255, 0.32));
}
.wrap_content {
position: relative;
width: 100%;
height: 100%;
.from {
position: absolute;
top: -94px !important;
......@@ -85,16 +96,23 @@ background-attachment:fixed;
// background: rgba(255, 255, 255, 0.8);
background: #FFFFFF;
border-radius: 15px;
&.from_validate {
height: 500px;
}
.slogan {
height: 118px;
background: linear-gradient(0deg,rgba(9,128,238,1) 0%,rgba(0,182,251,1) 100%);
.slogan_back{
background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
.slogan_back {
width: 100%;
height: 100%;
background: url('@/assets/images/login/节水/建桥宣传语.png') no-repeat;
background-position: center;
background-position: center;
}
}
.login {
// flex: 1;
height: calc(100% - 118px);
......@@ -107,46 +125,113 @@ background-attachment:fixed;
.form_login {
width: 100%;
height: 100%;
.checkbox_wrap {
margin-bottom: @margin-md;
color: #0599F4;
a {
float: right;
}
}
.validate_view {
display: flex;
align-items: center;
}
.validate_input {
flex: 1;
margin-right: 20px;
}
.validate_img {
width: 102px;
height: 42px;
flex: none;
position: relative;
cursor: pointer;
border: 1px solid #0599F4;
border-radius: 4px;
&:hover {
.validate_refresh {
opacity: 1;
background-color: rgba(238, 238, 238, 0.7);
}
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.validate_refresh {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: flex;
opacity: 0;
align-items: center;
justify-content: center;
cursor: pointer;
color: #666666;
}
}
:global {
.panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-focused {
.panda-console-base-input-affix-wrapper:focus,
.panda-console-base-input-affix-wrapper-focused {
box-shadow: none;
}
.panda-console-base-form-item{
.panda-console-base-form-item {
margin-bottom: 46px;
}
.panda-console-base-form-item-with-help {
margin-bottom: 24px;
}
.panda-console-base-input-affix-wrapper {
color: #0599F4;
background: none;
}
.panda-console-base-input {
background: none;
}
.panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
.panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus,
.panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
box-shadow: none;
}
.panda-console-base-input-affix-wrapper:focus .panda-console-base-input-affix-wrapper-lg {
border-color: #0599F4 !important;
}
.panda-console-base-input-affix-wrapper:not(.panda-console-base-input-affix-wrapper-disabled):hover {
z-index: 1;
border-color: #0599F4;
border-right-width: 1px;
}
.panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper,
.panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:hover {
border-color: #ff4d4f;
}
.panda-console-base-input-affix-wrapper-focused,
.panda-console-base-input-affix-wrapper:focus {
z-index: 0;
}
.panda-console-base-input-affix-wrapper-lg {
background-color: none;
border: none;
......@@ -154,41 +239,50 @@ background-attachment:fixed;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.panda-console-base-input-affix-wrapper > input.panda-console-base-input {
.panda-console-base-input-affix-wrapper>input.panda-console-base-input {
background-color: none;
}
.panda-console-base-form {
width: 100%;
height: 100%;
}
.panda-console-base-checkbox-wrapper {
color: #0599F4;
}
.panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox::after {
border-color: #0599F4;
}
.panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox-inner,
.panda-console-base-checkbox:hover .panda-console-base-checkbox-inner,
.panda-console-base-checkbox-input:focus + .panda-console-base-checkbox-inner {
.panda-console-base-checkbox-input:focus+.panda-console-base-checkbox-inner {
border-color: #0599F4;
}
.panda-console-base-checkbox-wrapper {
.panda-console-base-checkbox-checked .panda-console-base-checkbox-inner {
background-color: #0599F4;
border-color: #0599F4;
}
.panda-console-base-checkbox-inner {
border-color: #0599F4;
border-radius: 50%;
}
}
.panda-console-base-btn-lg {
width: 100%;
}
.panda-console-base-btn-primary {
background: #0599F4;
border-color: #0599F4;
border-radius: 23px;
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment