SHARE
TWEET

Untitled

a guest Jan 28th, 2020 104 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { login } from '../../util/APIUtils';
  3. import './Login.css';
  4. import { Link } from 'react-router-dom';
  5. import { ACCESS_TOKEN } from '../../constants';
  6.  
  7. import { Form, Input, Button, Icon, notification } from 'antd';
  8. const FormItem = Form.Item;
  9.  
  10. class Login extends Component {
  11.     render() {
  12.         const AntWrappedLoginForm = Form.create()(LoginForm)
  13.         return (
  14.             <div className="login-container">
  15.                 <h1 className="page-title">Login</h1>
  16.                 <div className="login-content">
  17.                     <AntWrappedLoginForm onLogin={this.props.onLogin} />
  18.                 </div>
  19.             </div>
  20.         );
  21.     }
  22. }
  23.  
  24. class LoginForm extends Component {
  25.     constructor(props) {
  26.         super(props);
  27.         this.handleSubmit = this.handleSubmit.bind(this);
  28.     }
  29.  
  30.     handleSubmit(event) {
  31.         event.preventDefault();
  32.         this.props.form.validateFields((err, values) => {
  33.  
  34.                 if (!err) {
  35.  
  36.                 const loginRequest = Object.assign({}, values);
  37.                 login(loginRequest)
  38.                 .then(response => {
  39.                     localStorage.setItem(ACCESS_TOKEN, response.accessToken);
  40.                     this.props.onLogin();
  41.                 }).catch(error => {
  42.                     if(error.status === 401) {
  43.                         notification.error({
  44.                             message: 'Demo Drop',
  45.                             description: 'Uw e-mailadres of wachtwoord is onjuist. Probeer het opnieuw!'
  46.                         });
  47.                     } else {
  48.                         notification.error({
  49.                             message: 'Demo Drop',
  50.                             description: error.message || 'Sorry! Er is iets misgegaan. Probeer het opnieuw!'
  51.                         });
  52.                     }
  53.                 });
  54.             }
  55.         });
  56.     }
  57.  
  58.     render() {
  59.         const { getFieldDecorator } = this.props.form;
  60.         return (
  61.             <Form onSubmit={this.handleSubmit} className="login-form">
  62.                 <FormItem>
  63.  
  64.                     {getFieldDecorator('usernameOrEmail', {
  65.                         rules: [{ required: true, message: 'Voer je email adres in!' }],
  66.                     })(
  67.                         <Input
  68.                             prefix={<Icon type="user" />}
  69.                             size="large"
  70.                             name="usernameOrEmail"
  71.                             placeholder="Gebruikersnaam of Email" />
  72.  
  73.                     )}
  74.                 </FormItem>
  75.                 <FormItem>
  76.                 {getFieldDecorator('password', {
  77.                     rules: [{ required: true, message: 'Voer je wachtwoord in.' }],
  78.                 })(
  79.                     <Input
  80.                         prefix={<Icon type="lock" />}
  81.                         size="large"
  82.                         name="password"
  83.                         type="password"
  84.                         placeholder="Wachtwoord"  />
  85.                 )}
  86.                 </FormItem>
  87.                 <FormItem>
  88.                     <Button type="primary" htmlType="submit" size="large" className="login-form-button">Login</Button>
  89.                     Of <Link to="/signup">registreer nu!</Link>
  90.                 </FormItem>
  91.             </Form>
  92.         );
  93.     }
  94. }
  95.  
  96.  
  97. export default Login;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top