overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

account component modify

Browse Source
This commit is contained in:
geek 2017-12-27 17:10:20 +09:00
parent 23e106db8f
commit f4adec81f9
3 changed files with 119 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/ts/@overflow/member/react/components/Modify.tsx
View File

@ -6,6 +6,8 @@ import {
Button,
Form,
ButtonProps,
Grid,
Image,
} from 'semantic-ui-react';
import MemberStatus from '../../api/model/MemberStatus';
@ -63,57 +65,84 @@ export class Modify extends React.Component<Props, State> {
console.log(data);
}
public render(): JSX.Element {
// public render(): JSX.Element {
// let modifyElement = null;
// if (this.props.member === null || this.props.member === undefined) {
// return null;
// }
// modifyElement = <Form>
// <Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' disabled/>
// <Form.Input fluid placeholder='Name' defaultValue={this.props.member.name} onChange= {
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ name: data.value });
// }
// }/>
// <Form.Input fluid placeholder='Password' type='password' onChange={
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ pass: data.value });
// }
// } />
// <Form.Input fluid placeholder='Password Confirm' type='password' onChange={
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ passCon: data.value });
// }
// } />
// <Form.Input fluid placeholder='Company' defaultValue={this.props.member.companyName} onChange={
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ company: data.value });
// }
// }/>
// {/* <Form.Select fluid placeholder='Select your country' options={options} onChange={
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ country: data.value });
// }
// } /> */}
// <Form.Input fluid placeholder='phone' defaultValue={this.props.member.phone} onChange={
// (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
// this.setState({ phone: data.value });
// }
// } />
// <Form.Group>
// <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}> Modify </Button>
// <Button fluid style={{margin:'7'}}> Cancel </Button>
// </Form.Group>
// </Form>;
// // if (this.props.member !== undefined && this.props.member.id > 0) {
// // Todo Please check the member registration e-mail.
// // this.props.onRedirectHome();
// // } else {
// return modifyElement;
// // }
// }
public render(): JSX.Element {
let modifyElement = null;
if (this.props.member === null || this.props.member === undefined) {
return null;
}
modifyElement = <Form>
<Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' disabled/>
<Form.Input fluid placeholder='Name' defaultValue={this.props.member.name} onChange= {
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}
}/>
<Form.Input fluid placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}
} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}
} />
<Form.Input fluid placeholder='Company' defaultValue={this.props.member.companyName} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}
}/>
<Form.Select fluid placeholder='Select your country' options={options} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}
} />
<Form.Input fluid placeholder='phone' defaultValue={this.props.member.phone} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}
} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}> Modify </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>;
// if (this.props.member !== undefined && this.props.member.id > 0) {
// Todo Please check the member registration e-mail.
// this.props.onRedirectHome();
// } else {
return modifyElement;
// }
modifyElement =
<Form>
<Grid>
<Grid.Column width={4}>
<Image src='../public/asset/image/overFlow_CI_blue_180.png' />
</Grid.Column>
<Grid.Column width={12} >
<Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' />
<Form.Input fluid defaultValue={this.props.member.name} placeholder='Name' />
<Form.Input fluid defaultValue={this.props.member.companyName} placeholder='CompanyName' />
<Form.Input fluid defaultValue={this.props.member.phone} placeholder='Phone' />
</Grid.Column>
</Grid>
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}> Save </Button>
</Form.Group>
</Form>;
return modifyElement;
}
private modifyClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {

24
src/ts/@overflow/member/react/components/SignIn.tsx
View File

@ -68,21 +68,23 @@ export class SignIn extends React.Component<Props, State> {
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}} />
<div style={{textAlign:'right'}}>
{/* <div style={{textAlign:'right'}}>
<Button size='tiny' style={{background:'#fff'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
</div>
</div> */}
<Form.Group>
<Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }> Sign In </Button>
</Form.Group>
<Form.Group>
<Button fluid style={{margin:'7'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
<Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
</Form.Group>
<Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}>
<Modal.Header>Change your password</Modal.Header>
<Modal.Header>Reset your password</Modal.Header>
<Modal.Content >
Enter email address
<Grid centered>
<Grid.Column mobile={14} tablet={10} computer={10}>
<Input fluid placeholder='Email' onChange={
<Input fluid placeholder='Please enter your email.' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
@ -90,21 +92,21 @@ export class SignIn extends React.Component<Props, State> {
</Grid>
</Modal.Content>
<Modal.Actions>
<Button primary onClick={this._sendComOpen}> Submit </Button>
<Button onClick={this.PopupClose}> Cancel </Button>
<Button fluid style={{margin:'7'}} primary onClick={this._sendComOpen}> Send Email </Button>
<Button primary style={{margin:'7'}} onClick={this._sendComOpen}> Sign In </Button>
<Button style={{margin:'7'}} onClick={this.PopupClose}> Cancel </Button>
</Modal.Actions>
</Modal>
<Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}>
<Modal.Header>Send Complete</Modal.Header>
<Modal.Header>Reset Password</Modal.Header>
<Modal.Content>
<Modal.Description>
<Header>비밀번호 변경이 신청 되었습니다.</Header>
<p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
<p>Your password reset email has been sent if this email/username exists.</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<Button primary onClick={this.PopupClose}> Ok </Button>
<Button primary onClick={this.PopupClose}> Go Home </Button>
</Modal.Actions>
</Modal>
</Form>;

42
src/ts/@overflow/member/react/components/SignUp.tsx
View File

@ -3,6 +3,7 @@ import Member from '../../api/model/Member';
import {
InputOnChangeData,
CheckboxProps,
Button,
Form,
ButtonProps,
@ -28,12 +29,13 @@ export interface State {
company: string;
phone: string;
country: string;
checked: boolean;
}
const options = [
{ key: 'southkorea', value: '82', text: 'South Korea(82)' },
{ key: 'unitedstates', value: '1', text: 'United States(1)' },
];
// const options = [
// { key: 'southkorea', value: '82', text: 'South Korea(82)' },
// { key: 'unitedstates', value: '1', text: 'United States(1)' },
// ];
export class SignUp extends React.Component<Props, State> {
@ -48,6 +50,7 @@ export class SignUp extends React.Component<Props, State> {
company: null,
phone: null,
country: null,
checked: false,
};
}
@ -61,6 +64,7 @@ export class SignUp extends React.Component<Props, State> {
let signupElement = <Form>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
// Todo Email Check
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
@ -69,12 +73,14 @@ export class SignUp extends React.Component<Props, State> {
this.setState({ name: data.value });
}
}/>
<Form.Input fluid placeholder='Password' type='password' onChange={
<Form.Input fluid placeholder='Password' prompt='dfsdfs' type='password' onChange={
// Todo Password Complexity Check & Length Check (8 characters or more and 50 characters or less)
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}
} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={
// Todo Password Equal Check
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}
@ -84,19 +90,33 @@ export class SignUp extends React.Component<Props, State> {
this.setState({ company: data.value });
}
}/>
<Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
{/* <Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}
} />
} /> */}
<Form.Input fluid placeholder='phone' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}
} />
<Form.Checkbox label={<label>I accept <a href = '/' target='_blank'> Term </a>and
<a href='/' target='_blank'>privacy</a></label>} onClick={
(event: React.MouseEvent<HTMLInputElement>, data: CheckboxProps) => {
if (this.state.checked) {
this.setState({ checked: false });
} else {
this.setState({ checked: true });
}
}
} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
<Button primary fluid style={{margin:'2'}} onClick={this.signUpClick}> Join Now </Button>
</Form.Group>
<Form.Group>
<Button fluid style={{margin:'5'}}> Cancel </Button>
<Button primary fluid style={{margin:'5'}} onClick={this.signinClick}> Sign In </Button>
</Form.Group>
</Form>;
if (this.props.member !== undefined && this.props.member.id > 0) {
@ -108,6 +128,10 @@ export class SignUp extends React.Component<Props, State> {
}
private signinClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
return;
}
private signUpClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
let member:Member = {};