Merge pull request #634 from SUI-Components/feat/events-and-fces

feat(components/login/passwordReset): Add events for login
SUI-Components · Nov 14, 2023 · 86763cb · 86763cb
2 parents 059aada + 30c00a9
commit 86763cb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/components/login/passwordReset/src/components/Content/Login.js b/components/login/passwordReset/src/components/Content/Login.js
@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types'
 
 import {BASE_CLASS} from '../../config.js'
-
 import LoginForm from '../Form/LoginForm.js'
 import FaceRecognition from '../Info/FaceRecognition.js'
 import Form from './Form.js'
 import LoginInfo from './LoginInfo.js'
 
-const Login = ({icons}) => {
+const Login = ({hasFaceRecognition = false, icons}) => {
   return (
     <div className={`${BASE_CLASS} no-padding`}>
       <div className={`${BASE_CLASS}-item`}>
@@ -17,7 +16,7 @@ const Login = ({icons}) => {
         <Form icons={icons} isLogin>
           <>
             <LoginForm icons={icons} />
-            <FaceRecognition icons={icons} />
+            {hasFaceRecognition && <FaceRecognition icons={icons} />}
           </>
         </Form>
       </div>
@@ -28,7 +27,8 @@ const Login = ({icons}) => {
 Login.displayName = 'Login'
 
 Login.propTypes = {
-  icons: PropTypes.arrayOf(PropTypes.object)
+  icons: PropTypes.arrayOf(PropTypes.object),
+  hasFaceRecognition: PropTypes.bool
 }
 
 export default Login
diff --git a/components/login/passwordReset/src/components/Form/LoginForm.js b/components/login/passwordReset/src/components/Form/LoginForm.js
@@ -1,12 +1,11 @@
 import MoleculeInputField from '@s-ui/react-molecule-input-field'
 
-import {BASE_CLASS} from '../../config.js'
+import {BASE_CLASS, EVENTS} from '../../config.js'
 import useLoginFormState from '../../hooks/components/useLoginFormState.js'
 // import useDomain from '../../hooks/useDomain.js'
-// import useEventBus from '../../hooks/useEventBus.js'
+import useEventBus from '../../hooks/useEventBus.js'
 import useI18n from '../../hooks/useI18n.js'
 import Notification from '../Info/Notification.js'
-
 // import LoginButton from '../Input/LoginButton.js'
 import SubmitButton from '../Input/SubmitButton.js'
 
@@ -29,15 +28,9 @@ const LoginForm = () => {
 
   const i18n = useI18n()
   // const domain = useDomain()
-  // const {emit} = useEventBus()
+  const {emit} = useEventBus()
 
-  // const {
-  //   RESET_PASSWORD_BUTTON_CLICK,
-  //   RESET_PASSWORD_EMAIL_VALIDATION_ERROR,
-  //   RESET_PASSWORD_ERROR,
-  //   RESET_PASSWORD_RESEND_CLICK,
-  //   RESET_PASSWORD_SUCCESS
-  // } = EVENTS
+  const {LOGIN} = EVENTS
 
   // const getErrorText = value => {
   //   return domain
@@ -93,7 +86,10 @@ const LoginForm = () => {
   // }
 
   const handleSubmit = () => {
-    console.log('Llamada al login')
+    emit(LOGIN, {
+      email,
+      password
+    })
     // emit(RESET_PASSWORD_BUTTON_CLICK, {email})
     // getErrorText(email).then(errorText => {
     //   if (errorText) {

diff --git a/components/login/passwordReset/src/components/Info/FaceRecognition.js b/components/login/passwordReset/src/components/Info/FaceRecognition.js
@@ -2,12 +2,22 @@ import PropTypes from 'prop-types'
 
 import AtomIcon, {ATOM_ICON_SIZES} from '@s-ui/react-atom-icon'
 
-import {BASE_CLASS, DEFAULT_FACE_RECOGNITION_ICON} from '../../config.js'
+import {
+  BASE_CLASS,
+  DEFAULT_FACE_RECOGNITION_ICON,
+  EVENTS
+} from '../../config.js'
+import useEventBus from '../../hooks/useEventBus.js'
 import useI18n from '../../hooks/useI18n.js'
 const FaceRecognition = ({icons}) => {
+  const {emit} = useEventBus()
   const i18n = useI18n()
+
   return (
-    <div className={`${BASE_CLASS}-formFooter ${BASE_CLASS}-formFooterIcon`}>
+    <div
+      className={`${BASE_CLASS}-formFooter ${BASE_CLASS}-formFooterIcon`}
+      onClick={() => emit(EVENTS.BIOMETRIC_LOGIN, null)}
+    >
       <AtomIcon size={ATOM_ICON_SIZES.medium}>
         {icons.faceRecognition || DEFAULT_FACE_RECOGNITION_ICON}
       </AtomIcon>

diff --git a/components/login/passwordReset/src/config.js b/components/login/passwordReset/src/config.js
diff --git a/components/login/passwordReset/src/index.js b/components/login/passwordReset/src/index.js
@@ -1,15 +1,18 @@
 import PropTypes from 'prop-types'
 
-import PasswordReset from './components/Content/PasswordReset.js'
 import Login from './components/Content/Login.js'
+import PasswordReset from './components/Content/PasswordReset.js'
 import {STAGE_PASSWORD_CHANGE, STAGE_PASSWORD_RESET_START} from './config.js'
 import {PasswordResetProvider} from './context.js'
 
 export default function LoginPasswordReset(props) {
   return (
     <PasswordResetProvider {...props}>
       {props.isLogin ? (
-        <Login icons={props.icons || {}} />
+        <Login
+          icons={props.icons || {}}
+          hasFaceRecognition={props.hasFaceRecognition}
+        />
       ) : (
         <PasswordReset icons={props.icons || {}} />
       )}
@@ -36,5 +39,6 @@ LoginPasswordReset.propTypes = {
   onEvent: PropTypes.func,
   /* Allows to override the icons used in the component */
   icons: PropTypes.arrayOf(PropTypes.object),
-  isLogin: PropTypes.bool
+  isLogin: PropTypes.bool,
+  hasFaceRecognition: PropTypes.bool
 }