{"version":3,"sources":["webpack:///./src/pages/login.tsx"],"names":["LoginPage","lang","useIntl","ValidationSchema","useMemo","Yup","shape","email","formatMessage","id","required","password","useState","showErrorMessage","setShowErrorMessage","errorMessage","setErrorMessage","useLoginUserLazyQuery","fetchPolicy","loginUser","data","loading","error","useEffect","console","log","login","values","user","token","handleLogin","navigate","message","isLoggedIn","client","title","description","show","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","className","xmlns","viewBox","fill","fillRule","d","clipRule","type","onClick","aria-label","initialValues","validationSchema","onSubmit","actions","variables","username","clientId","process","setSubmitting","isSubmitting","errors","htmlFor","name","placeholder","msg","disabled","cx","cy","r","stroke","strokeWidth","to"],"mappings":"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","file":"component---src-pages-login-tsx-11ab16c1547a278b9b71.js","sourcesContent":["import React, { useEffect, useState, useMemo } from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport * as Yup from \"yup\";\nimport { Link, FormattedMessage, useIntl } from \"gatsby-plugin-intl\";\nimport { navigate } from \"gatsby\";\nimport { Transition } from \"@tailwindui/react\";\nimport { ApolloProvider } from \"@apollo/client\";\n\nimport Layout from \"../components/layout\";\nimport SEO from \"../components/seo\";\nimport { handleLogin, isLoggedIn } from \"../components/app/services/auth\";\nimport { useLoginUserLazyQuery } from \"../components/app/generated/graphql\";\nimport client from \"../gatsby-theme-apollo/client\";\n\nconst LoginPage: React.FC = () => {\n  const lang = useIntl();\n\n  const ValidationSchema = useMemo(() => {\n    return Yup.object().shape({\n      email: Yup.string()\n        .email(lang.formatMessage({ id: \"error_invalid_email\" }))\n        .required(lang.formatMessage({ id: \"required\" })),\n      password: Yup.string().required(lang.formatMessage({ id: \"required\" })),\n    });\n  }, [lang]);\n\n  const [showErrorMessage, setShowErrorMessage] = useState<boolean>(false);\n  const [errorMessage, setErrorMessage] = useState<string>(\"\");\n  const [loginUser, { data, loading, error }] = useLoginUserLazyQuery({\n    fetchPolicy: \"network-only\",\n  });\n\n  useEffect(() => {\n    if (data) {\n      console.log(data);\n      if (data.login) {\n        const values = {\n          user: data.login.user,\n          token: data.login.token,\n        };\n\n        handleLogin(values);\n        navigate(`/app`);\n      }\n    }\n\n    if (error) {\n      console.log(error);\n      setShowErrorMessage(true);\n      setErrorMessage(error.message);\n    }\n\n    if (loading) {\n      console.log(loading);\n    }\n  }, [data, error, loading]);\n\n  if (isLoggedIn()) {\n    navigate(`/app`);\n  }\n\n  return (\n    <ApolloProvider client={client}>\n      <Layout>\n        <SEO title=\"Sign In\" description=\"Sign in to your GivFast account.\" />\n        <Transition\n          show={showErrorMessage}\n          enter=\"ease-out duration-300\"\n          enterFrom=\"opacity-0\"\n          enterTo=\"opacity-100\"\n          leave=\"ease-in duration-200\"\n          leaveFrom=\"opacity-100\"\n          leaveTo=\"opacity-0\"\n        >\n          <div>\n            <div className=\"rounded-md bg-red-50 p-4\">\n              <div className=\"flex\">\n                <div className=\"flex-shrink-0\">\n                  <svg className=\"h-5 w-5 text-red-400\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                    <path fillRule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clipRule=\"evenodd\" />\n                  </svg>\n                </div>\n                <div className=\"ml-3\">\n                  <h3 className=\"text-sm leading-5 font-medium text-red-800\">\n                    <FormattedMessage id=\"oops\" />\n                  </h3>\n                  <div className=\"mt-2 text-sm leading-5 text-red-700\">\n                    <ul className=\"list-disc pl-5\">\n                      <li>\n                        {errorMessage}\n                      </li>\n                    </ul>\n                  </div>\n                </div>\n                <div className=\"ml-auto pl-3\">\n                  <div className=\"-mx-1.5 -my-1.5\">\n                    <button\n                      type=\"button\"\n                      onClick={() => setShowErrorMessage(false)}\n                      className=\"inline-flex rounded-md p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:bg-red-100 transition ease-in-out duration-150\"\n                      aria-label=\"Dismiss\"\n                    >\n                      <svg\n                        className=\"h-5 w-5\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        viewBox=\"0 0 20 20\"\n                        fill=\"currentColor\"\n                      >\n                        <path\n                          fillRule=\"evenodd\"\n                          d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                          clipRule=\"evenodd\"\n                        />\n                      </svg>\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Transition>\n        <div className=\"py-16 px-4 overflow-hidden sm:px-6 lg:px-8 lg:py-24\">\n          <div className=\"relative max-w-xl mx-auto\">\n            <div className=\"text-center\">\n              <h2 className=\"text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10\">\n                <FormattedMessage id=\"label_sign_in\" />\n              </h2>\n              {/* <p className=\"mt-4 text-lg leading-6 text-gray-500\">\n                Nullam risus blandit ac aliquam justo ipsum. Quam mauris\n                volutpat massa dictumst amet. Sapien tortor lacus arcu.\n              </p> */}\n            </div>\n            <div className=\"mt-12\">\n              <Formik\n                initialValues={{ email: \"\", password: \"\" }}\n                validationSchema={ValidationSchema}\n                onSubmit={(values, actions) => {\n                  try {\n                    loginUser({\n                      variables: {\n                        username: values.email,\n                        password: values.password,\n                        clientId: process.env.GIVFAST_API_CLIENT_ID,\n                      },\n                    });\n                  } catch (error) {\n                    console.error(error);\n                    setErrorMessage(error.message);\n                    setShowErrorMessage(true);\n                  }\n                  actions.setSubmitting(false);\n                }}\n              >\n                {({ isSubmitting, errors }) => (\n                  <Form>\n                    {/* Email Field */}\n                    <div className=\"mt-6\">\n                      <label\n                        htmlFor=\"email\"\n                        className=\"block text-sm font-medium leading-5 text-gray-700\"\n                      >\n                        <FormattedMessage id=\"label_email\" />\n                      </label>\n                      <div className=\"mt-1 relative rounded-md shadow-sm\">\n                        <Field\n                          type=\"email\"\n                          name=\"email\"\n                          className={`form-input block w-full sm:text-sm sm:leading-5 pr-10 ${\n                            errors.email\n                              ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                              : \"\"\n                          }`}\n                          placeholder=\"you@example.com\"\n                        />\n                        {/* {errors.email && (\n                        <div className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\">\n                          <svg\n                            className=\"h-5 w-5 text-red-500\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 20 20\"\n                          >\n                            <path\n                              fillRule=\"evenodd\"\n                              d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n                              clipRule=\"evenodd\"\n                            />\n                          </svg>\n                        </div>\n                      )} */}\n                      </div>\n                      <ErrorMessage name=\"email\">\n                        {(msg: string): React.ReactNode => (\n                          <p\n                            className=\"mt-2 text-sm text-red-600\"\n                            id=\"email-error\"\n                          >\n                            {msg}\n                          </p>\n                        )}\n                      </ErrorMessage>\n                    </div>\n                    {/* Password Field */}\n                    <div className=\"mt-6\">\n                      <label\n                        htmlFor=\"password\"\n                        className=\"block text-sm font-medium leading-5 text-gray-700\"\n                      >\n                        <FormattedMessage id=\"label_password\" />\n                      </label>\n                      <div className=\"mt-1 relative rounded-md shadow-sm\">\n                        <Field\n                          type=\"password\"\n                          name=\"password\"\n                          className={`form-input block w-full sm:text-sm sm:leading-5 ${\n                            errors.password\n                              ? \"border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red\"\n                              : \"\"\n                          }`}\n                        />\n                        {/* {errors.password && (\n                        <div className=\"absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none\">\n                          <svg\n                            className=\"h-5 w-5 text-red-500\"\n                            fill=\"currentColor\"\n                            viewBox=\"0 0 20 20\"\n                          >\n                            <path\n                              fillRule=\"evenodd\"\n                              d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n                              clipRule=\"evenodd\"\n                            />\n                          </svg>\n                        </div>\n                      )} */}\n                      </div>\n                      <ErrorMessage name=\"password\">\n                        {(msg: string): React.ReactNode => (\n                          <p\n                            className=\"mt-2 text-sm text-red-600\"\n                            id=\"password-error\"\n                          >\n                            {msg}\n                          </p>\n                        )}\n                      </ErrorMessage>\n                    </div>\n                    <div className=\"mt-6\">\n                      <button\n                        type=\"submit\"\n                        className=\"group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-teal-600 hover:bg-teal-500 focus:outline-none focus:border-teal-700 focus:shadow-outline-indigo active:bg-teal-700 transition duration-150 ease-in-out\"\n                        disabled={loading}\n                      >\n                        <span className=\"absolute left-0 inset-y-0 flex items-center pl-3\">\n                          {!loading && (\n                            <svg\n                              className=\"h-5 w-5 text-teal-500 group-hover:text-teal-400 transition ease-in-out duration-150\"\n                              fill=\"currentColor\"\n                              viewBox=\"0 0 20 20\"\n                            >\n                              <path\n                                fillRule=\"evenodd\"\n                                d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n                                clipRule=\"evenodd\"\n                              />\n                            </svg>\n                          )}\n                          {(loading || isSubmitting) && !error && (\n                            <svg\n                              className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\"\n                              xmlns=\"http://www.w3.org/2000/svg\"\n                              fill=\"none\"\n                              viewBox=\"0 0 24 24\"\n                            >\n                              <circle\n                                className=\"opacity-25\"\n                                cx=\"12\"\n                                cy=\"12\"\n                                r=\"10\"\n                                stroke=\"currentColor\"\n                                strokeWidth=\"4\"\n                              ></circle>\n                              <path\n                                className=\"opacity-75\"\n                                fill=\"currentColor\"\n                                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                              ></path>\n                            </svg>\n                          )}\n                        </span>\n                        <FormattedMessage id=\"label_sign_in\" />\n                      </button>\n                    </div>\n                  </Form>\n                )}\n              </Formik>\n            </div>\n            <div className=\"mt-4\">\n              <Link\n                className=\"text-center text-base leading-6 font-medium text-teal-500\"\n                to=\"/forgot-password\"\n              >\n                <FormattedMessage id=\"link_forgot_password\" />\n              </Link>\n            </div>\n          </div>\n        </div>\n      </Layout>\n    </ApolloProvider>\n  );\n};\n\nexport default LoginPage;\n"],"sourceRoot":""}