Merge pull request #81 from BahmniIndiaDistro/BAH-3071

Implementation of Aadhaar Demographic Auth in Bahmni online
BahmniIndiaDistro · Oct 16, 2023 · e15d526 · e15d526
2 parents adbf35b + 964be58
commit e15d526
Show file tree

Hide file tree

Showing 11 changed files with 710 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -4,6 +4,11 @@
   "homepage": "./",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.12",
+    "moment": "^2.29.4",
+    "react-datepicker": "^4.11.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/api/constants.js b/src/api/constants.js
@@ -5,6 +5,7 @@ export const headers = {
 export const purpose = "KYC_AND_LINK";
 export const bahmniUrl = "/openmrs/ws/rest/v1/hip";
 export const hipServiceUrl ="/hiprovider";
+export const hipAadhaarDemographicsUrl = "/v1/hid/benefit/createHealthId/demo/auth";
 
 export const authModesUrl = "/v0.5/hip/fetch-modes";
 export const authInitUrl = "/v0.5/hip/auth/init";

diff --git a/src/api/hipServiceApi.js b/src/api/hipServiceApi.js
@@ -86,6 +86,19 @@ export const authConfirm = async (healthId, otp, demographics) => {
     }
 }
 
+export const aadhaarDemographicsAuth = async (demographics) => {
+    try {
+        const response = await axios.post(Constants.hipServiceUrl + Constants.hipAadhaarDemographicsUrl, demographics, Constants.headers);
+        return response.data;
+    }
+    catch (error) {
+        if (error.response !== undefined)
+            return error.response.data;
+        else
+            return Constants.serviceUnavailableError;
+    }
+}
+
 export const checkAndGetPatientDetails = async (healthId) => {
     try {
         const response = await axios.post(Constants.hipServiceUrl + Constants.getPatientForDirectAuthUrl + "?healthId=" + healthId ,Constants.headers);

diff --git a/src/components/creation/AuthModes.jsx b/src/components/creation/AuthModes.jsx
@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import Spinner from '../spinner/spinner';
+
+const AuthModes = (props) => {
+    const [selectedAuthMode, setSelectedAuthMode] = useState('AADHAAR OTP');
+
+    const authModes = ['AADHAAR OTP', 'AADHAAR DEMOGRAHICS'];
+    let authModesList = authModes.length > 0 && authModes.map((item, i) => {
+        return (
+            <option key={i} value={item}>{item}</option>
+        )
+    });
+
+    function onAuthModeSelected(e) {
+        setSelectedAuthMode(e.target.value);
+    }
+
+    function proceed() {
+        props.setSelectedAuthMode(selectedAuthMode);
+    }
+
+    return (
+        <div>
+            <div className="select-option">
+                <label htmlFor="auth-modes">Preferred mode of Authentication</label>
+                <div className="select-btn">
+                    <div className="select">
+                        <select id="auth-modes" onChange={onAuthModeSelected}>
+                            {authModesList}
+                        </select>
+                    </div>
+                    <button type="button" disabled={props.showOtpInput} onClick={proceed}>Proceed</button>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default AuthModes;
diff --git a/src/components/creation/verifyAadhaar.jsx b/src/components/creation/verifyAadhaar.jsx
@@ -5,6 +5,8 @@ import Spinner from "../spinner/spinner";
 import {generateAadhaarOtp, verifyAadhaarOtp} from "../../api/hipServiceApi";
 import PatientAadhaarProfile from "./PatientAadhaarProfile";
 import AadhaarConsent from "./AadhaarConsent";
+import AuthModes from "./AuthModes";
+import DemoAuth from "../demo-auth/demoAuth";
 
 const VerifyAadhaar = props => {
 
@@ -19,6 +21,9 @@ const VerifyAadhaar = props => {
     const [back, setBack] = useState(false);
     const [isConsentGranted, setConsentGrated] = useState(false);
     const [aadhaarError, setAadhaarError] = useState('');
+    const [showAuthMode, setShowAuthMode] = useState(false);
+    const [showDemographics, setShowDemographics] = useState(false);
+    const [selectedAuthMode, setSelectedAuthMode] = useState('');
 
 
     function idOnChangeHandler(e) {
@@ -30,26 +35,31 @@ const VerifyAadhaar = props => {
         setShowOtpInput(false);
     }
 
-    async function onVerify() {
+    async function getAuthModes(){
         setAadhaarError('');
-        setShowOtpInput(false);
         if (aadhaar === '') {
             setAadhaarError("Aadhaar number cannot be empty")
-        } else {
-            setLoader(true);
-            var response = await generateAadhaarOtp(aadhaar);
-            if(response){
-                setLoader(false);
-                if(response.data === undefined){
-                    if(response.details !== undefined && response.details.length > 0)
-                       setAadhaarError(response.details[0].message)
-                    else
-                        setAadhaarError("An error occurred while processing your request")
-                }
-                else {
-                    setShowOtpInput(true);
-                    setOtpReceivingNumber(response.data.mobileNumber);
-                }
+        }
+        else {
+            setShowAuthMode(true);
+        }
+    }
+
+    async function onVerify() {
+        setShowOtpInput(false);
+        setLoader(true);
+        var response = await generateAadhaarOtp(aadhaar);
+        if(response){
+            setLoader(false);
+            if(response.data === undefined){
+                if(response.details !== undefined && response.details.length > 0)
+                   setError(response.details[0].message)
+                else
+                    setError("An error occurred while processing your request")
+            }
+            else {
+                setShowOtpInput(true);
+                setOtpReceivingNumber(response.data.mobileNumber);
             }
         }
     }
@@ -94,9 +104,18 @@ const VerifyAadhaar = props => {
         }
     },[back]);
 
+    useEffect(async () => {
+        if(selectedAuthMode === "AADHAAR OTP") {
+            await onVerify();
+        }
+        if(selectedAuthMode === "AADHAAR DEMOGRAHICS") {
+            setShowDemographics(true);
+        }
+    }, [selectedAuthMode])
+
     return (
        <div className="abha-creation">
-           {!otpVerified && <div>
+           {!showDemographics && !otpVerified && <div>
            <div className="aadhaar">
                 <label htmlFor="aadhaar" className="label">Enter AADHAAR Number</label>
                 <div className="verify-aadhaar-input-btn">
@@ -106,14 +125,18 @@ const VerifyAadhaar = props => {
                 </div>
             </div>
             {aadhaarError !== '' && <h6 className="error">{aadhaarError}</h6>}
-            {!showOtpInput && <AadhaarConsent setConsentGrated={setConsentGrated}/>}
-           {!showOtpInput && !loader && <div className="center">
-                <button type="button" disabled={!isConsentGranted} name="verify-btn" onClick={onVerify}>Accept & Proceed</button>
+            {!showAuthMode && <AadhaarConsent setConsentGrated={setConsentGrated}/>}
+            {!showAuthMode && !loader && <div className="center">
+                <button type="button" disabled={!isConsentGranted} name="verify-btn" onClick={getAuthModes}>Accept & Proceed</button>
             </div>}
+            {showAuthMode &&
+                <AuthModes showOtpInput={showOtpInput} setSelectedAuthMode={setSelectedAuthMode}/>
+            }
             {showOtpInput && <VerifyOTP setOtp={setOtp} mobile={otpReceivingNumber}/>}
             {error !== '' && <h6 className="error">{error}</h6>}
             {loader && <Spinner />}
            </div>}
+           {showDemographics && <DemoAuth aadhaar={aadhaar} isAadhaarDemoAuth={true} />}
            {otpVerified && <PatientAadhaarProfile patient={patient} setBack={setBack} />}
         </div>