Fakultas Ilmu Komputer UI

Login.jsx 3.92 KB
Newer Older
1
import React from 'react';
2
import { Grid, Segment, Button, Header, Icon, Modal, Form, Input, TextArea, Card} from 'semantic-ui-react';
3
import LoginForm from './components/LoginForm';
4
5

export default class Login extends React.Component {
6
7
8
9
10
11
12
13
14
15
16
17
18

  static defaultProps = {
    children: null,
  };

  static propTypes = {
    children: React.PropTypes.oneOfType([
      React.PropTypes.arrayOf(React.PropTypes.node),
      React.PropTypes.node,
    ]),
  };

  render = () => (
19
20

    <div className="halamanLogin">
21
22
23
    <Grid columns={2} relaxed>
      <Grid.Column>
        <Segment basic>
24
          <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
25
          {this.props.children}
26
27
28
29
30
31
32
33
34
35
36
37
38

        </Segment >

          <div className="register">
            <Card>
                <Card.Content>
                    <Card.Header>
                      New to us ?
                    </Card.Header>
                 <RegisterModal />
                </Card.Content>
             </Card>
          </div>
39

40
41
42
43
      </Grid.Column>

      <Grid.Column>
        <Segment basic>
44
          <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
45
46
47
48
49
          {this.props.children}
        </Segment>
      </Grid.Column>

    </Grid>
50
    </div>
51
  )
52
53
}

54
const RegisterModal = () => (
55
56
  <Modal trigger={<Button primary floated="right">Register Here!</Button>} closeIcon='close'>
    <Header icon='archive' content='Register for More Benefits' />
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
    <Modal.Content>

         <Form>
                     <Header as='h2' icon textAlign='center'>
                      <Icon name='signup' circular />
                      <Header.Content>
                        Register
                      </Header.Content>
                    </Header>
                    <Form.Field required>
                      <label>Email</label>
                      <Input  type="text" id="email" icon='user' iconPosition='left' placeholder="email" required />
                    </Form.Field>
                    <Form.Field required>
                      <label>Password</label>
                      <Input type='password' id="password"  icon='key' iconPosition='left' placeholder="password"  required />
                    </Form.Field>
                    <Form.Field required>
                      <label>Konfirmasi Password</label>
                      <Input type='password' icon="key" iconPosition="left" placeholder='password'  required />
                    </Form.Field>

                    <Form.Field required>
                      <label>Nama Perusahaan</label>
                      <Input placeholder='Nama Perusahaan' required />
                    </Form.Field>
                     <Form.Field required>
                      <label>Logo</label>
                     <Input
                        icon={{ name: 'attach', circular: true, link: true }}
                        placeholder='attach logo'
                        required
                        type="File"
                      />
                    </Form.Field>
                    <Form.Field required>
                      <label>Deskripsi</label>
                       <TextArea placeholder='Tell us more'  required/>
                    </Form.Field>
                     <Form.Field required>
                      <label>Alamat</label>
                      <Input placeholder='Alamat' required />
                    </Form.Field>
                     <Form.Field required>
                      <label>Kota</label>
                      <Input placeholder='Kota' required />
                    </Form.Field>
                     <Form.Field required>
                      <label>Provinsi</label>
                      <Input placeholder='Provinsi' required />
                    </Form.Field >

109
                         <Button type='submit' floated='right' color='blue'>Submit</Button>
110
                 </Form>
111

112
113
    </Modal.Content>
    <Modal.Actions>
114

115
116
117
    </Modal.Actions>
  </Modal>
)