Fakultas Ilmu Komputer UI

Login.jsx 1.93 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
import Footer from './components/Footer';
6
7

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

  static defaultProps = {
    children: null,
  };

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

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

31
32
      <Grid stackable={true} columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
        <Grid.Column width="seven">
33
34
35
36
37
38
          <Segment basic>
            <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
            {this.props.children}
          </Segment>
        </Grid.Column>

39
        <Grid.Column width="seven">
40
41
42
43
          <Segment basic>
            <LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
            {this.props.children}
          </Segment >
44

45
          <div className="register">
46
            <Card centered className="register" >
47
              <Card.Content>
48
49
50
51
52
                <Grid columns={2} relaxed>
                  <Grid.Column>
                    <Header as="h3">New to us ?</Header>
                  </Grid.Column>
                  <Grid.Column>
53
                    <CompanyRegisterModal />
54
55
                  </Grid.Column>
                </Grid>
56
57
              </Card.Content>
            </Card>
58
          </div>
59
60
        </Grid.Column>
      </Grid>
61
      <Footer />
62
    </div>
63
  )
64
65
}