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

layout

Browse Source
This commit is contained in:
sunny 2017-07-26 19:21:22 +09:00
parent 6bd41d7355
commit 1a61b1455c
4 changed files with 125 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/ts/@overflow/app/views/layout/AccountLayout.tsx
View File

@ -1,5 +1,11 @@
import * as React from 'react'; import * as React from 'react';
import { RouteComponentProps, RouteProps, Route, Switch } from 'react-router-dom'; import { RouteComponentProps, RouteProps, Route, Switch, } from 'react-router-dom';
import {
Header,
Grid,
Image,
Segment,
} from 'semantic-ui-react';
import SignIn from '../member/SignIn'; import SignIn from '../member/SignIn';
import SignUp from '../member/SignUp'; import SignUp from '../member/SignUp';
@ -20,12 +26,22 @@ class AccountLayout extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Switch> <Grid textAlign='center' className='fullHeight' verticalAlign='middle' style={{background:'#1a1b37'}}>
<Route path={`${this.props.match.url}/signin`} component={SignIn}/> <Grid.Column style={{ maxWidth: 450 }}>
<Route path={`${this.props.match.url}/signup`} component={SignUp}/> <Header as='h2' color='teal' textAlign='center'>
<Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/> <Image src='../asset/image/overFlow_CI_blue_180.png' /><br />
<Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/> {' '}Log-in to your account
</Switch> </Header>
<Segment raised>
<Switch>
<Route path={`${this.props.match.url}/signin`} component={SignIn}/>
<Route path={`${this.props.match.url}/signup`} component={SignUp}/>
<Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/>
<Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/>
</Switch>
</Segment>
</Grid.Column>
</Grid>
); );
} }

38
src/ts/@overflow/member/react/components/PWChange.tsx
View File

@ -2,11 +2,9 @@ import *as React from 'react';
import { import {
Input, Input,
InputOnChangeData, InputOnChangeData,
Select,
Button, Button,
Grid,
Form, Form,
Container, ButtonProps, ButtonProps,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
export interface StateProps { export interface StateProps {
@ -36,26 +34,20 @@ export class PWChange extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Form>
<Grid centered verticalAlign='middle'> <Form.Input placeholder='Password' type='password' onChange={
<Grid.Column mobile={16} tablet={6} computer={5}> (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
<Form> this.setState({ pass: data.value });
<Form.Input placeholder='Password' type='password' onChange={ }} />
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Input placeholder='Password Confirm' type='password' onChange={
this.setState({ pass: data.value }); (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
}} /> this.setState({ passCon: data.value });
<Form.Input placeholder='Password Confirm' type='password' onChange={ }} />
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Group>
this.setState({ passCon: data.value }); <Button primary fluid style={{margin:'7'}} onClick={this.passChangeClick}> Submit </Button>
}} /> <Button fluid style={{margin:'7'}}> Cancel </Button>
<Form.Group> </Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.passChangeClick}> Submit </Button> </Form>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>
</Grid.Column>
</Grid>
</Container>
); );
} }

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

@ -4,12 +4,11 @@ import {
InputOnChangeData, InputOnChangeData,
Select, Select,
Button, Button,
Header,
Modal, Modal,
Grid,
Form, Form,
Container,
ButtonProps, ButtonProps,
Grid,
Header,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
const options = [ const options = [
@ -50,57 +49,52 @@ export class SignIn extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Grid textAlign='center' className='fullHeight' verticalAlign='middle'> <Form>
<Grid.Column mobile={16} tablet={6} computer={5}> <Form.Input fluid placeholder='Email' onChange={
<Form> (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
<Form.Input fluid placeholder='Email' onChange={ this.setState({ email: data.value });
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { }} />
this.setState({ email: data.value }); <Form.Input fluid placeholder='Password' type='password' onChange={
}} /> (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
<Form.Input fluid placeholder='Password' type='password' onChange={ this.setState({ pass: data.value });
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { }} />
this.setState({ pass: data.value }); <div style={{textAlign:'right'}}>
}} /> <Button size='tiny' style={{background:'#fff'}} onClick={this.forgotPopupOpen}>Forgot Password?</Button>
<div style={{textAlign:'right'}}> </div>
<a style={{fontSize:10}} onClick={this.forgotPopupOpen}>Forgot Password</a> <Form.Group>
</div> <Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }> Sign In </Button>
<Form.Group> <Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
<Button fluid primary style={{margin:'7'}} onClick={ this.signInClick.bind(this) }> Sign In </Button> </Form.Group>
<Button fluid style={{margin:'7'}} href='/#/test2'> Sign Up </Button>
</Form.Group>
</Form>
<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>Change your password</Modal.Header>
<Modal.Content > <Modal.Content >
Enter email address Enter email address
<Grid centered> <Grid centered>
<Grid.Column mobile={14} tablet={8} computer={6}> <Grid.Column mobile={14} tablet={10} computer={10}>
<Input fluid placeholder='Email' /> <Input fluid placeholder='Email' />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
</Modal.Content> </Modal.Content>
<Modal.Actions> <Modal.Actions>
<Button primary onClick={this.sendComOpen}> Submit </Button> <Button primary onClick={this.sendComOpen}> Submit </Button>
<Button onClick={this.PopupClose}> Cancel </Button> <Button 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>Send Complete</Modal.Header>
<Modal.Content> <Modal.Content>
<Modal.Description> <Modal.Description>
<Header>비밀번호 변경이 신청 되었습니다.</Header> <Header>비밀번호 변경이 신청 되었습니다.</Header>
<p>수신하신 메일의 주소에서 비밀번호 변경을 완료 하시기 바랍니다.</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}> Ok </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
</Form>
</Grid.Column>
</Grid>
); );
} }

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

@ -4,9 +4,8 @@ import Member from '../../api/model/Member';
import { import {
InputOnChangeData, InputOnChangeData,
Button, Button,
Grid,
Form, Form,
Container, ButtonProps, ButtonProps,
} from 'semantic-ui-react'; } from 'semantic-ui-react';
export interface StateProps { export interface StateProps {
@ -57,53 +56,46 @@ export class SignUp extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Form>
<Grid centered verticalAlign='middle'> <Form.Input fluid value={this.state.email} placeholder='Email' onChange={
<Grid.Column mobile={16} tablet={6} computer={5}> (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
<Form> this.setState({ email: data.value });
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={ }} />
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { <Form.Input fluid placeholder='Name' onChange= {
this.setState({ email: data.value }); (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
}} /> this.setState({ name: data.value });
<Form.Input fluid placeholder='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' 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='Password Confirm' type='password' onChange={ }
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { } />
this.setState({ passCon: data.value }); <Form.Input fluid placeholder='Company' onChange={
} (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
} /> this.setState({ company: data.value });
<Form.Input fluid placeholder='Company' onChange={ }
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { }/>
this.setState({ company: data.value }); <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.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.Input fluid placeholder='phone' onChange={ }
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { } />
this.setState({ phone: data.value }); <Form.Group>
} <Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button>
} /> <Button fluid style={{margin:'7'}}> Cancel </Button>
<Form.Group> </Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button> </Form>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>
</Grid.Column>
</Grid>
</Container>
); );
} }