Fakultas Ilmu Komputer UI

login.jsx 2.58 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
import React from 'react'
import { Form, Input, Icon, Button, Grid, Segment, Divider, Image,Card } from 'semantic-ui-react'


export  class FormLogin extends React.Component {
    render = () => {
        return (
          <div className="formLogin" >

            <Image src='/assets/img/logo.png' size='small' verticalAlign='middle' /> <span>Company Login</span>

               <Form>
                  <Form.Group widths='equal'>
                    <Form.Field>
                      <label>Email</label>
                      <Input icon='user' iconPosition='left' placeholder='email'/>
                    </Form.Field>
                  </Form.Group>

                  <Form.Group widths='equal'>
                    <Form.Field>
                      <label>Password</label>
                      <Input icon='key' iconPosition='left' placeholder='password' />
                    </Form.Field>
                  </Form.Group>

                  <Button fluid color='blue'>Login</Button>

              </Form>
            </div>
        )
    }
}


export  class SsoLogin extends React.Component {
    render = () => {
        return (
          <div className="formLogin" >

            <Image src='/assets/img/UI.png' size='tiny' verticalAlign='middle' /> <span>  SSO Login</span>

              <div className="input">
                 <Form>
                    <Form.Group widths='equal'>
                      <Form.Field>
                        <label>Email</label>
                        <Input icon='user' iconPosition='left' placeholder='email'/>
                      </Form.Field>
                    </Form.Group>

                    <Form.Group widths='equal'>
                      <Form.Field>
                        <label>Password</label>
                        <Input icon='key' iconPosition='left' placeholder='password' />
                      </Form.Field>
                    </Form.Group>
                    <Button fluid color='blue'  >Login</Button>
                   
                </Form>
              </div>
              
            </div>
        )
    }
}



export default class Login extends React.Component {
    render = () => {
        return (
         <Grid columns={2} relaxed>
          <Grid.Column>
            <Segment basic>
               <FormLogin/>
                {this.props.children}
            </Segment>
          </Grid.Column>
          
           <Grid.Column>
            <Segment basic>
               <SsoLogin/>
                {this.props.children}
            </Segment>
          </Grid.Column>
                  
          </Grid>
        )
    }
}