{"version":3,"sources":["pages/Login/Login.js"],"names":["checkout","Login","props","doLogin","setState","isLoading","setTimeout","state","username","toLowerCase","password","history","push","pathname","valid","toast","error","headerRef","React","createRef","login","id_user","replace","lang","undefined","showpassword","querystring","URLSearchParams","location","search","get","length","position","autoClose","hideProgressBar","newestOnTop","closeOnClick","rtl","pauseOnFocusLoss","draggable","pauseOnHover","theme","full","Consumer","size","className","fill","flex","toastContainer","background","ref","page","justify","align","margin","bottom","level","direction","gap","color","href","placeholder","value","onChange","e","target","type","reverse","primary","top","label","onClick","Component","connect","ownProps","loginData","langData","dispatch","saveLogin","fetchUser","userdata"],"mappings":"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","file":"static/js/32.6169b819.chunk.js","sourcesContent":["import React, {Fragment, Component} from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nimport styled from 'styled-components';\r\n\r\nimport { theme, ShowLoader, MainHeader, MainFooter } from \"../../components\";\r\n\r\nimport { saveLogin } from \"../../redux/actions/loginActions\";\r\nimport { fetchUser } from \"../../redux/actions/userActions\";\r\n\r\nimport {\r\n  Grommet,\r\n  Box,\r\n  Header,\r\n  Sidebar,\r\n  Footer,\r\n  Heading,\r\n  Paragraph,\r\n  Text,\r\n  Anchor, \r\n  Button, \r\n  CheckBox,\r\n  Form,\r\n  FormField,\r\n  TextInput,\r\n  RadioButtonGroup,\r\n  RangeInput,\r\n  Select,\r\n  TextArea,\r\n  Collapsible,\r\n  Nav,\r\n  Carousel,\r\n  Card,\r\n  CardBody,\r\n  CardFooter,\r\n  CardHeader,\r\n  Image,\r\n  Icons,\r\n  Grid,\r\n  Tabs,\r\n  Tab,\r\n  DataTable,\r\n  Avatar,\r\n  Layer,\r\n  Stack,\r\n  Drop,\r\n  DropButton,\r\n  ResponsiveContext, \r\n} from 'grommet';\r\nimport { Menu, FormClose, Notification, User, Cart, Mail, Contact, StatusGoodSmall, FormSearch, FormAdd, FormSubtract, Trash, Shop, FormView, FormViewHide } from 'grommet-icons';\r\n\r\nimport { Config } from '../../Config';\r\nimport { apiconn } from '../../apiconn'; //axios connectors are here\r\n\r\nimport { ToastContainer, toast } from 'react-toastify';\r\nimport 'react-toastify/dist/ReactToastify.css';\r\n\r\nvar checkout = \"no\";\r\n\r\nclass Login extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.headerRef = React.createRef();\r\n    \r\n    if(this.props.login.id_user > 0)\r\n      this.props.history.replace('/my-account');\r\n    \r\n    let lang = \"id\";\r\n    if(this.props.lang !== undefined && this.props.lang.lang !== undefined && this.props.lang.lang == \"id\" || this.props.lang.lang == \"en\"){\r\n      lang = this.props.lang.lang;\r\n    }\r\n    \r\n    this.state = {\r\n      lang: lang,\r\n      username: \"\",\r\n      password: \"\",\r\n      showpassword: \"password\",\r\n    }\r\n    \r\n    let querystring = new URLSearchParams(this.props.location.search);\r\n    if(querystring.get(\"checkout\") !== null){\r\n      if(querystring.get(\"checkout\").length > 0)\r\n        checkout = querystring.get(\"checkout\");\r\n    }\r\n  }\r\n  \r\n  toastContainer(){\r\n    return (\r\n      <ToastContainer\r\n      position=\"top-center\"\r\n      autoClose={3000}\r\n      hideProgressBar={true}\r\n      newestOnTop={false}\r\n      closeOnClick\r\n      rtl={false}\r\n      pauseOnFocusLoss\r\n      draggable\r\n      pauseOnHover\r\n      />\r\n    )\r\n  }\r\n  \r\n  componentDidMount(){\r\n      \r\n  }\r\n  \r\n  \r\n  doLogin = () => {\r\n    this.setState({isLoading: true});\r\n    \r\n    setTimeout(() => {\r\n      if(this.state.username.toLowerCase() == \"upspace\" && this.state.password == \"ottooana\"){\r\n        this.props.history.push({\r\n          pathname: '/signup',\r\n          state: { valid: \"valid\" }\r\n        })\r\n      } else {\r\n        toast.error(\"Invalid Username & Password\");\r\n        this.setState({isLoading: false});\r\n      }\r\n    }, 500);\r\n  }\r\n  \r\nrender(){\r\n    return (\r\n      <Grommet theme={theme} full>\r\n        <ResponsiveContext.Consumer>\r\n            {size => (\r\n              <Box className=\"main-wrapper\" fill={true} flex=\"{true}\">\r\n              { this.toastContainer() }\r\n              \r\n              {this.state.isLoading && <ShowLoader /> }\r\n              \r\n              <Box className=\"page-stack login\" background=\"url('bg-login.jpg')\" flex=\"grow\" fill=\"horizontal\">\r\n\r\n                <MainHeader ref={this.headerRef} history={this.props.history} size={size} page=\"login\" />\r\n\r\n                <Box justify=\"center\" align=\"center\" flex=\"grow\">\r\n                  <Box className=\"login-form forms wrapper form-style\" flex={false}>\r\n                    <Box align=\"center\" margin={{bottom: \"30px\"}}>\r\n                      <Heading level=\"2\">Login</Heading>\r\n                    </Box>\r\n                    {checkout == \"yes\" && \r\n                      <Box className=\"signup-link\" direction={size !== 'small' ? \"row\" : \"column\"} align=\"center\" justify=\"center\" gap=\"small\" margin={{bottom:\"15px\"}}>\r\n                        <Text color=\"red\">Please login or <Anchor href={\"/signup\" + (checkout == \"yes\" ? \"?checkout=yes\" : \"\")}>sign up</Anchor> to continue the checkout process</Text>\r\n                      </Box>\r\n                    }\r\n                    <Form>\r\n                      <FormField>\r\n                        <Text className=\"form-style-label\">Username</Text>\r\n                        <TextInput placeholder=\"Enter your username\"  value={this.state.username} onChange={(e) => { this.setState({username: e.target.value}); }} />\r\n                      </FormField>\r\n                      <Box margin={{bottom:\"10px\"}}>\r\n                        <Text className=\"form-style-label\">Password</Text>\r\n                        <Box direction=\"row\">\r\n                          <TextInput placeholder=\"Enter your password\" type={this.state.showpassword} reverse={true} align=\"center\" value={this.state.password} onChange={(e) => { this.setState({password: e.target.value}); }} />\r\n                        </Box>\r\n                      </Box>\r\n                      \r\n                      <Button primary className=\"button\" margin={{top: \"small\"}} label={this.state.lang == \"en\" ? \"Sign In\" : \"Masuk\"} onClick={() => this.doLogin()} fill=\"horizontal\" />\r\n                    </Form>\r\n                    \r\n                  </Box>\r\n                </Box>\r\n              </Box>\r\n\r\n              <MainFooter size={size} />\r\n              \r\n            </Box>\r\n            )}\r\n          </ResponsiveContext.Consumer>\r\n      </Grommet>\r\n    );\r\n  }\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => {\r\n  return {\r\n    login: state.loginData,\r\n    lang: state.langData,\r\n  };\r\n};\r\n\r\nconst mapDispatchToProps = dispatch => {\r\n  return {\r\n    saveLogin: id_user => {\r\n      dispatch(saveLogin(id_user));\r\n    },\r\n    fetchUser: userdata => {\r\n      dispatch(fetchUser(userdata));\r\n    },\r\n  };\r\n};\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Login);\r\n"],"sourceRoot":""}