Fakultas Ilmu Komputer UI

Login.jsx 3.59 KB
Newer Older
1
import React from 'react';
2
import { Grid, Segment, Button, Header, Icon, Modal, Form, Input, TextArea, } 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
26
          {this.props.children}
        </Segment>
27
28
        <RegisterModal/>

29
30
31
32
      </Grid.Column>

      <Grid.Column>
        <Segment basic>
33
          <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
34
35
36
37
38
          {this.props.children}
        </Segment>
      </Grid.Column>

    </Grid>
39
    </div>
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
const RegisterModal = () => (
  <Modal trigger={<Button>Show Modal</Button>} closeIcon='close'>
    <Header icon='archive' content='Archive Old Messages' />
    <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 >

                 </Form>
    </Modal.Content>
    <Modal.Actions>
       <Button type='submit' floated='right' color='blue'>Submit</Button>
    </Modal.Actions>
  </Modal>
)