SHARE
TWEET

Untitled

a guest Nov 21st, 2019 184 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import styled from "styled-components";
  3. import { withRouter } from "react-router-dom";
  4. import { errorMessage } from "../../actions";
  5. import { connect } from "react-redux";
  6. import { compose } from "redux";
  7. import axios from "axios";
  8. import PropTypes from "prop-types";
  9. import { Formik } from "formik";
  10. import Input from "../../components/Input/Input";
  11. import Title from "../../components/Title/Title";
  12. import Button from "../../components/Button/Button";
  13. import Link from "../../components/Link/Link";
  14. import InputWrapper from "../../components/Input/InputWrapper";
  15. import inputsConfig from "./assets/data";
  16. import loginFormSchema from "./assets/validationSchema";
  17. import viewGtm from "../../helpers/gtm";
  18.  
  19.  
  20. const LogInWrapper = styled.div`
  21.   width: 100%;
  22.   max-width: 400px;
  23.   margin-top: 40px;
  24. `;
  25.  
  26. const LinkWrapper = styled.div`
  27.   margin-top: 10px;
  28.   margin-bottom: 20px;
  29.   text-align: right;
  30. `;
  31.  
  32. const FormWrapper = styled.form`
  33.   margin-top: 68px;
  34. `;
  35. const stepNumber = '2';
  36.  
  37. class LogIn extends React.Component {
  38.   constructor(props) {
  39.     super(props);
  40.   }
  41.  
  42.   logInUser = async ({ loginEmail, loginPassword }) => {
  43.     window.mainSpinner(true);
  44.     const formKey = document.getElementById("form-key").value;
  45.     const url = "/subscription/api_customer/loginCustomer";
  46.     const data = {
  47.       username: loginEmail,
  48.       password: loginPassword
  49.     };
  50.  
  51.     try {
  52.       const res = await axios({
  53.         method: "post",
  54.         headers: { "X-Requested-With": "XMLHttpRequest" },
  55.         params: {
  56.           form_key: formKey
  57.         },
  58.         url,
  59.         data
  60.       });
  61.       window.mainSpinner(false);
  62.  
  63.       if (res.data && res.data.token) {
  64.         document.getElementById("form-key").value = res.data.token;
  65.       }
  66.  
  67.       return res.data;
  68.     } catch (err) {
  69.       console.log(err);
  70.       window.mainSpinner(false);
  71.       return err;
  72.     }
  73.   };
  74.  
  75.   render() {
  76.     const { history, userLogged, userFormKey, errorMessage, products } = this.props;
  77.  
  78.     return (
  79.       <LogInWrapper>
  80.         <Title text="Ich habe bereits ein Kundenkonto" />
  81.         <Formik
  82.           validateOnChange={false}
  83.           validateOnBlur={false}
  84.           onSubmit={async (values, { setSubmitting }) => {
  85.             setSubmitting(false);
  86.             const data = await this.logInUser(values);
  87.  
  88.             if (data.status === "ok") {
  89.               const formKey = document.getElementById("form-key").value;
  90.               userLogged(true);
  91.               userFormKey(formKey);
  92.               errorMessage("");
  93.               history.push("/subscription/cart/checkout/address");
  94.             } else {
  95.               errorMessage(data.message);
  96.             }
  97.           }}
  98.           initialValues={{ loginEmail: "", loginPassword: "" }}
  99.           validationSchema={loginFormSchema}
  100.         >
  101.           {({ values, errors, handleChange, handleSubmit, isSubmitting, handleBlur }) => (
  102.             <FormWrapper onSubmit={handleSubmit}>
  103.               {inputsConfig.map(input => (
  104.                 <InputWrapper key={input.id}>
  105.                   <Input
  106.                     id={input.id}
  107.                     type={input.type}
  108.                     label={input.label}
  109.                     value={values[input.id]}
  110.                     error={errors[input.id]}
  111.                     handleChange={handleChange}
  112.                     handleBlur={handleBlur}
  113.                   />
  114.                 </InputWrapper>
  115.               ))}
  116.               <LinkWrapper>
  117.                 <Link url="/customer/account/forgotpassword/">Passwort vergessen?</Link>
  118.               </LinkWrapper>
  119.  
  120.                 <Button type="submit" onClick={viewGtm.bind(this,products,stepNumber)} disabled={isSubmitting} action={() => console.log(currency)}>
  121.                 Anmelden
  122.               </Button>
  123.             </FormWrapper>
  124.           )}
  125.         </Formik>
  126.       </LogInWrapper>
  127.     );
  128.   }
  129. }
  130.  
  131. LogIn.propTypes = {
  132.   userLogged: PropTypes.func.isRequired,
  133.   userFormKey: PropTypes.func.isRequired
  134. };
  135.  
  136. const mapStateToProps = (state) => {
  137.   return {
  138.     products: state.products
  139.   }
  140. };
  141.  
  142. const mapDispatchToProps = { errorMessage };
  143.  
  144. export default compose(
  145.   withRouter,
  146.   connect(
  147.     mapStateToProps,
  148.     mapDispatchToProps
  149.   )
  150. )(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