Fakultas Ilmu Komputer UI

Commit ed86e5a1 authored by sirinbaisa's avatar sirinbaisa
Browse files

tampilan login dan lowongan #9 page login dan lowongan

parent 8bd3b122
......@@ -7,3 +7,75 @@ html, body{
.center{
text-align: center;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: #eee;
margin: 0;
padding: 0;
}
.tabs {
margin-top: 100px;
margin-left: 150px;
margin-right: 150px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 3px;
}
.tabs__labels {
margin: 0;
padding: 0;
}
.tabs__labels li {
display: inline-block;
}
.tabs__labels li a {
padding: 8px 12px;
display: block;
color: #444;
text-decoration: none;
border-bottom: 2px solid #f5f5f5;
}
.tabs__labels li a.active {
border-bottom-color: #337ab7;
}
.tabs__content {
padding: 25px;
}
.formLogin{
margin: 0 auto;
margin-top: 100px;
width: 430px;
}
.formLogin span{
font-size: 30px;
}
.formLogin span{
margin-left: 10px;
}
.input{
margin-top: 5px;
}
.daftar{
float: right;
margin-top:10px;
}
.coverLetter{
margin-top:15px;
}
.linkCV{
float: right;
margin-top: 10px;
}
\ No newline at end of file
import React from "react";
import React, { Component } from "react";
import {Menu, Segment, Image} from "semantic-ui-react";
import {Link} from "react-router";
import {Link,Button, Header, Icon, Modal} from "react-router";
import Server from "./lib/server";
export class TopMenu extends React.Component {
......@@ -11,11 +11,11 @@ export class TopMenu extends React.Component {
<Menu pointing secondary>
<Image as='a' size='small' src='/assets/img/logo.png' href='/'/>
<Menu.Menu position='right'>
<Menu.Item as={Link} to="/" name='home' />
<Menu.Item as={Link} to="/home" name='home' />
<Menu.Item as={Link} to="/profile" name='profil' />
{Server.isLoggedIn() ?
<Menu.Item as={Link} href="/api/api-auth/logout/?next=/" name='logout' /> :
<Menu.Item as={Link} href="/api/api-auth/login/?next=/" name='login' />
<Menu.Item as={Link} to="/login" name='login' />
}
</Menu.Menu>
</Menu>
......
import React from "react";
import Dashboard from "./dashboard";
import Login from './login';
import ReactDOM from "react-dom";
import {Router, Route, browserHistory} from "react-router";
import {Segment, Modal, Button, Icon, Image} from "semantic-ui-react";
import {Segment, Modal, Button, Icon,Input,Menu,Image as ImageComponent, Item , Header,Grid, Divider,TextArea, Form } from "semantic-ui-react";
import Server from "./lib/server"
export const Profile = () => (
......@@ -48,14 +50,261 @@ class Greeting extends React.Component {
}
}
var Tabs = React.createClass({
displayName: 'Tabs',
propTypes: {
selected: React.PropTypes.number,
children: React.PropTypes.oneOfType([
React.PropTypes.array,
React.PropTypes.element
]).isRequired
},
getDefaultProps: function () {
return {
selected: 0
};
},
getInitialState: function () {
return {
selected: this.props.selected
};
},
shouldComponentUpdate(nextProps, nextState) {
return this.props !== nextProps || this.state !== nextState;
},
handleClick: function (index, event) {
event.preventDefault();
this.setState({
selected: index
});
},
_renderTitles: function () {
function labels(child, index) {
var activeClass = (this.state.selected === index ? 'active' : '');
return (
<li key={index}>
<a href="#"
className={activeClass}
onClick={this.handleClick.bind(this, index)}>
{child.props.label}
</a>
</li>
);
}
return (
<ul className="tabs__labels">
{this.props.children.map(labels.bind(this))}
</ul>
);
},
_renderContent: function () {
return (
<div className="tabs__content">
{this.props.children[this.state.selected]}
</div>
);
},
render: function () {
return (
<div className="tabs">
{this._renderTitles()}
{this._renderContent()}
</div>
);
}
});
var Pane = React.createClass({
displayName: 'Pane',
propTypes: {
label: React.PropTypes.string.isRequired,
children: React.PropTypes.element.isRequired
},
render: function () {
return (
<div>
{this.props.children}
</div>
);
}
});
export const Home = () => (
<div>
<Tabs selected={0}>
<Pane label="Semua Lowongan">
<ItemExampleFloated/>
</Pane>
<Pane label="Lamaran saya">
<div>This is my tab 2 contents!</div>
</Pane>
</Tabs>
</div>
);
export const App = () => (
<Router history={browserHistory}>
<Route path="/login" component={Login} />
<Route component={Dashboard}>
<Route path="/" component={Greeting} />
<Route path="profile" component={Profile} />
<Route path="home" component={Home} />
<Route path="users" component={Profile} />
</Route>
</Router>
);
const paragraph = <ImageComponent src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />;
export class ItemExampleFloated extends React.Component {
render() {
return (
<Item.Group relaxed>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 1</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 2</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
<Item>
<Item.Image size='small' src='http://semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header>Lowongan 3</Item.Header>
<Item.Description>{paragraph}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalExampleMultiple />
</div>
</Item.Extra>
</Item.Content>
</Item>
</Item.Group>
)
}
}
export class NestedModal extends React.Component {
state = { open: false }
open = () => this.setState({ open: true })
close = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size='small'
trigger={<Button > Proceed <Icon name='right chevron' /></Button>}
>
<Modal.Header>Pendaftaran</Modal.Header>
<Modal.Content>
<p>Terima kasih sudah mendaftar!</p>
</Modal.Content>
<Modal.Actions>
<Button icon='check' content='All Done' onClick={this.props.onChangeValue} />
</Modal.Actions>
</Modal>
)
}
}
export class ModalExampleMultiple extends React.Component {
state = { modalOpen: false }
handleOpen = (e) => this.setState({
modalOpen: true,
})
handleClose = (e) => this.setState({
modalOpen: false,
})
render() {
return (
<Modal
trigger={<Button onClick={this.handleOpen} >Daftar</Button>}
closeIcon='close'
open={this.state.modalOpen}
onClose={this.handleClose}
>
<Modal.Header>Pendaftaran Lowongan</Modal.Header>
<Modal.Content image>
<div className='image'>
<Icon name='right arrow' />
</div>
<Modal.Description>
<Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
{paragraph}
<div className='linkCV'>
<a> your latest CV </a>
</div>
<div className='coverLetter'>
<h5> Write your Cover Letter </h5>
<TextAreaExample />
</div>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<NestedModal onChangeValue={ this.handleClose } />
</Modal.Actions>
</Modal>
)
}
}
export const TextAreaExample = () => (
<Form>
<TextArea placeholder='Tell us more' />
</Form>
);
ReactDOM.render( <App />, document.getElementById('react-app'));
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>
)
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment