-
Notifications
You must be signed in to change notification settings - Fork 58
/
ConfirmRegisterForm.js
116 lines (105 loc) · 4.09 KB
/
ConfirmRegisterForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react'
import { Button, Form, Grid, Header, Message, Segment } from 'semantic-ui-react'
import { Auth, Logger } from 'aws-amplify';
import { AuthPiece } from 'aws-amplify-react';
const logger = new Logger('ConfirmRegisterForm');
class ConfirmRegisterForm extends AuthPiece {
constructor(props) {
super(props);
this.confirm = this.confirm.bind(this);
this.resend = this.resend.bind(this);
}
confirm() {
const username = this.usernameFromAuthData() || this.inputs.username;
const { code } = this.inputs;
logger.debug('username: ' + username);
Auth.confirmSignUp(username, code)
.then(data => this.changeState('signIn', data))
.catch(err => this.error(err));
}
resend() {
const { username } = this.inputs;
logger.debug('username: ' + username);
Auth.resendSignUp(username)
.then(() => logger.debug('code resent'))
.catch(err => this.error(err));
}
render() {
const { authState } = this.props;
if ('confirmSignUp' !== authState) { return null; }
const username = this.usernameFromAuthData();
return (
<div className='login-form'>
{/*
Heads up! The styles below are necessary for the correct render of this example.
You can do same with CSS, the main idea is that all the elements up to the `Grid`
below must have a height of 100%.
*/}
<style>{`
body > div,
body > div > div,
body > div > div > div.login-form {
height: 100%;
}
`}</style>
<Grid
textAlign='center'
style={{ height: '100%' }}
verticalAlign='middle'
>
<Grid.Column style={{ maxWidth: 450 }}>
<Header as='h2' color='teal' textAlign='center'>
{' '}Confirm your registration
</Header>
<Form size='large'>
<Segment>
{username? <Form.Input
fluid
icon='user'
iconPosition='left'
placeholder='Username'
name="username"
onChange={this.handleInputChange}
/>
: <Form.Input
fluid
icon='user'
iconPosition='left'
placeholder='Username'
value={username}
readOnly
/>
}
<Form.Input
fluid
icon='puzzle'
iconPosition='left'
placeholder='Code'
name="code"
onChange={this.handleInputChange}
/>
<Button.Group>
<Button
color='teal'
size='large'
onClick={this.confirm}
>Confirm</Button>
<Button.Or />
<Button
color='teal'
size='large'
onClick={this.resend}
>Resend</Button>
</Button.Group>
</Segment>
</Form>
<Message>
Back to <a onClick={() => this.changeState('signIn')}>Sign In</a>
</Message>
</Grid.Column>
</Grid>
</div>
)
}
}
export default ConfirmRegisterForm