CCSD-1077 : updated the login page to handle email based login (#3243)

* CCSD-1077 : updated the login page to handle email based login

* Updated the logic for mobile number

Author: Tulika-eGov

micro-ui/web/micro-ui-internals/example/package.json

@@ -13,7 +13,7 @@
     "@egovernments/digit-ui-module-workbench": "1.0.21",
     "@egovernments/digit-ui-module-pgr": "1.8.12",
     "@egovernments/digit-ui-module-dss": "1.8.12",
-    "@egovernments/digit-ui-module-core": "1.8.32",
+    "@egovernments/digit-ui-module-core": "1.8.33",
     "@egovernments/digit-ui-module-common": "1.8.10",
     "@egovernments/digit-ui-module-hrms": "1.8.11",
     "@egovernments/digit-ui-module-utilities": "1.0.15",

micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/citizen/Login/SelectMobileNumber.js

@@ -1,17 +1,66 @@
-import { FormStep } from "@egovernments/digit-ui-components";
-import React from "react";
+import {  ToggleSwitch, InputCard, TextBlock, FieldV1 } from "@egovernments/digit-ui-components";
+import React, { useMemo, useState } from "react";
 
 const SelectMobileNumber = ({ t, onSelect, showRegisterLink, mobileNumber, onMobileChange, config, canSubmit }) => {
+  const [isEmail, setIsEmail] = useState(false);
+  const [email, setEmail] = useState("");
+
+  const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  const isEmailValid = useMemo(() => EMAIL_REGEX.test(email), [email]);
+  const isDisabled = useMemo(() => {
+    return isEmail ? !(isEmailValid && canSubmit) : !(isMobileValid && canSubmit);
+  }, [isEmail, isEmailValid, isMobileValid, canSubmit]);
+
+  const handleSubmit = () => {
+    if (isEmail) {
+      onSelect({ userName: email });
+    } else {
+      onSelect({ mobileNumber });
+    }
+  };
+
+  const core_mobile_config = window?.globalConfigs?.getConfig("CORE_MOBILE_CONFIGS") || {};
+  const isMobileValid = useMemo(() => mobileNumber && mobileNumber.length === core_mobile_config?.mobileNumberLength, [mobileNumber]);
+
   return (
-    <FormStep
-      isDisabled={!(mobileNumber.length === 10 && canSubmit)}
-      onSelect={onSelect}
-      config={config}
+    <InputCard
       t={t}
-      componentInFront="+91"
-      onChange={onMobileChange}
-      value={mobileNumber}
-    ></FormStep>
+      texts={config?.texts}
+      submit
+      onNext={handleSubmit}
+      isDisable={isDisabled}
+    >
+      <div>
+      <FieldV1
+        withoutLabel={true}
+        charCount={true}
+        onChange={isEmail ? (e) => setEmail(e.target.value) : onMobileChange}
+        placeholder={isEmail ? t("ENTER_EMAIL_PLACEHOLDER") : t("ENTER_MOBILE_PLACEHOLDER")}
+        populators={{
+          name : isEmail ? "userName" : "mobileNumber",
+          prefix: isEmail ? "" : core_mobile_config?.mobilePrefix
+        }}
+        props={{
+          fieldStyle: { width: "100%" }
+        }}
+        required
+        type="text"
+        value={isEmail ? email : mobileNumber}
+      />
+      </div>
+      
+      <div style={{ display: "flex", alignItems: "center", gap: "1rem", marginBottom: "1.5rem", marginTop:"-24px" }}>
+        <TextBlock body={t("CS_MOBILE_OR_EMAIL")}></TextBlock>
+        <ToggleSwitch
+          name="loginWithEmail"
+          style={{ marginTop: "-1rem" }}
+          value={isEmail}
+          onChange={() => setIsEmail(!isEmail)}
+          label={isEmail ? t("CS_USE_MOBILE_INSTEAD") : t("CS_LOGIN_REGISTER_WITH_EMAIL")}
+        />
+      </div>
+    </InputCard>
   );
 };