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

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

@ -6,6 +6,8 @@ import {
Button, Button,
Form, Form,
ButtonProps, ButtonProps,
Grid,
Image,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
import MemberStatus from '../../api/model/MemberStatus'; import MemberStatus from '../../api/model/MemberStatus';
@ -63,57 +65,84 @@ export class Modify extends React.Component<Props, State> {
console.log(data); 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; let modifyElement = null;
if (this.props.member === null || this.props.member === undefined) { if (this.props.member === null || this.props.member === undefined) {
return null; return null;
} }
modifyElement = <Form> modifyElement =
<Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' disabled/> <Form>
<Form.Input fluid placeholder='Name' defaultValue={this.props.member.name} onChange= { <Grid>
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Grid.Column width={4}>
this.setState({ name: data.value }); <Image src='../public/asset/image/overFlow_CI_blue_180.png' />
} </Grid.Column>
}/> <Grid.Column width={12} >
<Form.Input fluid placeholder='Password' type='password' onChange={ <Form.Input fluid defaultValue={this.props.member.email} placeholder='Email' />
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Input fluid defaultValue={this.props.member.name} placeholder='Name' />
this.setState({ pass: data.value }); <Form.Input fluid defaultValue={this.props.member.companyName} placeholder='CompanyName' />
} <Form.Input fluid defaultValue={this.props.member.phone} placeholder='Phone' />
} /> </Grid.Column>
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={ </Grid>
(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> <Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}> Modify </Button> <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}> Save </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group> </Form.Group>
</Form>; </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; return modifyElement;
// }
} }
private modifyClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => { 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) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value }); 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> <Button size='tiny' style={{background:'#fff'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
</div> </div> */}
<Form.Group> <Form.Group>
<Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }> Sign In </Button> <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> <Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
</Form.Group> </Form.Group>
<Modal size='small' open={this.state.forgotPopup} onClose={this.PopupClose}> <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 > <Modal.Content >
Enter email address
<Grid centered> <Grid centered>
<Grid.Column mobile={14} tablet={10} computer={10}> <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) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value }); this.setState({ email: data.value });
}} /> }} />
@ -90,21 +92,21 @@ export class SignIn extends React.Component<Props, State> {
</Grid> </Grid>
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button primary onClick={this._sendComOpen}> Submit </Button> <Button fluid style={{margin:'7'}} primary onClick={this._sendComOpen}> Send Email </Button>
<Button onClick={this.PopupClose}> Cancel </Button> <Button primary style={{margin:'7'}} onClick={this._sendComOpen}> Sign In </Button>
<Button style={{margin:'7'}} onClick={this.PopupClose}> Cancel </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
<Modal size='small' open={this.state.sendComPopup} onClose={this.PopupClose}> <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.Content>
<Modal.Description> <Modal.Description>
<Header>비밀번호 변경이 신청 되었습니다.</Header> <p>Your password reset email has been sent if this email/username exists.</p>
<p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</p>
</Modal.Description> </Modal.Description>
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button primary onClick={this.PopupClose}> Ok </Button> <Button primary onClick={this.PopupClose}> Go Home </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
</Form>; </Form>;

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

@ -3,6 +3,7 @@ import Member from '../../api/model/Member';
import { import {
InputOnChangeData, InputOnChangeData,
CheckboxProps,
Button, Button,
Form, Form,
ButtonProps, ButtonProps,
@ -28,12 +29,13 @@ export interface State {
company: string; company: string;
phone: string; phone: string;
country: string; country: string;
checked: boolean;
} }
const options = [ // const options = [
{ key: 'southkorea', value: '82', text: 'South Korea(82)' }, // { key: 'southkorea', value: '82', text: 'South Korea(82)' },
{ key: 'unitedstates', value: '1', text: 'United States(1)' }, // { key: 'unitedstates', value: '1', text: 'United States(1)' },
]; // ];
export class SignUp extends React.Component<Props, State> { export class SignUp extends React.Component<Props, State> {
@ -48,6 +50,7 @@ export class SignUp extends React.Component<Props, State> {
company: null, company: null,
phone: null, phone: null,
country: null, country: null,
checked: false,
}; };
} }
@ -61,6 +64,7 @@ export class SignUp extends React.Component<Props, State> {
let signupElement = <Form> let signupElement = <Form>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={ <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
// Todo Email Check
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value }); this.setState({ email: data.value });
}} /> }} />
@ -69,12 +73,14 @@ export class SignUp extends React.Component<Props, State> {
this.setState({ name: data.value }); 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) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value }); this.setState({ pass: data.value });
} }
} /> } />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={ <Form.Input fluid placeholder='Password Confirm' type='password' onChange={
// Todo Password Equal Check
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value }); this.setState({ passCon: data.value });
} }
@ -84,19 +90,33 @@ export class SignUp extends React.Component<Props, State> {
this.setState({ company: data.value }); 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) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value }); this.setState({ country: data.value });
} }
} /> } /> */}
<Form.Input fluid placeholder='phone' onChange={ <Form.Input fluid placeholder='phone' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value }); 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> <Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button> <Button primary fluid style={{margin:'2'}} onClick={this.signUpClick}> Join Now </Button>
<Button fluid style={{margin:'7'}}> Cancel </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.Group>
</Form>; </Form>;
if (this.props.member !== undefined && this.props.member.id > 0) { 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 => { private signUpClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
let member:Member = {}; let member:Member = {};