Fakultas Ilmu Komputer UI

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

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

  static defaultProps = {
    children: null,
  };

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

  render = () => (
20
21

    <div className="halamanLogin">
22
23
24
25
26
27
28
29
30
31
      <div className="headerLogin">
        <Header as='h2' icon textAlign='center' >
          <Image src='/assets/img/logo.png' size='medium' centered />
          <Header.Content >
            Kanal Akses Pendaftaran KP Elektronik
          </Header.Content>
         </Header>
      </div>

      <Grid  stackable columns={2} relaxed>
32
33
34
35
36
        <Grid.Column>
          <Segment basic>
            <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
            {this.props.children}
          </Segment >
37

38
          <div className="register">
39
            <Card centered className="register" >
40
              <Card.Content>
41
42
43
44
45
46
47
48
                <Grid columns={2} relaxed>
                  <Grid.Column>
                    <Header as="h3">New to us ?</Header>
                  </Grid.Column>
                  <Grid.Column>
                   <RegisterModal />
                  </Grid.Column>
                </Grid>
49
50
              </Card.Content>
            </Card>
51
          </div>
52

53
        </Grid.Column>
54

55
56
57
58
59
60
        <Grid.Column>
          <Segment basic>
            <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
            {this.props.children}
          </Segment>
        </Grid.Column>
61

62
      </Grid>
63
    </div>
64
  )
65
66
}