Fakultas Ilmu Komputer UI

Commit 4a3f519a authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#140654507] #12 #13 change vacancy stuff component property type to get json,...

[#140654507] #12 #13 change vacancy stuff component property type to get json, improve Login component
parent c04c2533
......@@ -10,6 +10,7 @@
"rules": {
"func-names": ["error", "never"],
"react/prefer-stateless-function": [0, { "ignorePureComponents": true }],
"react/forbid-prop-types": [0],
"import/extensions": ["off", "never"],
"import/no-unresolved": 0,
"no-underscore-dangle" : 0,
......
......@@ -19,14 +19,14 @@ export default class Login extends React.Component {
<Grid columns={2} relaxed>
<Grid.Column>
<Segment basic>
<LoginForm url="/login/company" imgSrc="logo.png" imgSize="small" />
<LoginForm type="company" header="Company Login" imgSrc="logo.png" imgSize="small" />
{this.props.children}
</Segment>
</Grid.Column>
<Grid.Column>
<Segment basic>
<LoginForm url="/login/sso" imgSrc="UI.png" imgSize="tiny" />
<LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
{this.props.children}
</Segment>
</Grid.Column>
......
......@@ -2,7 +2,7 @@
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import VacancyList from '../../components/VacancyList';
import ModalPendaftaran from '../../components/ModalPendaftaran';
import Lowongan from '../../components/Lowongan';
describe('VacancyList', () => {
it('created without problem', () => {
......@@ -12,11 +12,11 @@ describe('VacancyList', () => {
it('renders without problem', () => {
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList header="header" content="content" buttonTitle="submit" />);
<VacancyList vacancies={[{ key: 'value' }, { key2: 'value2' }]} />);
expect(vacancyList).to.exist;
React.Children.forEach(vacancyList.props.children, (child) => {
expect(child).to.be.an.instanceof(ModalPendaftaran);
expect(child).to.be.an.instanceof(Lowongan);
});
});
});
import React from 'react';
import { Form, Input, Button, Image } from 'semantic-ui-react';
import { Form, Input, Button, Message, Image } from 'semantic-ui-react';
import { browserHistory } from 'react-router';
import Server from '../lib/server';
export default class LoginForm extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
imgSrc: React.PropTypes.string,
imgSize: React.PropTypes.string,
header: React.PropTypes.string,
};
static defaultProps = {
imgSrc: '',
imgSize: 'small',
header: 'Login',
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { email: '', password: '' };
this.state = { email: '', password: '', errorFlag: false };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(name, event) {
handleChange(event, name) {
this.setState({ [name]: event.target.value });
}
handleSubmit() {
Server.post(this.props.url, this.state);
handleSubmit(event) {
event.preventDefault();
const data = {
type: this.props.type,
email: this.state.email,
password: this.state.password
}
Server.post('api/login/', data).then(() => {
browserHistory.push('/home');
}, () => {
this.setState({ errorFlag: true });
});
}
render = () => (
<div className="formLogin" >
<Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>Company Login</span>
<Form onSubmit={this.handleSubmit}>
<Form onSubmit={(e) => this.handleSubmit(e)} error={this.state.errorFlag}>
<div className="formHeader">
<Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
</div>
<Form.Group widths="equal">
<Form.Field>
<Form.Field required>
<label htmlFor="id"> Email </label>
<Input type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={this.handleChange.bind(this, 'email')} />
<Input type="text" id="email" icon="user" iconPosition="left" placeholder="email" onChange={(e) => this.handleChange(e, 'email')} required />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
<Form.Field>
<Form.Field required>
<label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={this.handleChange.bind(this, 'password')} />
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={(e) => this.handleChange(e, 'password')} required />
</Form.Field>
</Form.Group>
<Button type="submit" fluid color="blue">Login</Button>
<Message
error
content="Login gagal: email atau password salah."
/>
</Form>
</div>
......
......@@ -21,7 +21,7 @@ export default class Lowongan extends React.Component {
<Item.Description>{this.props.content}</Item.Description>
<Item.Extra>
<div className="daftar">
<ModalPendaftaran content={{ tes: 'dor' }} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
<ModalPendaftaran data={{ tes: 'dor' }} buttonTitle="Daftar" />
</div>
</Item.Extra>
</Item.Content>
......
import React from 'react';
import { Modal, Button, Icon, TextArea, Form } from 'semantic-ui-react';
import ModalAlert from './ModalAlert';
import Server from '../lib/Server';
export default class ModalPendaftaran extends React.Component {
static propTypes = {
header: React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string,
]).isRequired,
content: React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string,
]).isRequired,
buttontTitle: React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string,
]).isRequired,
data: React.PropTypes.object.isRequired,
id: React.PropTypes.number.isRequired,
buttonTitle: React.PropTypes.string.isRequired,
};
state = { modalOpen: false };
static successResponse = 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n';
static failedResponse = 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n';
handleOpen = () => this.setState({
modalOpen: true,
});
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
modalOpen: false,
responseHeader: 'Menghubungkan ke Server',
responseText: 'Terima kasih sudah mendaftar!',
coverLetter: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ coverLetter: event.target.value });
}
handleOpen() {
const data = { coverLetter: this.state.coverLetter };
Server.post(`/students/${this.props.id}/application`, data).then((data) => {
this.setState({
responseHeader: 'Pendaftaran Berhasil',
responseText: this.successResponse + JSON.stringify(data),
});
}, (error) => {
this.setState({
responseHeader: 'Pendaftaran Gagal',
responseText: this.failedResponse + JSON.stringify(error),
});
});
this.setState({ modalOpen: true });
}
handleClose = () => this.setState({
modalOpen: false,
......@@ -31,20 +51,20 @@ export default class ModalPendaftaran extends React.Component {
render = () => (
<Modal
trigger={<Button onClick={this.handleOpen} >{this.props.buttontTitle}</Button>}
trigger={<Button onClick={this.handleOpen} >{this.props.buttonTitle}</Button>}
closeIcon="close"
open={this.state.modalOpen}
onClose={this.handleClose}
>
<Modal.Header>{this.props.header}</Modal.Header>
<Modal.Header>{this.props.data}</Modal.Header>
<Modal.Content image>
<div className="image">
<Icon name="right arrow" />
</div>
<Modal.Description>
<Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
{this.props.content}
{this.props.data}
<div className="linkCV">
<a> your latest CV </a>
......@@ -53,14 +73,18 @@ export default class ModalPendaftaran extends React.Component {
<div className="coverLetter">
<h5> Write your Cover Letter </h5>
<Form>
<TextArea placeholder="Tell us more" />
<TextArea placeholder="Tell us more" onChange={this.handleChange} />
</Form>
</div>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<ModalAlert onChangeValue={this.handleClose} header="Pendaftaran" content="Terima kasih sudah mendaftar!" />
<ModalAlert
onChangeValue={this.handleClose}
header={this.state.responseHeader}
content={this.state.responseText}
/>
</Modal.Actions>
</Modal>
)
......
......@@ -4,22 +4,17 @@ import Lowongan from './Lowongan';
export default class VacancyList extends React.Component {
static propTypes = {
vacancies: React.PropTypes.array
vacancies: React.PropTypes.array.isRequired,
};
static defaultProps = {
vacancies: [],
};
generateVacancies(){
return(
this.props.vacancies.map((vacancyData) =>
<Lowongan data={vacancyData}/>)
generateVacancies() {
return this.props.vacancies.map((vacancy) =>
<Lowongan data={vacancy} />,
);
}
render = () => (
<div className="vscancyList" >{ this.generateVacancies() }
<div className="vacancyList" >{ this.generateVacancies() }
</div>
)
}
\ No newline at end of file
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