{"version":3,"file":"static/js/5097.db22c440.chunk.js","mappings":"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","sources":["routers/auth/login/form.js","routers/auth/login/index.js","routers/auth/login/mfaCard.js"],"sourcesContent":["import React from \"react\";\nimport { Form, Input, Icon, Button } from \"antd\";\nimport styled from \"styled-components\";\nimport { appColors } from \"../../../utils/styles/colors\";\n// import { loginEvent } from \"../../../juneAnalytics/juneEvents\";\n// import { useJune } from \"../../../juneAnalytics/juneHooks\";\n// import { AnalyticsBrowser } from '@june-so/analytics-next';\n// import juneEvents from \"../../../juneAnalytics/juneEvents\";\n\nconst themeColor = \"#F6BC1C\";\nconst buttonStyle = {\n  width: \"100%\",\n  color: \"#fff\",\n  fontWeight: \"bold\",\n  textTransform: \"uppercase\",\n  backgroundColor: appColors.purple,\n  borderColor: appColors.purple,\n  marginTop: 5,\n  marginBottom: 5,\n};\nconst inalaStyle={\n  width: \"100%\",\n  color: \"#fff\",\n  fontWeight: \"bold\",\n  textTransform: \"uppercase\",\n  backgroundColor: \"#83c444\",\n  borderColor: \"#83c444\",\n  marginTop: 5,\n  marginBottom: 5,\n}\nconst disabledStyle = {\n  ...buttonStyle,\n  color: \"rgb(166 165 165)\",\n  backgroundColor: \"#dddddd\",\n  borderColor: \"#dddddd\",\n  cursor: \"not-allowed\",\n};\n\nconst ButtonWraper = styled.div`\n    .anticon-loading {\n      font-size: 14px;\n      font-weight: bold;\n      color: #027cff;\n    }\n  }\n`;\n\nclass LoginForm extends React.Component {\n  state = {\n    isHidePassword: true,\n  };\n\n  // handleEvent = (username) => {\n  //   // let analytics = AnalyticsBrowser.load({ writeKey: \"6EMoKeCRrlRUnLXR\" });\n  //   // analytics.identify(\"USER_ID\", { username });\n  //   // analytics.track(\"User_Login\");\n  //   juneEvents.loginEvent(username);\n  // };\n\n  handleSubmit = (e) => {\n    e.preventDefault();\n    this.props.form.validateFields((err, values) => {\n      if (!err) {\n        // alert(JSON.stringify(values));\n        // let { username } = values;\n        // this.handleEvent(username);\n        this.props.onLoginSubmit(values);\n      }\n    });\n  };\n\n  render() {\n    const { getFieldDecorator, isHidePassword } = this.props.form;\n    return (\n      <Form\n        onSubmit={this.handleSubmit}\n        className=\"login-form\"\n        style={{ border: \"0px solid\", width: \"100%\" }}\n      >\n        <Form.Item>\n          {getFieldDecorator(\"username\", {\n            rules: [\n              { required: true, message: \"Please input your email address!\" },\n            ],\n          })(\n            <Input\n              prefix={<Icon type=\"user\" style={{ color: \"rgba(0,0,0,.25)\" }} />}\n              placeholder=\"Email\"\n              disabled={this.props.loading}\n            />\n          )}\n        </Form.Item>\n        <Form.Item>\n          {getFieldDecorator(\"password\", {\n            rules: [{ required: true, message: \"Please input your password!\" }],\n          })(\n            // <Input\n            //   prefix={<Icon type=\"lock\" style={{ color: \"rgba(0,0,0,.25)\" }} />}\n            //   type={isHidePassword ? \"password\" : undefined}\n            //   placeholder=\"Password\"\n            //   disabled={this.props.loading}\n            //   Icon={\"eye\"}\n            // />\n            <Input.Password\n              prefix={<Icon type=\"lock\" style={{ color: \"rgba(0,0,0,.25)\" }} />}\n              placeholder=\"Password\"\n              disabled={this.props.loading}\n            />\n          )}\n        </Form.Item>\n        <Form.Item style={{ top: this.props.windowWidth > 600 ? 0 : 0 }}>\n          <a\n            className=\"login-form-forgot\"\n            style={{\n              float: \"right\",\n              fontWeight: \"bold\",\n              textDecoration: \"underline\",\n              color: \"#aaa\",\n            }}\n            href=\"/\"\n          >\n            Forgot password\n          </a>\n          <ButtonWraper>\n            <Button\n              type=\"primary\"\n              htmlType=\"submit\"\n              className=\"login-form-button\"\n              style={this.props.loading ? disabledStyle : this.props.isInala ? inalaStyle :  buttonStyle}\n              disabled={this.props.loading}\n              loading={this.props.loading}\n            >\n              Login\n            </Button>\n          </ButtonWraper>\n        </Form.Item>\n      </Form>\n    );\n  }\n}\n\nconst WrappedNormalLoginForm = Form.create({ name: \"normal_login\" })(LoginForm);\n\nexport default WrappedNormalLoginForm;\n","import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { withRouter } from \"react-router-dom\";\nimport { Card } from \"antd\";\nimport styled from \"styled-components\";\nimport LoginForm from \"./form\";\nimport MfaCArd from \"./mfaCard\";\n\n// import logo from \"../../../assets/images/logo.png\";\nimport logo from \"../../../assets/images/logo2.png\";\nimport backgroundImage from \"../../../assets/images/imagee.png\";\nimport { login } from \"../../../actions/auth\";\nimport Spin from \"../../../atoms/Loaders\";\nimport imageExporter from \"../../../assets/images/imageExporter\";\nimport svgExporter from \"../../../assets/svgs/svgExporter\";\n\nconst MfaWrapper = styled.div`\n  margin-top: 130px;\n`;\n\nconst {\n  auth: { login: loginBackground },\n  logo: { LogoWithTagline }\n} = imageExporter;\n\nexport class Login extends Component {\n  state = {\n    loggedIn: false,\n    mfaVerification: false,\n    loading: false,\n  };\n\n  submitLogin = ({ username, password }) => {\n    this.setState({\n      loggedIn: true,\n      mfaVerification: true,\n      username,\n      password,\n      loading: true,\n    });\n    this.props.login(username, password);\n  };\n  logIn = (code) => {\n    const { username, password } = this.state;\n    const verificationCode = Object.values(code).join(\"\");\n    this.props.login(username, \"\", \"\", verificationCode);\n  };\n  resendOtp = () => {\n    const { username, password } = this.state;\n    this.props.login(username, password);\n  };\n  render() {\n    const { mfaRequired, mfaType, MFAQRCode } = this.props;\n    // const mfaRequired = true\n    return (\n      <div\n        style={{\n          width: \"100%\",\n          height: \"100vh\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundImage: `url(${loginBackground})`,\n          backgroundSize: \"100% 100%\",\n          backgroundPosition: \"center top\",\n          backgroundRepeat: \"no-repeat\",\n          backgroundAttachment: \"fixed\",\n        }}\n      >\n        <Card\n          bordered={false}\n          style={{\n            width:\n              (mfaRequired && (this.props.windowWidth > 600 ? 550 : \"90%\")) ||\n              (this.props.windowWidth > 600 ? 500 : \"90%\"),\n            height:\n              (mfaRequired && 550) ||\n              (this.props.windowWidth > 600 ? 400 : 350),\n            border: \"0px solid\",\n            // display:'flex',\n            // flexDirection:'column',\n            // alignItems:'center',\n            // margin: \"auto\",\n            // position: \"relative\",\n            // top: 120,\n            padding: 15,\n            borderRadius: this.props.windowWidth > 600 ? 0 : 10,\n            boxShadow:\n              \"0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)\",\n          }}\n        >\n          {this.props.loading && !mfaRequired && <Spin />}\n\n          {!this.props.loading && (\n            <div\n              style={{\n                border: \"0px solid\",\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                alignItems: \"center\",\n              }}\n            >\n              <img\n                src={LogoWithTagline}\n                alt=\"Reon\"\n                style={{\n                  // top: mfaRequired && 90 ||  40,\n                  // left:mfaRequired && 230 || 150,\n                  width: 200,\n                  border: \"0px solid\",\n                  // position: \"absolute\",\n                  // margin: \"0 auto\",\n                  // display: \"block\",\n                }}\n              />\n              {!mfaRequired && !this.props.loading && (\n                <div\n                  style={{\n                    marginTop: 40,\n                    border: \"0px solid\",\n                    width: this.props.windowWidth > 600 ? \"90%\" : \"100%\",\n                  }}\n                >\n                  <LoginForm\n                    windowWidth={this.props.windowWidth}\n                    loading={this.props.loading}\n                    onLoginSubmit={this.submitLogin}\n                  // onLoginSubmit={({username,password})=>this.props.login(username, password)}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n\n          {mfaRequired && (\n            <div style={{ border: \"0px solid\", width: \"100%\", marginTop: 35 }}>\n              <MfaCArd\n                windowWidth={this.props.windowWidth}\n                loading={this.props.loading}\n                onLoginSubmit={this.logIn}\n                resendOtp={this.resendOtp}\n                mfaType={mfaType}\n                MFAQRCode={MFAQRCode}\n              />\n            </div>\n          )}\n        </Card>\n      </div>\n    );\n  }\n}\n\nconst mapStateToProps = ({\n  auth: { loading, mfaRequired, mfaType, MFAQRCode },\n  sites,\n}) => ({\n  loading,\n  mfaRequired,\n  mfaType,\n  MFAQRCode,\n  windowWidth: sites.windowWidth,\n});\nconst mapDispatchToProps = { login };\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));\n","import React, { useRef, useState, useEffect, useMemo } from \"react\";\nimport { Button, Input, Spin } from \"antd\";\nimport { LockFilled } from \"@ant-design/icons\";\nimport styled from \"styled-components\";\nimport _ from \"lodash\";\nimport Countdown from \"antd/lib/statistic/Countdown\";\nimport moment from \"moment\";\nimport ReactCodeInput from \"react-code-input\";\nimport Loaders from \"../../../atoms/Loaders\";\n\nconst InputWrapper = styled.div`\n  display: flex;\n  justifiy-content: center;\n  gap: 15px;\n  align-items: center;\n  .ant-input {\n    margin: 10px;\n    height: 50px;\n    width: 50px;\n    font-size: 35px;\n    color:#f6bc1c;\n    font-weight: bolder\n    &:focus {\n      border-color: #ffff1c;\n    }\n    &:hover {\n      border-color: #ffff1c;\n    }\n  }\n`;\nconst ButtonWrapper = styled(Button)`\n  width: 100%;\n  height:45px\n  top: 70px;\n  border-color: #f6bc1c\n  background: #f6bc1c;\n  color: black;\n  font-size: larger;\n  font-weight: 600;\n`;\n\nconst CountdownWrapper = styled.div`\n  .ant-statistic-content {\n    margin: 0 auto;\n    // margin-top: 80px;\n    width: 60px;\n    height: 60px;\n    background-color: #f6bc1c;\n    text-align: center;\n    border-radius: 100px;\n    .ant-statistic-content-value {\n      padding: 11px;\n      display: inline-block;\n    }\n  }\n`;\n\nexport default (props) => {\n  const { loading,mfaType, MFAQRCode } = props;\n  const [code, setCode] = useState({});\n  const [verify, setVerifying] = useState(\"Verify\");\n  const [countDown, setCountDown] = useState(5);\n\n  const inputOneRef = useRef();\n  const inputTwoRef = useRef();\n  const inputThreeRef = useRef();\n  const inputFourRef = useRef();\n  const inputFiveRef = useRef();\n  const inputSixRef = useRef();\n\n  const deadline = useMemo(() => moment.now() + 1000 * 60, [props]);\n\n  // const InputStyle={\n  //   'font-size': props.windowWidth>600?'30px':'20px',\n  //   'color': '#f6bc1c',\n  //   'font-weight': 'bold',\n  //   'width':props.windowWidth>600?'13%':'15%',\n  //   'height':props.windowWidth>600?55:45,\n  // }\n  const InputStyle = {\n    fontFamily: \"monospace\",\n    margin: props.windowWidth > 600 ? 5 : 3,\n    MozAppearance: \"textfield\",\n    width: props.windowWidth > 600 ? \"65px\" : \"13%\",\n    borderRadius: \"3px\",\n    fontSize: props.windowWidth > 600 ? \"30px\" : \"20px\",\n    height: props.windowWidth > 600 ? \"60px\" : \"45px\",\n    paddingLeft: \"7px\",\n    // backgroundColor: 'black',\n    color: \"#f6bc1c\",\n    border: \"1px solid lightgray\",\n  };\n\n  const prop = {\n    inputStyle: {\n      fontFamily: \"monospace\",\n      margin: \"4px\",\n      // MozAppearance: 'textfield',\n      width: \"55px\",\n      borderRadius: \"3px\",\n      fontSize: \"14px\",\n      height: \"60px\",\n      paddingLeft: \"7px\",\n      // backgroundColor: 'black',\n      color: \"#f6bc1c\",\n      border: \"1px solid black\",\n    },\n  };\n  \n  useEffect(() => {\n    const codeInserted =\n      Object.values(code).filter((digit) => digit).length == 6;\n    // const codeInserted = code.length === 6;\n    if (codeInserted) {\n      // alert(code)\n      setVerifying(\"Verifying\");\n      props.onLoginSubmit(code);\n    }\n  }, [code]);\n\n  if (mfaType == \"googleAuthenticator\") {\n    return (\n      <div\n        style={{\n          width: \"100%\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n        }}\n      >\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n          }}\n        >\n          {MFAQRCode ? (\n            <>\n              <text\n                style={{\n                  color: \"#4b4b4b\",\n                  fontSize: 17,\n                  fontWeight: \"bold\",\n                  marginTop: -20,\n                  marginBottom: 0,\n                }}\n              >\n                Scan QRcode with Google Authenticator to enable MFA\n              </text>\n              <img\n                style={{ width: \"48%\", marginBottom: -30 }}\n                src={`data:image/png;base64,${MFAQRCode}`}\n                alt=\"QR Code\"\n              />\n            </>\n          ) : (\n            <text\n              style={{\n                color: \"#4b4b4b\",\n                fontSize: 18,\n                fontWeight: \"bold\",\n                marginTop: 15,\n                marginBottom: 15,\n                padding: \"0px 10px\",\n              }}\n            >\n              To finish signing in, enter the code from your MFA device below\n            </text>\n          )}\n          <div\n            style={{\n              width: \"100%\",\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              marginBottom:MFAQRCode ? -50 : 0\n            }}\n          >\n            <text\n              style={{\n                color: \"#4b4b4b\",\n                fontSize: 20,\n                fontWeight: \"bold\",\n                marginTop: 30,\n                marginBottom: 10,\n                padding: \"0px 10px\",\n              }}\n            >\n              MFA Code\n            </text>\n            <ReactCodeInput\n              type=\"string\"\n              fields={6}\n              inputStyle={InputStyle}\n              onChange={setCode}\n            />\n          </div>\n\n          {\n            verify === \"Verifying\" && <Loaders style={{margin:'60px 0px 0px 0px', fontSize:50}}/>\n          }\n          {/* <ButtonWrapper\n            disabled={Object.values(code).length !== 6}\n            loading={verify === \"Verifying\"}\n          >\n            {verify}\n          </ButtonWrapper> */}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    \n    <div\n      style={{\n        border: \"0px solid\",\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      {/* {JSON.stringify({ mfaType: mfaType, MFAQRCode: MFAQRCode })} */}\n      {/* <div style={{margin:'0 auto'}}>\n    <LockFilled style={{fontSize:'40px'}}/>\n    </div> */}\n      <div\n        style={{\n          width: \"100%\",\n          border: \"0px solid\",\n          display: \"flex\",\n          justifyContent: \"center\",\n        }}\n      >\n        <ReactCodeInput\n          type=\"string\"\n          fields={6}\n          inputStyle={InputStyle}\n          onChange={setCode}\n        />\n\n        {/*  inputStyle={{InputStyle}} */}\n\n        {/* <Input\n          style={InputStyle}\n          ref={inputOneRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, firstDigit: value }));\n            inputTwoRef.current.focus({\n              cursor: \"start\",\n            });\n          }}\n        />\n        <Input\n          style={InputStyle}\n          ref={inputTwoRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, secondDigit: value }));\n            value\n              ? inputThreeRef.current.focus({\n                  cursor: \"start\",\n                })\n              : inputOneRef.current.focus({\n                  cursor: \"start\",\n                });\n          }}\n        />\n        <Input\n          style={InputStyle}\n          ref={inputThreeRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, thirdDigit: value }));\n            value\n              ? inputFourRef.current.focus({\n                  cursor: \"start\",\n                })\n              : inputTwoRef.current.focus({\n                  cursor: \"start\",\n                });\n          }}\n        />\n        <Input\n          style={InputStyle}\n          ref={inputFourRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, fourthDigit: value }));\n            value\n              ? inputFiveRef.current.focus({\n                  cursor: \"start\",\n                })\n              : inputThreeRef.current.focus({\n                  cursor: \"start\",\n                });\n          }}\n        />\n        <Input\n          style={InputStyle}\n          ref={inputFiveRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, fifthDigit: value }));\n            value\n              ? inputSixRef.current.focus({\n                  cursor: \"start\",\n                })\n              : inputFourRef.current.focus({\n                  cursor: \"start\",\n                });\n          }}\n        />\n        <Input\n          style={InputStyle}\n          ref={inputSixRef}\n          maxLength={1}\n          onChange={({ target: { value } }) => {\n            setCode((prev) => ({ ...prev, sixDigit: value }));\n            !value &&\n              inputFiveRef.current.focus({\n                cursor: \"start\",\n              });\n          }}\n        /> */}\n      </div>\n      <div style={{ marginTop: 20 }}>\n        <strong>\n          <i>Enter Verification code, sent over email</i>{\" \"}\n        </strong>\n      </div>\n      <div\n        style={{\n          textDecoration: \"underline\",\n          cursor: \"pointer\",\n          color: \"#f6bc1c\",\n          marginTop: 10,\n        }}\n      >\n        <strong onClick={props.resendOtp}> Resend code ?</strong>\n      </div>\n      <CountdownWrapper\n        style={{ marginTop: props.windowWidth > 600 ? 50 : 40 }}\n      >\n        <Countdown value={deadline} onFinish={console.log} format={\"ss\"} />\n      </CountdownWrapper>\n\n      <ButtonWrapper\n        disabled={Object.values(code).length !== 6 || !loading}\n        loading={loading}\n      >\n        {loading ? \"Verifying\" :(\"Verify\")}\n      </ButtonWrapper>\n    </div>\n  );\n};\n"],"names":["buttonStyle","width","color","fontWeight","textTransform","backgroundColor","appColors","purple","borderColor","marginTop","marginBottom","inalaStyle","disabledStyle","cursor","ButtonWraper","styled","div","_templateObject","_taggedTemplateLiteral","LoginForm","React","constructor","arguments","state","isHidePassword","handleSubmit","e","preventDefault","this","props","form","validateFields","err","values","onLoginSubmit","render","getFieldDecorator","_jsxs","Form","onSubmit","className","style","border","children","_jsx","Item","rules","required","message","Input","prefix","Icon","type","placeholder","disabled","loading","Password","top","windowWidth","float","textDecoration","href","Button","htmlType","isInala","create","name","auth","login","loginBackground","logo","LogoWithTagline","imageExporter","Login","Component","loggedIn","mfaVerification","submitLogin","_ref","username","password","setState","logIn","code","verificationCode","Object","join","resendOtp","mfaRequired","mfaType","MFAQRCode","height","display","alignItems","justifyContent","backgroundImage","concat","backgroundSize","backgroundPosition","backgroundRepeat","backgroundAttachment","Card","bordered","padding","borderRadius","boxShadow","Spin","flexDirection","src","alt","MfaCArd","mapDispatchToProps","withRouter","connect","_ref2","sites","ButtonWrapper","_templateObject2","CountdownWrapper","_templateObject3","setCode","useState","verify","setVerifying","countDown","setCountDown","deadline","useRef","useMemo","moment","InputStyle","fontFamily","margin","MozAppearance","fontSize","paddingLeft","useEffect","filter","digit","length","_Fragment","ReactCodeInput","fields","inputStyle","onChange","Loaders","onClick","Countdown","value","onFinish","console","log","format"],"sourceRoot":""}