forked from Gitlink/forgeplus-react
修改资料+密码管理
This commit is contained in:
parent
975d49b80b
commit
fd19a43168
|
@ -25,7 +25,7 @@ if (isDev) {
|
||||||
}
|
}
|
||||||
debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
|
debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
|
||||||
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
|
window.location.search.indexOf('debug=s') !== -1 ? 'student' :
|
||||||
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
|
window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'student'
|
||||||
}
|
}
|
||||||
window._debugType = debugType;
|
window._debugType = debugType;
|
||||||
export function initAxiosInterceptors(props) {
|
export function initAxiosInterceptors(props) {
|
||||||
|
|
|
@ -401,6 +401,7 @@ class Detail extends Component {
|
||||||
const urlFlag = (urlArr.length === 3);
|
const urlFlag = (urlArr.length === 3);
|
||||||
|
|
||||||
const { projectsId , owner } = this.props.match.params;
|
const { projectsId , owner } = this.props.match.params;
|
||||||
|
const { current_user } = this.props;
|
||||||
let pathname = checkPathname(projectsId,owner,url);
|
let pathname = checkPathname(projectsId,owner,url);
|
||||||
|
|
||||||
const { state } = this.props.history.location;
|
const { state } = this.props.history.location;
|
||||||
|
@ -461,8 +462,8 @@ class Detail extends Component {
|
||||||
firstSync ? "":
|
firstSync ? "":
|
||||||
<span className="df mt25">
|
<span className="df mt25">
|
||||||
{
|
{
|
||||||
projectDetail && projectDetail.type && projectDetail.type === 2 ?
|
current_user && current_user.login && (projectDetail && projectDetail.type && projectDetail.type === 2) ?
|
||||||
<a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
|
<a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
|
||||||
}
|
}
|
||||||
<span className="detail_tag_btn">
|
<span className="detail_tag_btn">
|
||||||
<a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
|
<a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
|
||||||
|
|
|
@ -5339,9 +5339,9 @@ export const locData = Array.from(province.keys()).map(p=>({
|
||||||
children:Array.from(province.get(p).keys()).map((c,key)=>({
|
children:Array.from(province.get(p).keys()).map((c,key)=>({
|
||||||
value:c,
|
value:c,
|
||||||
label:c,
|
label:c,
|
||||||
children:Array.from(area.keys())[key].map(a=>({
|
// children:Array.from(area.keys())[key].map(a=>({
|
||||||
value:a,
|
// value:a,
|
||||||
label:a,
|
// label:a,
|
||||||
}))
|
// }))
|
||||||
}))
|
}))
|
||||||
}));
|
}));
|
|
@ -48,6 +48,7 @@ function Index(props) {
|
||||||
// 在贡献度日历表中选择一个时间
|
// 在贡献度日历表中选择一个时间
|
||||||
function chooseTime(data) {
|
function chooseTime(data) {
|
||||||
if(data){
|
if(data){
|
||||||
|
setPage(1);
|
||||||
setActivityDate(data[0]);
|
setActivityDate(data[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -97,7 +97,61 @@ $flex:flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.userDescription{
|
||||||
|
color: #666666;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: left;
|
||||||
|
margin:10px 0px;
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.focusBox,.infoBox{
|
||||||
|
width: 100%!important;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 1px solid #f1f1f1;
|
||||||
|
}
|
||||||
|
.infoBox{
|
||||||
|
padding-bottom: 10px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 28px;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 20px;
|
||||||
|
i{
|
||||||
|
color: #DEDEDE;
|
||||||
|
font-size: 15px!important;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
margin-left:10px ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.headimg{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
img{
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
position: absolute;
|
||||||
|
bottom: -6px;
|
||||||
|
right: 0px;
|
||||||
|
left: 65px;
|
||||||
|
i{
|
||||||
|
font-size: 25px!important;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
&.icon-nan{
|
||||||
|
color: #1890FF;
|
||||||
|
}
|
||||||
|
&.icon-nv{
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
ul.ant-menu.menuStyle{
|
ul.ant-menu.menuStyle{
|
||||||
padding:0px 30px;
|
padding:0px 30px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { Avatar, Tag, Button, Spin , Menu } from "antd";
|
import { Button, Spin , Menu } from "antd";
|
||||||
import FocusButton from "../UsersList/focus_button";
|
import FocusButton from "../UsersList/focus_button";
|
||||||
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
@ -14,7 +14,10 @@ import './Index.scss';
|
||||||
import Loadable from "react-loadable";
|
import Loadable from "react-loadable";
|
||||||
import Loading from "../../Loading";
|
import Loading from "../../Loading";
|
||||||
|
|
||||||
|
const UpdateInfo = Loadable({
|
||||||
|
loader: () => import("./Material/Index"),
|
||||||
|
loading: Loading,
|
||||||
|
});
|
||||||
const InfosDevOps = Loadable({
|
const InfosDevOps = Loadable({
|
||||||
loader: () => import("./devOpsCI"),
|
loader: () => import("./devOpsCI"),
|
||||||
loading: Loading,
|
loading: Loading,
|
||||||
|
@ -86,6 +89,8 @@ class Infos extends Component {
|
||||||
this.setState({menuKey:undefined,route_type:"watchers"});
|
this.setState({menuKey:undefined,route_type:"watchers"});
|
||||||
}else if(pathname === `/users/${username}/fan_users`){
|
}else if(pathname === `/users/${username}/fan_users`){
|
||||||
this.setState({menuKey:undefined,route_type:"fan_users"});
|
this.setState({menuKey:undefined,route_type:"fan_users"});
|
||||||
|
}else{
|
||||||
|
this.setState({menuKey:undefined,route_type:undefined});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -123,41 +128,25 @@ class Infos extends Component {
|
||||||
const { notice } = this.state;
|
const { notice } = this.state;
|
||||||
|
|
||||||
let url = `/users/${username || (current_user && current_user.login)}.json`;
|
let url = `/users/${username || (current_user && current_user.login)}.json`;
|
||||||
axios
|
axios.get(url).then((result) => {
|
||||||
.get(url)
|
let e = result.data && result.data.undo_events;
|
||||||
.then((result) => {
|
let p = result.data && result.data.undo_messages;
|
||||||
let e = result.data && result.data.undo_events;
|
let n = notice || pathname === `/users/${username}/notice` ;
|
||||||
let p = result.data && result.data.undo_messages;
|
this.setState({
|
||||||
let n = notice || pathname === `/users/${username}/notice` ;
|
user: result.data,
|
||||||
this.setState({
|
isSpin: false,
|
||||||
user: result.data,
|
undo_events:n ? (e-p) : e,
|
||||||
isSpin: false,
|
undo_messages:0,
|
||||||
undo_events:n ? (e-p) : e,
|
notice:n
|
||||||
undo_messages:0,
|
|
||||||
notice:n
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
this.setState({
|
|
||||||
isSpin: false,
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.setState({
|
||||||
|
isSpin: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// change_project_type = (type) => {
|
|
||||||
// const {user} = this.state
|
|
||||||
// this.setState({
|
|
||||||
// project_type: type ,
|
|
||||||
// route_type: undefined
|
|
||||||
// })
|
|
||||||
// let url = `/users/${user && user.login}`
|
|
||||||
// if (type){
|
|
||||||
// url = `/users/${user && user.login}/projects/${type}`
|
|
||||||
// }
|
|
||||||
// this.props.history.push(url)
|
|
||||||
|
|
||||||
// };
|
|
||||||
|
|
||||||
change_devops_type=(type)=>{
|
change_devops_type=(type)=>{
|
||||||
const {user} = this.state;
|
const {user} = this.state;
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -194,39 +183,51 @@ class Infos extends Component {
|
||||||
this.props.history.push(`/users/${user && user.login}/organizes`)
|
this.props.history.push(`/users/${user && user.login}/organizes`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
resetUser=(data)=>{
|
||||||
|
this.setState({
|
||||||
|
user:data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { current_user, mygetHelmetapi } = this.props;
|
const { current_user, mygetHelmetapi } = this.props;
|
||||||
const { username } = this.props.match.params;
|
const { username } = this.props.match.params;
|
||||||
|
|
||||||
const { user, isSpin, project_type, route_type , undo_events , undo_messages , menuKey } = this.state;
|
const { user, isSpin, project_type, route_type , undo_events , undo_messages , menuKey } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="newMain clearfix">
|
<div className="newMain clearfix">
|
||||||
<Spin spinning={isSpin}>
|
<Spin spinning={isSpin}>
|
||||||
<div className="new-content-flex">
|
<div className="new-content-flex">
|
||||||
<div className="list-left" style={{border:"none"}}>
|
<div className="list-left" style={{border:"none"}}>
|
||||||
<div className="bgcF">
|
<div className="bgcF">
|
||||||
<div className="list-l-Menu text-center pd20">
|
<div className="list-l-Menu text-center" style={{padding:"20px 25px"}}>
|
||||||
<Avatar size={110} src={getImageUrl(`/${user && user.image_url}`)} />
|
<span className="headimg">
|
||||||
{user && user.user_identity && (
|
<img src={getImageUrl(`/${user && user.image_url}`)} alt=""/>
|
||||||
<div className="mt-n15 position-relative">
|
<span>
|
||||||
<Tag color="#FF6E21" style={{marginRight:"0px"}}>{user && user.user_identity}</Tag>
|
{
|
||||||
</div>
|
user && user.gender===1?
|
||||||
)}
|
<i className="iconfont icon-nan"></i>
|
||||||
|
:
|
||||||
|
<i className="iconfont icon-nv"></i>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
<div className="text-center mt15 font-16 fwb">
|
<div className="text-center mt15 font-16 fwb">
|
||||||
{user && user.username}
|
{user && user.username}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="userDescription">
|
||||||
|
{user && user.description}
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{user && current_user && user.login === current_user.login && (
|
{user && current_user && user.login === current_user.login && (
|
||||||
<div className="user-info-star-button ">
|
<div className="user-info-star-button ">
|
||||||
<Button
|
<Button
|
||||||
block
|
block
|
||||||
className="text-button-grey"
|
className="text-button-grey"
|
||||||
href={`${
|
onClick={()=>this.props.history.push(`/users/${user.login}/info`)}
|
||||||
mygetHelmetapi &&mygetHelmetapi.new_course&&
|
type="primary"
|
||||||
mygetHelmetapi.new_course.edit_account
|
|
||||||
}`}
|
|
||||||
target="_blank"
|
|
||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
<i className="iconfont icon-shezhi4 font-15 mr5"></i>
|
<i className="iconfont icon-shezhi4 font-15 mr5"></i>
|
||||||
|
@ -246,7 +247,7 @@ class Infos extends Component {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="width100 inline-block mt20">
|
<div className="focusBox">
|
||||||
<Link
|
<Link
|
||||||
to={`/users/${user && user.login}/watchers`}
|
to={`/users/${user && user.login}/watchers`}
|
||||||
className={`with50 text-center pull-left ${route_type === "watchers" ? "text-primary" : ""}`}
|
className={`with50 text-center pull-left ${route_type === "watchers" ? "text-primary" : ""}`}
|
||||||
|
@ -264,11 +265,20 @@ class Infos extends Component {
|
||||||
<span>{user && user.watched_count}</span>
|
<span>{user && user.watched_count}</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
{
|
||||||
|
user && (user.province || user.custom_department || user.email) ?
|
||||||
|
<div className="infoBox">
|
||||||
|
{ user.province && <div><i className="iconfont icon-weizhi"></i><span>{user.province}</span><span>{user.city}</span></div> }
|
||||||
|
{ user.custom_department && <div><i className="iconfont icon-danwei"></i><span>{user.custom_department}</span></div> }
|
||||||
|
{ user.email && <div><i className="iconfont icon-youxiangrenzheng"></i><span>{user.email}</span></div> }
|
||||||
|
</div>
|
||||||
|
:""
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="list-right">
|
<div className="list-right">
|
||||||
{ !route_type &&
|
{ !route_type && menuKey &&
|
||||||
<Menu selectedKeys={[menuKey]} mode={`horizontal`} className="infosRightMenu">
|
<Menu selectedKeys={[menuKey]} mode={`horizontal`} className="infosRightMenu">
|
||||||
<Menu.Item key="0"><Link to={`/users/${user && user.login}`}><i className="iconfont icon-gailan"></i>概览</Link></Menu.Item>
|
<Menu.Item key="0"><Link to={`/users/${user && user.login}`}><i className="iconfont icon-gailan"></i>概览</Link></Menu.Item>
|
||||||
<Menu.Item key="1"><Link to={`/users/${user && user.login}/statistics`}><i className="iconfont icon-shujutongji"></i>数据统计</Link></Menu.Item>
|
<Menu.Item key="1"><Link to={`/users/${user && user.login}/statistics`}><i className="iconfont icon-shujutongji"></i>数据统计</Link></Menu.Item>
|
||||||
|
@ -330,6 +340,19 @@ class Infos extends Component {
|
||||||
return <Organize {...this.props} {...this.state} />;
|
return <Organize {...this.props} {...this.state} />;
|
||||||
}}
|
}}
|
||||||
></Route>
|
></Route>
|
||||||
|
<Route
|
||||||
|
path="/users/:username/info"
|
||||||
|
render={() => {
|
||||||
|
return <UpdateInfo {...this.props} {...this.state} resetUser={this.resetUser}/>;
|
||||||
|
}}
|
||||||
|
></Route>
|
||||||
|
<Route
|
||||||
|
path="/users/:username/password"
|
||||||
|
render={() => {
|
||||||
|
return <UpdateInfo {...this.props} {...this.state}/>;
|
||||||
|
}}
|
||||||
|
></Route>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="/users/:username/statistics"
|
path="/users/:username/statistics"
|
||||||
render={(props) => {
|
render={(props) => {
|
||||||
|
|
|
@ -0,0 +1,132 @@
|
||||||
|
import React , { forwardRef, useEffect } from 'react';
|
||||||
|
import { Form , Checkbox , Input, Radio , Button , Cascader } from 'antd';
|
||||||
|
import { AlignCenter } from '../../Component/layout';
|
||||||
|
import './Index.scss';
|
||||||
|
import { locData } from '../../Utils/locData';
|
||||||
|
import Axios from 'axios';
|
||||||
|
|
||||||
|
const { TextArea } = Input;
|
||||||
|
export default Form.create()(
|
||||||
|
forwardRef((props)=>{
|
||||||
|
const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
|
||||||
|
const { username } = props && props.match && props.match.params;
|
||||||
|
const { current_user , resetUser } = props;
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(current_user && current_user.login){
|
||||||
|
setFieldsValue({
|
||||||
|
...current_user,
|
||||||
|
location:current_user.province && [current_user.province,current_user.city]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},[current_user])
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
validateFields((error,values)=>{
|
||||||
|
if(!error){
|
||||||
|
submitFunc(values);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitFunc(values) {
|
||||||
|
const url = `/users/${username}.json`;
|
||||||
|
const params={
|
||||||
|
user: {
|
||||||
|
nickname: values.real_name,
|
||||||
|
user_extension_attributes: {
|
||||||
|
province: values.location && values.location[0],
|
||||||
|
city: values.location && values.location[1],
|
||||||
|
...values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Axios.put(url,params).then(result=>{
|
||||||
|
if(result && result.data){
|
||||||
|
resetUser && resetUser(result.data);
|
||||||
|
}
|
||||||
|
}).catch(error=>{})
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Form layout={'inline'} className="formBase">
|
||||||
|
<Form.Item label="邮箱">
|
||||||
|
{getFieldDecorator("email",{
|
||||||
|
rules:[{required:true,message:"请输入邮箱账号"}]
|
||||||
|
})(
|
||||||
|
<Input placeholder="请输入您的邮箱账号" style={{width:"400px"}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="">
|
||||||
|
{getFieldDecorator("show_email",{
|
||||||
|
rules:[],
|
||||||
|
valuePropName:"checked"
|
||||||
|
})(
|
||||||
|
<Checkbox>在个人主页展示</Checkbox>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="姓名">
|
||||||
|
{getFieldDecorator("real_name",{
|
||||||
|
rules:[{required:true,message:"请输入姓名"}]
|
||||||
|
})(
|
||||||
|
<Input placeholder="请输入您的姓名" style={{width:"400px"}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<div>
|
||||||
|
<Form.Item label="性别">
|
||||||
|
{getFieldDecorator("gender",{
|
||||||
|
rules:[{required:true,message:"请选择性别"}]
|
||||||
|
})(
|
||||||
|
<Radio.Group>
|
||||||
|
<Radio value={1}>男</Radio>
|
||||||
|
<Radio value={0}>女</Radio>
|
||||||
|
</Radio.Group>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
<Form.Item label="单位名称">
|
||||||
|
{getFieldDecorator("custom_department",{
|
||||||
|
rules:[{required:true,message:"请输入单位名称"}]
|
||||||
|
})(
|
||||||
|
<Input placeholder="请输入单位名称" style={{width:"400px"}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="">
|
||||||
|
{getFieldDecorator("show_department",{
|
||||||
|
rules:[],
|
||||||
|
valuePropName:"checked"
|
||||||
|
})(
|
||||||
|
<Checkbox>在个人主页展示</Checkbox>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="地区">
|
||||||
|
{getFieldDecorator("location",{
|
||||||
|
rules:[]
|
||||||
|
})(
|
||||||
|
<Cascader placeholder="请选择省份城市" options={locData} style={{width:"400px"}}></Cascader>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="">
|
||||||
|
{getFieldDecorator("show_location",{
|
||||||
|
rules:[],
|
||||||
|
valuePropName:"checked"
|
||||||
|
})(
|
||||||
|
<Checkbox>在个人主页展示</Checkbox>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="简介">
|
||||||
|
{getFieldDecorator("description",{
|
||||||
|
rules:[]
|
||||||
|
})(
|
||||||
|
<TextArea placeholder="请输入您的自我理解" rows={4} maxLength="140" style={{width:"600px"}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<AlignCenter>
|
||||||
|
<span className="ant-form-item-label"></span>
|
||||||
|
<Button type={"primary"} onClick={submit}>提交</Button>
|
||||||
|
<Button type={"default"} onClick={()=>props.history.push(`/users/${username}`)} className="ml20">取消</Button>
|
||||||
|
</AlignCenter>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
)
|
|
@ -0,0 +1,50 @@
|
||||||
|
import React , { useEffect , useState } from 'react';
|
||||||
|
import './Index.scss';
|
||||||
|
import { Menu } from 'antd';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import Base from './Base';
|
||||||
|
import Password from './Password';
|
||||||
|
|
||||||
|
function Index(props){
|
||||||
|
const { username } = props && props.match && props.match.params;
|
||||||
|
const { pathname } = props && props.location;
|
||||||
|
const { current_user } = props;
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if((username && current_user && (current_user.login !== username))){
|
||||||
|
props.history.push(`/users/${username}`);
|
||||||
|
}
|
||||||
|
},[current_user,username])
|
||||||
|
|
||||||
|
const [ key , setKey ] = useState("0");
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
if(pathname){
|
||||||
|
if(pathname === `/users/${username}/info`){
|
||||||
|
setKey("0");
|
||||||
|
}else{
|
||||||
|
setKey("1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},[pathname])
|
||||||
|
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
|
||||||
|
<Menu.Item key="0"><Link to={`/users/${username}/info`}>基本资料</Link></Menu.Item>
|
||||||
|
<Menu.Item key="1"><Link to={`/users/${username}/password`}>密码管理</Link></Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
<div style={{padding:"20px"}}>
|
||||||
|
{
|
||||||
|
key === "0" ?
|
||||||
|
<Base {...props}/>
|
||||||
|
:
|
||||||
|
<Password {...props}/>
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Index;
|
|
@ -0,0 +1,14 @@
|
||||||
|
.formBase{
|
||||||
|
.ant-form-item-label{
|
||||||
|
width: 80px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.ant-form-explain{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.formBase.passMan{
|
||||||
|
.ant-form-item-label{
|
||||||
|
width: 92px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,98 @@
|
||||||
|
import React , { forwardRef, useState } from 'react';
|
||||||
|
import { Form , Input , Button } from 'antd';
|
||||||
|
import { AlignCenter } from '../../Component/layout';
|
||||||
|
import Axios from 'axios';
|
||||||
|
|
||||||
|
|
||||||
|
export default Form.create()(
|
||||||
|
forwardRef((props)=>{
|
||||||
|
const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
|
||||||
|
const { username } = props && props.match && props.match.params;
|
||||||
|
const { current_user} = props;
|
||||||
|
|
||||||
|
const [ oldPass , setOldPass ] = useState(undefined);
|
||||||
|
const [ oldPassRepeat , setOldPassRepeat ] = useState(undefined);
|
||||||
|
|
||||||
|
function submit() {
|
||||||
|
validateFields((error,values)=>{
|
||||||
|
if(!error){
|
||||||
|
submitFunc(values);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function submitFunc(values) {
|
||||||
|
const url = `/accounts/change_password.json`;
|
||||||
|
Axios.post(url,{
|
||||||
|
login:current_user && current_user.login,
|
||||||
|
...values
|
||||||
|
}).then(result=>{
|
||||||
|
if(result && result.data){
|
||||||
|
props.showNotification("密码重置成功!")
|
||||||
|
}
|
||||||
|
}).catch(error=>{})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断两次输入的密码是否一致
|
||||||
|
function checkIdentifier(rule, value, callback , inputValue){
|
||||||
|
if(!value){
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
if (value && inputValue && value !== inputValue) {
|
||||||
|
callback("两次输入的密码不一致");
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
var reg = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/;
|
||||||
|
|
||||||
|
function checkNewPass(rule, value, callback) {
|
||||||
|
if(!value){
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
if (!reg.test(value)) {
|
||||||
|
callback("8-16个字符,不包含空格,必须包含数字,字母或字符至少两种");
|
||||||
|
}
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<Form layout={'inline'} className="formBase passMan">
|
||||||
|
<Form.Item label="旧密码">
|
||||||
|
{getFieldDecorator("old_password",{
|
||||||
|
rules:[
|
||||||
|
{required:true,message:"请输入旧密码"},
|
||||||
|
{validator:(rule, value, callback)=>checkIdentifier(rule, value, callback,oldPassRepeat)}
|
||||||
|
]
|
||||||
|
})(
|
||||||
|
<Input.Password placeholder="请输入旧密码" style={{width:"400px"}} onChange={(e)=>{setOldPass(e.target.value)}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="重复旧密码">
|
||||||
|
{getFieldDecorator("old_password_repeat",{
|
||||||
|
rules:[
|
||||||
|
{required:true,message:"请重新输入旧密码"},
|
||||||
|
{validator:(rule, value, callback)=>checkIdentifier(rule, value, callback,oldPass)}
|
||||||
|
]
|
||||||
|
})(
|
||||||
|
<Input.Password placeholder="请重新输入旧密码" style={{width:"400px"}} onChange={(e)=>{setOldPassRepeat(e.target.value)}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item label="新密码">
|
||||||
|
{getFieldDecorator("password",{
|
||||||
|
rules:[
|
||||||
|
{required:true,message:"请输入新密码"},
|
||||||
|
{validator:checkNewPass}
|
||||||
|
]
|
||||||
|
})(
|
||||||
|
<Input.Password placeholder="请输入新密码" style={{width:"400px"}}/>
|
||||||
|
)}
|
||||||
|
</Form.Item>
|
||||||
|
<AlignCenter style={{marginTop:"20px"}}>
|
||||||
|
<span className="ant-form-item-label"></span>
|
||||||
|
<Button type={"primary"} onClick={submit}>提交</Button>
|
||||||
|
<Button type={"default"} onClick={()=>props.history.push(`/users/${username}`)} className="ml20">取消</Button>
|
||||||
|
</AlignCenter>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
)
|
|
@ -30,7 +30,7 @@
|
||||||
.position-relative{position: relative;}
|
.position-relative{position: relative;}
|
||||||
.mr-5{margin-right: 5px;}
|
.mr-5{margin-right: 5px;}
|
||||||
a.text-button-grey{
|
a.text-button-grey{
|
||||||
color: rgba(0, 0, 0, 0.65)
|
color: #fff;
|
||||||
}
|
}
|
||||||
.user-info-star-button{margin: 20px 50px 0 50px}
|
.user-info-star-button{margin: 20px 50px 0 50px}
|
||||||
.list-l-p{
|
.list-l-p{
|
||||||
|
|
Loading…
Reference in New Issue