注册登录、header cont.
This commit is contained in:
黄心宇
parent
75b3d861c5
commit
c873ac2af8
|
|
@ -1,3 +1,4 @@
|
|||
@import url(./font/font.css);
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
/* 导航栏 */
|
||||
@font-face {
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
src: url('./youshebiaotihei-2-webfont.woff2');
|
||||
}
|
||||
Binary file not shown.
|
|
@ -12,6 +12,7 @@ import { getOrzCompanyList } from '../../forge/Information/api';
|
|||
import AddProjectModal from './AddProjectModal';
|
||||
import '../../modules/tpm/TPMIndex.css';
|
||||
import CheckProfile from '../Component/ProfileModal/Profile';
|
||||
import logo from './img/logo.png'
|
||||
|
||||
import './header.scss';
|
||||
const { SubMenu } = Menu
|
||||
|
|
@ -334,6 +335,11 @@ class NewHeader extends Component {
|
|||
return (
|
||||
<div className={publicNav ? `newHeaders publicNav`:`newHeaders`} id="nHeader">
|
||||
<div className="headerContent">
|
||||
<div className="title">
|
||||
<img src={logo} alt="" style={{width: '32px'}} />
|
||||
<span className='font32 ml15'>支持持续成长演化的软件平台</span>
|
||||
<span className='font24 ml15'>群智开发</span>
|
||||
</div>
|
||||
{isRender === true ?
|
||||
<LoginDialog
|
||||
{...this.props}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 3.1 KiB |
|
|
@ -76,71 +76,69 @@ function Login(props){
|
|||
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="right_cont login_content">
|
||||
<div className="login_register_head mb60">
|
||||
<p>欢迎登录 <span className="head_blue">群智开发</span></p>
|
||||
</div>
|
||||
<p className = {message?"message active mb10":"message"}>{message}</p>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('username',{
|
||||
rules:[
|
||||
{
|
||||
required:true,
|
||||
message:"请输入手机号/邮箱/用户名"
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
})(<Input className="account" placeholder="请输入手机号/邮箱/用户名" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [
|
||||
{
|
||||
required:true,
|
||||
message:"请输入登录密码"
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
})(
|
||||
<Input.Password className="psd" placeholder="请输入登录密码" onBlur={clear} onChange={clear} prefix={<div className="input_icon"></div>} />,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<div className="login_register_head login mb60">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('remember', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: cookie.load('autologin'),
|
||||
})(<Checkbox>下次自动登录</Checkbox>)}
|
||||
</Form.Item>
|
||||
{/* <Link to="/resetPassword" className="goResetPsdBut">忘记密码？</Link> */}
|
||||
</div>
|
||||
<Button type="primary" htmlType="submit" onClick={handleSubmit} className="login_register_cofBut">登录</Button>
|
||||
</Form>
|
||||
<div className="link_span">没有账号？<Link to={`/register`}>去注册</Link></div>
|
||||
|
||||
{
|
||||
// setting && setting.third_party_new && setting.third_party_new.length > 0 ?
|
||||
// <p className="quick_logon">
|
||||
// <p className="quick_logon_p"></p>
|
||||
// <span className={"startlogin"}> 快速登录 </span>
|
||||
// {setting.third_party_new.map((item,key)=>{
|
||||
// return(
|
||||
// <a href={`${item.url}`} className="ml15 mr15">
|
||||
// <Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
|
||||
// <img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo : item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="46px" alt={`${item.name}登录`}/>
|
||||
// </Tooltip>
|
||||
// </a>
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
// </p>
|
||||
// <OtherLogin />
|
||||
}
|
||||
<div className="right_cont login_content">
|
||||
<div className="login_register_head mb60">
|
||||
<p>欢迎登录 <span className="head_blue">群智开发</span></p>
|
||||
</div>
|
||||
<p className = {message?"message active mb10":"message"}>{message}</p>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('username',{
|
||||
rules:[
|
||||
{
|
||||
required:true,
|
||||
message:"请输入手机号/邮箱/用户名"
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
})(<Input className="account" placeholder="请输入手机号/邮箱/用户名" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [
|
||||
{
|
||||
required:true,
|
||||
message:"请输入登录密码"
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
})(
|
||||
<Input.Password className="psd" placeholder="请输入登录密码" onBlur={clear} onChange={clear} prefix={<div className="input_icon"></div>} />,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<div className="login_register_head login mb60">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('remember', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: cookie.load('autologin'),
|
||||
})(<Checkbox>下次自动登录</Checkbox>)}
|
||||
</Form.Item>
|
||||
{/* <Link to="/resetPassword" className="goResetPsdBut">忘记密码？</Link> */}
|
||||
</div>
|
||||
<Button type="primary" htmlType="submit" onClick={handleSubmit} className="login_register_cofBut">登录</Button>
|
||||
</Form>
|
||||
<div className="link_span">没有账号？<Link to={`/register`}>去注册</Link></div>
|
||||
|
||||
{
|
||||
// setting && setting.third_party_new && setting.third_party_new.length > 0 ?
|
||||
// <p className="quick_logon">
|
||||
// <p className="quick_logon_p"></p>
|
||||
// <span className={"startlogin"}> 快速登录 </span>
|
||||
// {setting.third_party_new.map((item,key)=>{
|
||||
// return(
|
||||
// <a href={`${item.url}`} className="ml15 mr15">
|
||||
// <Tooltip title={`使用${item.name === "qq" ? "QQ":item.name === "wechat" ? "微信" : item.name}账号登录`}>
|
||||
// <img src={item.name === "educoder" ? educoderLogo : item.name === "qq" ? qqlogo : item.name === "wechat" ? WeChatlogo : item.name === "gitee" ? giteelogo : item.name === "github" ? githublogo : ""} width="46px" alt={`${item.name}登录`}/>
|
||||
// </Tooltip>
|
||||
// </a>
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
// </p>
|
||||
// <OtherLogin />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -49,10 +49,12 @@
|
|||
}
|
||||
}
|
||||
.right_cont {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.login_register_head {
|
||||
font-family: alibaba-medium;
|
||||
color: #283444;
|
||||
|
|
|
|||
|
|
@ -225,127 +225,125 @@ function Register(props){
|
|||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<div className="right_cont Register_content">
|
||||
<div className="login_register_head mb30">
|
||||
<p>欢迎注册 <span className="head_blue">群智开发</span></p>
|
||||
</div>
|
||||
<div className="registerNav mb28 font-16">
|
||||
<a className={`type ${registerType ? '' : 'activeRegisterNav'}`} onClick={()=>{changeRegisterType(0)}}>手机号注册</a>
|
||||
<a className={`type ${registerType ? 'activeRegisterNav' : ''} ml50`} onClick={()=>{changeRegisterType(1)}}>邮箱注册</a>
|
||||
</div>
|
||||
<p className={mess ? "message active" : "message"}>{mess}</p>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('register_username',{
|
||||
rules:[
|
||||
{
|
||||
transform: (value)=>{return value.trim()}
|
||||
},
|
||||
{
|
||||
required:true,
|
||||
message:"请输入用户名"
|
||||
},
|
||||
{
|
||||
pattern: /^[a-zA-Z]/,
|
||||
message: "用户名必须以字母开头"
|
||||
},
|
||||
{
|
||||
pattern: /[a-zA-Z0-9]$/,
|
||||
message: "用户名只能使用英文字母和数字"
|
||||
},
|
||||
{
|
||||
pattern: /^[^\s]*$/,
|
||||
message: "用户名不能包含空格"
|
||||
},
|
||||
{
|
||||
min: 4,
|
||||
max: 15,
|
||||
message: "用户名长度为4到15个字符"
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { usernameConfirm(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input className="account" autoFocus placeholder="请输入4-15位用户名，以字母开头，只能使用字母和数字" autoComplete="off" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('email',{
|
||||
rules:[
|
||||
{
|
||||
validator: (rule, value, callback) => { emailConfirm(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input className={`${registerType ? 'email' : 'phone'}`} placeholder={`请输入${registerType ? '邮箱地址' : '手机号'}`} autoComplete="off" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item>
|
||||
<div className="login_register_head">
|
||||
{getFieldDecorator('captcha', {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入验证码"
|
||||
}],
|
||||
validateTrigger: "onBlur",
|
||||
})(
|
||||
<Input className="captcha" placeholder="请输入验证码" autoComplete="off"/>
|
||||
)}
|
||||
<Button className={getCaptchaBut ? 'codeBut':'codeBut disable'} disabled={!getCaptchaBut} onClick={getCaptcha}>{getCaptchaBut || (!getCaptchaBut && !countDown)?"获取验证码":`重发(${secondsStr}s)`}</Button>
|
||||
</div>
|
||||
</Form.Item> */}
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('register_psd',{
|
||||
rules:[
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 1) }
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { checkPassWord(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input.Password className="register_psd" placeholder="请输入8-16位密码，区分大小写、不能使用空格" onBlur={clear} onChange={clear} autoComplete="new-password" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
{/* <span className="password_tips" style={{display:tipVisable?"none":"block"}}>请输入8-16位密码，区分大小写、不能使用空格</span> */}
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('psdComfirm', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请确认登录密码"
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 2) }
|
||||
}
|
||||
],
|
||||
validateTrigger: "onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input.Password className="psdComfirm" placeholder="请确认登录密码" onBlur={clear} onChange={clear} autoComplete="new-password" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item className="register_last_form">
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: false,
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmRead(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
})(<Checkbox className="link_span">我已阅读并接受<a className="login-form-forgot" href="https://forum.trustie.net/forums/5029/detail" target="_blank">《软件发展新技术服务协议条款》</a></Checkbox>)}
|
||||
</Form.Item> */}
|
||||
<Button type="primary" htmlType="submit" className="login_register_cofBut" onClick={handleSubmit}>注册</Button>
|
||||
</Form>
|
||||
<div className="link_span">已有账号，<Link to={`/login`}>立即登录</Link></div>
|
||||
{/* <OtherLogin /> */}
|
||||
<div className="right_cont Register_content">
|
||||
<div className="login_register_head mb30">
|
||||
<p>欢迎注册 <span className="head_blue">群智开发</span></p>
|
||||
</div>
|
||||
<div className="registerNav mb28 font-16">
|
||||
<a className={`type ${registerType ? '' : 'activeRegisterNav'}`} onClick={()=>{changeRegisterType(0)}}>手机号注册</a>
|
||||
<a className={`type ${registerType ? 'activeRegisterNav' : ''} ml50`} onClick={()=>{changeRegisterType(1)}}>邮箱注册</a>
|
||||
</div>
|
||||
<p className={mess ? "message active" : "message"}>{mess}</p>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('register_username',{
|
||||
rules:[
|
||||
{
|
||||
transform: (value)=>{return value.trim()}
|
||||
},
|
||||
{
|
||||
required:true,
|
||||
message:"请输入用户名"
|
||||
},
|
||||
{
|
||||
pattern: /^[a-zA-Z]/,
|
||||
message: "用户名必须以字母开头"
|
||||
},
|
||||
{
|
||||
pattern: /[a-zA-Z0-9]$/,
|
||||
message: "用户名只能使用英文字母和数字"
|
||||
},
|
||||
{
|
||||
pattern: /^[^\s]*$/,
|
||||
message: "用户名不能包含空格"
|
||||
},
|
||||
{
|
||||
min: 4,
|
||||
max: 15,
|
||||
message: "用户名长度为4到15个字符"
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { usernameConfirm(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input className="account" autoFocus placeholder="请输入4-15位用户名，以字母开头，只能使用字母和数字" autoComplete="off" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('email',{
|
||||
rules:[
|
||||
{
|
||||
validator: (rule, value, callback) => { emailConfirm(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input className={`${registerType ? 'email' : 'phone'}`} placeholder={`请输入${registerType ? '邮箱地址' : '手机号'}`} autoComplete="off" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item>
|
||||
<div className="login_register_head">
|
||||
{getFieldDecorator('captcha', {
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入验证码"
|
||||
}],
|
||||
validateTrigger: "onBlur",
|
||||
})(
|
||||
<Input className="captcha" placeholder="请输入验证码" autoComplete="off"/>
|
||||
)}
|
||||
<Button className={getCaptchaBut ? 'codeBut':'codeBut disable'} disabled={!getCaptchaBut} onClick={getCaptcha}>{getCaptchaBut || (!getCaptchaBut && !countDown)?"获取验证码":`重发(${secondsStr}s)`}</Button>
|
||||
</div>
|
||||
</Form.Item> */}
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('register_psd',{
|
||||
rules:[
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 1) }
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { checkPassWord(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
validateTrigger:"onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input.Password className="register_psd" placeholder="请输入8-16位密码，区分大小写、不能使用空格" onBlur={clear} onChange={clear} autoComplete="new-password" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
{/* <span className="password_tips" style={{display:tipVisable?"none":"block"}}>请输入8-16位密码，区分大小写、不能使用空格</span> */}
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('psdComfirm', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请确认登录密码"
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmPassWord(rule, value, callback, 2) }
|
||||
}
|
||||
],
|
||||
validateTrigger: "onBlur",
|
||||
validateFirst: true,
|
||||
})(<Input.Password className="psdComfirm" placeholder="请确认登录密码" onBlur={clear} onChange={clear} autoComplete="new-password" prefix={<div className="input_icon"></div>} />)}
|
||||
</Form.Item>
|
||||
|
||||
{/* <Form.Item className="register_last_form">
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
initialValue: false,
|
||||
rules: [
|
||||
{
|
||||
validator: (rule, value, callback) => { comfirmRead(rule, value, callback) }
|
||||
}
|
||||
],
|
||||
})(<Checkbox className="link_span">我已阅读并接受<a className="login-form-forgot" href="https://forum.trustie.net/forums/5029/detail" target="_blank">《软件发展新技术服务协议条款》</a></Checkbox>)}
|
||||
</Form.Item> */}
|
||||
<Button type="primary" htmlType="submit" className="login_register_cofBut" onClick={handleSubmit}>注册</Button>
|
||||
</Form>
|
||||
<div className="link_span">已有账号，<Link to={`/login`}>立即登录</Link></div>
|
||||
{/* <OtherLogin /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,11 +36,21 @@ body>.-task-title {
|
|||
}
|
||||
.headerContent{
|
||||
margin:0px auto;
|
||||
padding:0px 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
.font32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
.font24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.globalSpin {
|
||||
max-height: 700px !important;
|
||||
|
|
|
|||
|
|
@ -398,7 +398,7 @@ export function TPMIndexHOC(WrappedComponent) {
|
|||
/> : ""}
|
||||
{npsModalVisible && <NpsModal closeNpsModal={()=>{this.closeNpsModal()}} npsActionType={npsActionType} npsActionId={npsActionId}/>}
|
||||
{ !pathCheck && <Header {...this.state} {...this.props} {...common} publicNav={publicNav}></Header> }
|
||||
{!publicNav && <div style={{height:"7vh"}}></div> }
|
||||
{/* {!publicNav && <div style={{height:"7vh"}}></div> } */}
|
||||
<div className="flexTop">
|
||||
{/* { !(this.hideNavPath(path)) &&
|
||||
<ul className="navBox">
|
||||
|
|
|
|||
Loading…
Reference in New Issue