Fakultas Ilmu Komputer UI

Login.jsx 1.79 KB
Newer Older
1
import React from 'react';
2
import { Grid, Segment, Header, Card, Image } from 'semantic-ui-react';
3
import LoginForm from './components/LoginForm';
4
import CompanyRegisterModal from './components/CompanyRegisterModal';
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
    <div className="halamanLogin">
21
      <div className="headerLogin">
22
23
        <Header as="h2" icon textAlign="center" >
          <Image src="/assets/img/logo.png" size="medium" centered />
24
25
26
          <Header.Content >
            Kanal Akses Pendaftaran KP Elektronik
          </Header.Content>
27
        </Header>
28
29
      </div>

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

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

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