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
<Card>
    <Card.Header>Login</Card.Header>
    <Card.Body>
        <Form>
            <Form.Group controlId='frmEmail'>
                <Form.Label>Email Address</Form.Label>
                <Form.Control type='email' placeholder='Enter email'></Form.Control>
                { mode === 'register' &&
                <Form.Text className='text-muted'>Your e-mail address will <b>NEVER</b> be used without legal agrees.</Form.Text> }
            </Form.Group>
            { mode === 'register' &&
            <Form.Group controlId='frmUsername'>
                <Form.Label>Username</Form.Label>
                <Form.Control type='text' placeholder='Enter Username'></Form.Control>
                <Form.Text className='text-muted'>Username displays on entire service. Please be careful.</Form.Text>
            </Form.Group> }
            <Form.Group controlId='frmPassword'>
                <Form.Label>Password</Form.Label>
                <Form.Control type='password' placeholder='Enter Password'></Form.Control>
                { mode === 'register' &&
                <Form.Text className='text-muted'>Please make your password between 8-16 characters.</Form.Text> }
            </Form.Group>
            { mode === 'login' && <Button variant='outline-primary'>Login</Button> }
            <Button variant='outline-info' onClick={this.handleToggle}>Register</Button>
            { mode === 'register' && <Button variant='outline-secondary' onClick={this.handleToggle}>Back to login</Button>}
        </Form>
    </Card.Body>
</Card>
cs

걍 컴포넌트 하나 더 만들어서 분리해버릴까