Production Release: SmartICU Hotfixes

src/Components/Auth/Login.tsx

@@ -132,12 +132,12 @@ export const Login = (props: { forgot?: boolean }) => {
     if (typeof form.username === "string") {
       if (!form.username.match(/\w/)) {
         hasError = true;
-        err.username = t("field_request");
+        err.username = t("field_required");
       }
     }
     if (!form.username) {
       hasError = true;
-      err.username = t("field_request");
+      err.username = t("field_required");
     }
 
     if (hasError) {
@@ -402,7 +402,6 @@ export const Login = (props: { forgot?: boolean }) => {
                   onChange={handleChange}
                   error={errors.username}
                   outerClassName="my-4"
-                  required
                   size="large"
                   className="font-extrabold"
                 />

src/Components/Auth/ResetPassword.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { LegacyErrorHelperText } from "../Common/HelperInputFields";
 import { useDispatch } from "react-redux";
 import * as Notification from "../../Utils/Notifications.js";
 import { postResetPassword, checkResetToken } from "../../Redux/actions";
@@ -8,7 +7,8 @@ import { useTranslation } from "react-i18next";
 import { LocalStorageKeys } from "../../Common/constants";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
-import CollapseV2 from "../Common/components/CollapseV2";
+import { validateRule } from "../Users/UserAdd";
+import { validatePassword } from "../../Common/validation.js";
 
 export const ResetPassword = (props: any) => {
   const dispatch: any = useDispatch();
@@ -20,7 +20,10 @@ export const ResetPassword = (props: any) => {
   const initErr: any = {};
   const [form, setForm] = useState(initForm);
   const [errors, setErrors] = useState(initErr);
-  const [passReg, setPassReg] = useState(0);
+  const [passwordInputInFocus, setPasswordInputInFocus] = useState(false);
+  const [confirmPasswordInputInFocus, setConfirmPasswordInputInFocus] =
+    useState(false);
+
   const { t } = useTranslation();
   const handleChange = (e: any) => {
     const { value, name } = e;
@@ -31,7 +34,6 @@ export const ResetPassword = (props: any) => {
       setErrors(errorField);
     }
     fieldValue[name] = value;
-    setPassReg(0);
     setForm(fieldValue);
   };
 
@@ -40,12 +42,10 @@ export const ResetPassword = (props: any) => {
     const err = Object.assign({}, errors);
     if (form.password !== form.confirm) {
       hasError = true;
-      setPassReg(1);
       err.confirm = t("password_mismatch");
     }
 
-    const regex = /^(?=.*[a-z]+)(?=.*[A-Z]+)(?=.*[0-9]+)(?=.*[!@#$%^&*]).{8,}$/;
-    if (!regex.test(form.password)) {
+    if (!validatePassword(form.password)) {
       hasError = true;
       err.password = t("invalid_password");
     }
@@ -120,26 +120,44 @@ export const ResetPassword = (props: any) => {
                 placeholder={t("new_password")}
                 onChange={handleChange}
                 error={errors.password}
+                onFocus={() => setPasswordInputInFocus(true)}
+                onBlur={() => setPasswordInputInFocus(false)}
               />
-              <CollapseV2 opened={passReg === 0}>
-                <div className="mb-4 px-4">
-                  <ul className="text-red-500 list-disc">
-                    <li>{t("min_password_len_8")}</li>
-                    <li>{t("req_atleast_one_digit")}</li>
-                    <li>{t("req_atleast_one_uppercase")}</li>
-                    <li>{t("req_atleast_one_lowercase")}</li>
-                    <li>{t("req_atleast_one_symbol")}</li>
-                  </ul>
+              {passwordInputInFocus && (
+                <div className="pl-2 text-small text-gray-500 mb-2">
+                  {validateRule(
+                    form.password?.length >= 8,
+                    "Password should be atleast 8 characters long"
+                  )}
+                  {validateRule(
+                    form.password !== form.password.toUpperCase(),
+                    "Password should contain at least 1 lowercase letter"
+                  )}
+                  {validateRule(
+                    form.password !== form.password.toLowerCase(),
+                    "Password should contain at least 1 uppercase letter"
+                  )}
+                  {validateRule(
+                    /\d/.test(form.password),
+                    "Password should contain at least 1 number"
+                  )}
                 </div>
-              </CollapseV2>
+              )}
               <TextFormField
                 type="password"
                 name="confirm"
                 placeholder={t("confirm_password")}
                 onChange={handleChange}
                 error={errors.confirm}
+                onFocus={() => setConfirmPasswordInputInFocus(true)}
+                onBlur={() => setConfirmPasswordInputInFocus(false)}
               />
-              <LegacyErrorHelperText error={errors.token} />
+              {confirmPasswordInputInFocus &&
+                form.confirm.length > 0 &&
+                validateRule(
+                  form.confirm === form.password,
+                  "Confirm password should match the entered password"
+                )}
             </div>
             <div className="sm:flex sm:justify-between grid p-4">
               <Cancel onClick={() => navigate("/login")} />

src/Components/Facility/UpdateFacilityMiddleware.tsx

@@ -23,6 +23,7 @@ const initForm = {
 };
 const initialState = {
   form: { ...initForm },
+  errors: {},
 };
 
 const FormReducer = (state = initialState, action: any) => {
@@ -85,8 +86,9 @@ export const UpdateFacilityMiddleware = (props: any) => {
     e.preventDefault();
     setIsLoading(true);
     if (!state.form.middleware_address) {
-      Notification.Error({
-        msg: "Middleware Address is required",
+      dispatch({
+        type: "set_error",
+        errors: { middleware_address: ["Middleware Address is required"] },
       });
       setIsLoading(false);
       return;
@@ -96,8 +98,11 @@ export const UpdateFacilityMiddleware = (props: any) => {
         /^(?!https?:\/\/)[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*\.[a-zA-Z]{2,}$/
       ) === null
     ) {
-      Notification.Error({
-        msg: "Invalid Middleware Address",
+      dispatch({
+        type: "set_error",
+        errors: {
+          middleware_address: ["Invalid Middleware Address"],
+        },
       });
       setIsLoading(false);
       return;
@@ -151,6 +156,7 @@ export const UpdateFacilityMiddleware = (props: any) => {
                 label="Facility Middleware Address"
                 value={state.form.middleware_address}
                 onChange={(e) => handleChange(e)}
+                error={state.errors?.middleware_address}
               />
             </div>
           </div>

src/Components/Users/UserAdd.tsx

@@ -131,6 +131,26 @@ const user_create_reducer = (state = initialState, action: any) => {
 const getDate = (value: any) =>
   value && moment(value).isValid() && moment(value).toDate();
 
+export const validateRule = (
+  condition: boolean,
+  content: JSX.Element | string
+) => {
+  return (
+    <div>
+      {condition ? (
+        <i className="fas fa-circle-check text-green-500" />
+      ) : (
+        <i className="fas fa-circle-xmark text-red-500" />
+      )}{" "}
+      <span
+        className={classNames(condition ? "text-primary-500" : "text-red-500")}
+      >
+        {content}
+      </span>
+    </div>
+  );
+};
+
 export const UserAdd = (props: UserProps) => {
   const { goBack } = useAppHistory();
   const dispatchAction: any = useDispatch();
@@ -531,25 +551,6 @@ export const UserAdd = (props: UserProps) => {
     return true;
   };
 
-  const validateRule = (condition: boolean, content: JSX.Element | string) => {
-    return (
-      <div>
-        {condition ? (
-          <i className="fas fa-circle-check text-green-500" />
-        ) : (
-          <i className="fas fa-circle-xmark text-red-500" />
-        )}{" "}
-        <span
-          className={classNames(
-            condition ? "text-primary-500" : "text-red-500"
-          )}
-        >
-          {content}
-        </span>
-      </div>
-    );
-  };
-
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     const validated = validateForm();

src/Components/VitalsMonitor/HL7PatientVitalsMonitor.tsx

@@ -84,7 +84,7 @@ export default function HL7PatientVitalsMonitor({
               ECG: "text-lime-300",
               ECG_CHANNEL_2: "invisible",
               Pleth: "text-yellow-300",
-              SpO2: "text-sky-300",
+              Resp: "text-sky-300",
             }}
           />
           <canvas