@risecx/carespace-chat-ui
Version:
carespace-chat-ui React component
278 lines (235 loc) • 9.89 kB
JavaScript
import _regeneratorRuntime from "@babel/runtime/regenerator";
var _this = this;
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
import React, { memo, useState, useReducer, useEffect, useCallback } from 'react';
import axios from 'axios';
import Button from '../../Button';
import './login.css';
import { Reducer, Actions } from './Reducer';
import useDebounce from '../../../hooks/useDebounce';
var Login = function Login(props) {
var urlAPI = props.clientConfig.urlAPI;
var _useReducer = useReducer(Reducer.reducer, Reducer.initialState),
_useReducer$ = _useReducer[0],
isAnonymous = _useReducer$.isAnonymous,
user = _useReducer$.user,
dispatch = _useReducer[1];
var _useState = useState({
loginId: '',
password: ''
}),
loginForm = _useState[0],
setLoginForm = _useState[1];
var _useState2 = useState(false),
error = _useState2[0],
setError = _useState2[1];
var _useState3 = useState(false),
stealthStatusApplication = _useState3[0],
setStealthStatusApplication = _useState3[1];
var _useState4 = useState({}),
stealthUser = _useState4[0],
setStealthUser = _useState4[1];
var debouncedSearchTerm = useDebounce(loginForm.loginId, 500);
var onBlurEmail = useCallback( /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(email) {
var _yield$axios$post, data;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
_context.next = 3;
return axios.post(urlAPI + "/users/email", {
email: email
});
case 3:
_yield$axios$post = _context.sent;
data = _yield$axios$post.data;
if (data.statusCode === 200) {
setStealthUser(data.stealth);
}
if (data.statusCode === 404) {
setStealthUser({});
}
_context.next = 13;
break;
case 9:
_context.prev = 9;
_context.t0 = _context["catch"](0);
console.log(_context.t0);
setStealthUser({});
case 13:
case "end":
return _context.stop();
}
}
}, _callee, null, [[0, 9]]);
}));
return function (_x) {
return _ref.apply(this, arguments);
};
}(), []);
var onInputChange = useCallback(function (e) {
var _extends2;
setLoginForm(_extends({}, loginForm, (_extends2 = {}, _extends2[e.target.name] = e.target.value, _extends2)));
}, [loginForm]);
var submitFormHandler = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var _yield$axios$post2, data;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
_context2.next = 3;
return axios.post(urlAPI + "/auth/login", loginForm);
case 3:
_yield$axios$post2 = _context2.sent;
data = _yield$axios$post2.data;
Actions.setUser(dispatch, data);
props.onChangeAuthStatus(data);
_context2.next = 12;
break;
case 9:
_context2.prev = 9;
_context2.t0 = _context2["catch"](0);
setError(true);
case 12:
case "end":
return _context2.stop();
}
}
}, _callee2, null, [[0, 9]]);
}));
return function submitFormHandler() {
return _ref2.apply(this, arguments);
};
}();
var onStealth = useCallback(function () {
window.authenticateEnrolledUser(stealthUser._id, /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(params) {
var _yield$axios$post3, data;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
if (!(params.responseCode === 200)) {
_context3.next = 15;
break;
}
_context3.prev = 1;
_context3.next = 4;
return axios.post(urlAPI + "/auth/stealth/login", {
userId: stealthUser._id
});
case 4:
_yield$axios$post3 = _context3.sent;
data = _yield$axios$post3.data;
Actions.setUser(dispatch, data);
props.onChangeAuthStatus(data);
_context3.next = 13;
break;
case 10:
_context3.prev = 10;
_context3.t0 = _context3["catch"](1);
setError(true);
case 13:
_context3.next = 16;
break;
case 15:
setError(true);
case 16:
case "end":
return _context3.stop();
}
}
}, _callee3, null, [[1, 10]]);
}));
return function (_x2) {
return _ref3.apply(this, arguments);
};
}());
}, [window.authenticateEnrolledUser, stealthUser]);
useEffect(function () {
if (debouncedSearchTerm) {
onBlurEmail(debouncedSearchTerm);
} else {
var fetchData = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
var _yield$axios$get, data;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.prev = 0;
_context4.next = 3;
return axios.get(urlAPI + "/auth/stealth");
case 3:
_yield$axios$get = _context4.sent;
data = _yield$axios$get.data;
setStealthStatusApplication(data === null || data === void 0 ? void 0 : data.enable);
_context4.next = 11;
break;
case 8:
_context4.prev = 8;
_context4.t0 = _context4["catch"](0);
setError(true);
case 11:
case "end":
return _context4.stop();
}
}
}, _callee4, null, [[0, 8]]);
}));
return function fetchData() {
return _ref4.apply(this, arguments);
};
}();
fetchData();
}
}, [debouncedSearchTerm, props]);
return /*#__PURE__*/React.createElement("div", {
className: "sc-auth--login"
}, /*#__PURE__*/React.createElement("div", {
className: "container"
}, /*#__PURE__*/React.createElement("form", {
className: error ? 'error' : ''
}, /*#__PURE__*/React.createElement("div", {
className: "form-group"
}, /*#__PURE__*/React.createElement("p", null, "E-mail", /*#__PURE__*/React.createElement("span", null, "*")), /*#__PURE__*/React.createElement("input", {
type: "email",
name: "loginId",
id: "email",
onChange: onInputChange
})), /*#__PURE__*/React.createElement("div", {
className: "form-group"
}, /*#__PURE__*/React.createElement("p", null, "Password", /*#__PURE__*/React.createElement("span", null, "*")), /*#__PURE__*/React.createElement("input", {
type: "password",
name: "password",
id: "password",
onChange: onInputChange
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
className: "btn-forgot-password",
onClick: props.onForgotPassword.bind(_this)
}, "Forgot password?")), error && /*#__PURE__*/React.createElement("div", {
className: "form-group error-message"
}, "Login failed! Invalid e-mail or password"))), /*#__PURE__*/React.createElement("div", {
className: "buttons"
}, /*#__PURE__*/React.createElement(Button, {
classs: "outline first",
title: "Sign In",
onClick: submitFormHandler.bind(_this)
}), stealthStatusApplication && (stealthUser === null || stealthUser === void 0 ? void 0 : stealthUser.enrollment) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "or"
}, "Or"), /*#__PURE__*/React.createElement(Button, {
classs: "outline",
title: "Sign In With Stealth",
onClick: onStealth
}))), /*#__PURE__*/React.createElement("a", {
className: "btn-cancel",
onClick: props.onClickLogin.bind(_this)
}, "Cancel"));
};
export default memo(Login);