--- a/client/src/components/Login.js Wed Jul 18 17:32:09 2018 +0200
+++ b/client/src/components/Login.js Tue Aug 14 20:34:50 2018 +0200
@@ -1,8 +1,8 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button, Alert, HelpBlock } from 'react-bootstrap';
import '../App.css';
+import './Login.css';
import Navbar from './Navbar';
import * as authActions from '../actions/authActions';
@@ -44,7 +44,7 @@
renderErrorMessage(errorMessages, fieldname) {
if (errorMessages && errorMessages.has(fieldname)) {
return errorMessages.get(fieldname).map((message, key) =>
- <HelpBlock key={ key }>{ message }</HelpBlock>
+ <p className="help-block" key={ key }>{ message }</p>
);
}
}
@@ -53,51 +53,50 @@
if (errorMessages && errorMessages.has('non_field_errors')) {
const errors = errorMessages.get('non_field_errors');
return (
- <Alert bsStyle="danger">
+ <div class="alert alert-danger" role="alert">
{ errors.map((message, key) =>
<p key={ key }>{ message }</p>
) }
- </Alert>
+ </div>
)
}
}
render() {
- const panelHeader = (
- <h4 className="text-uppercase text-center">Login</h4>
- )
-
const errorMessages = this.props.login.get('errorMessages');
return (
<div>
<Navbar history={this.props.history} />
- <Grid fluid>
- <Row>
- <Col md={6} mdOffset={3}>
- <Panel header={ panelHeader } className="panel-login">
- <form onSubmit={this.submit}>
- <FormGroup validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
- <ControlLabel>Username</ControlLabel>
- <FormControl componentClass="input" type="text" onChange={this.handleInputChange} name="username" />
- { this.renderErrorMessage(errorMessages, 'username') }
- </FormGroup>
- <FormGroup validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
- <ControlLabel>Password</ControlLabel>
- <FormControl componentClass="input" type="password" onChange={this.handleInputChange} name="password" />
- { this.renderErrorMessage(errorMessages, 'password') }
- </FormGroup>
- { this.renderNonFieldErrors(errorMessages) }
- <Button type="submit" block bsStyle="primary" onClick={this.login}>Login</Button>
- </form>
- </Panel>
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-6 col-md-offset-3">
+ <div className="panel-login panel panel-default">
+ <div className="panel-heading">
+ <h4 className="text-center panel-title">IRI Notes</h4>
+ <form onSubmit={this.submit}>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('username') ? 'error' : null }>
+ <label className="control-label">Nom d'utilisateur</label>
+ <input className="form-control" type="text" onChange={this.handleInputChange} name="username" />
+ { this.renderErrorMessage(errorMessages, 'username') }
+ </div>
+ <div className="form-group" validationState={ errorMessages && errorMessages.has('password') ? 'error' : null }>
+ <label className="control-label">Mot de passe</label>
+ <input className="form-control" type="password" onChange={this.handleInputChange} name="password" />
+ { this.renderErrorMessage(errorMessages, 'password') }
+ </div>
+ { this.renderNonFieldErrors(errorMessages) }
+ <button type="submit" className="btn btn-primary btn-lg">Se connecter</button>
+ </form>
+ </div>
+ </div>
<p className="text-center">
- <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Not registered yet? Create an account.</a>
+ <a className="text-muted" href="/register" onClick={ this.onClickRegister }>Pas encore inscrit ? Créer un compte.</a>
</p>
- </Col>
- </Row>
- </Grid>
+ </div>
+ </div>
+ </div>
</div>
);
}