client/src/components/Login.js
changeset 143 cfcbf4bc66f1
parent 134 be36eed5e6e0
child 151 57d63a248f0d
--- 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>
     );
   }