worked on dialer issue and adjusted code for advanced settings validity message

2025-12-19 04:47:45 +00:00 · 2024-09-04 15:36:20 +01:00
parent b284a88e97
commit a713b1b3a1
5 changed files with 78 additions and 33 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -143,6 +143,16 @@ export const getApplications = () => {
  );
 };

+// validate user advanced credential
+export const getAdvancedValidation = (
+  apiServer: string,
+  accountSid: string
+) => {
+  return getFetch<Application[]>(
+    `${apiServer}/Accounts/${accountSid}/Applications`
+  );
+};
+
 export const getQueues = () => {
  const advancedSettings = getActiveSettings();
  return getFetch<Queue[]>(
--- a/src/imgs/icons/invalid.svg
+++ b/src/imgs/icons/invalid.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 13.75C12.1576 13.75 13.7473 13.0915 14.9194 11.9194C16.0915 10.7473 16.75 9.1576 16.75 7.5C16.75 5.8424 16.0915 4.25269 14.9194 3.08058C13.7473 1.90848 12.1576 1.25 10.5 1.25C8.8424 1.25 7.25269 1.90848 6.08058 3.08058C4.90848 4.25269 4.25 5.8424 4.25 7.5C4.25 9.1576 4.90848 10.7473 6.08058 11.9194C7.25269 13.0915 8.8424 13.75 10.5 13.75ZM9.5625 10.3125C9.5625 10.0639 9.66127 9.8254 9.83709 9.64959C10.0129 9.47377 10.2514 9.375 10.5 9.375C10.7486 9.375 10.9871 9.47377 11.1629 9.64959C11.3387 9.8254 11.4375 10.0639 11.4375 10.3125C11.4375 10.5611 11.3387 10.7996 11.1629 10.9754C10.9871 11.1512 10.7486 11.25 10.5 11.25C10.2514 11.25 10.0129 11.1512 9.83709 10.9754C9.66127 10.7996 9.5625 10.5611 9.5625 10.3125ZM9.885 4.2625C9.91109 4.1184 9.98696 3.98803 10.0994 3.89416C10.2118 3.80028 10.3536 3.74886 10.5 3.74886C10.6464 3.74886 10.7882 3.80028 10.9006 3.89416C11.013 3.98803 11.0889 4.1184 11.115 4.2625L11.125 4.375V7.5L11.115 7.6125C11.0889 7.7566 11.013 7.88697 10.9006 7.98084C10.7882 8.07472 10.6464 8.12614 10.5 8.12614C10.3536 8.12614 10.2118 8.07472 10.0994 7.98084C9.98696 7.88697 9.91109 7.7566 9.885 7.6125L9.875 7.5V4.375L9.885 4.2625Z" fill="#BD4782"/>
+</svg>
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -13,6 +13,7 @@ const mainTheme = extendTheme({
      200: "#fc839d",
      300: "#fa5575",
      400: "#f8274e",
+      450: "#BD4782",
      500: "#BB225B",
      550: "#DA1C5C",
      600: "#c60921",
@@ -33,6 +34,9 @@ const mainTheme = extendTheme({
      800: "#6D6D6D",
      900: "#434343",
    },
+    greenish: {
+      500: "#158477",
+    },
    blue: {
      600: "#4492FF", //for toggle icon
    },
--- a/src/window/phone/index.tsx
+++ b/src/window/phone/index.tsx
@@ -80,8 +80,8 @@ type PhoneProbs = {
  allSettings: IAppSettings[];
  reload: () => void;
  sipUA: React.MutableRefObject<SipUA | null>;
-  setIsSwitchingUserStatus: React.Dispatch<React.SetStateAction<boolean>>,
-  setIsOnline: React.Dispatch<React.SetStateAction<boolean>>
+  setIsSwitchingUserStatus: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOnline: React.Dispatch<React.SetStateAction<boolean>>;
 };

 enum PAGE_VIEW {
@@ -105,9 +105,9 @@ export const Phone = ({
  advancedSettings,
  allSettings,
  reload,
-  sipUA,
+  // sipUA,
  setIsSwitchingUserStatus,
-  setIsOnline
+  setIsOnline,
 }: PhoneProbs) => {
  const [inputNumber, setInputNumber] = useState("");
  const [appName, setAppName] = useState("");
@@ -137,7 +137,7 @@ export const Phone = ({

  const inputNumberRef = useRef(inputNumber);
  const sessionDirectionRef = useRef(sessionDirection);
-  // const sipUA = useRef<SipUA | null>(null);
+  const sipUA = useRef<SipUA | null>(null);
  const timerRef = useRef<NodeJS.Timer | null>(null);
  const isRestartRef = useRef(false);
  const sipDomainRef = useRef("");
@@ -517,7 +517,7 @@ export const Phone = ({
  const handleSetActive = (id: number) => {
    setActiveSettings(id);
    setShowAccounts(false);
-    fetchRegisterUser();
+    // fetchRegisterUser();
    reload();
  };

--- a/src/window/settings/accountForm.tsx
+++ b/src/window/settings/accountForm.tsx
@@ -18,18 +18,13 @@ import PasswordInput from "src/components/password-input";
 import { deleteSettings, editSettings, saveSettings } from "src/storage";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-  faCheckCircle,
-  faCircleXmark,
-  faShuffle,
-  faSliders,
-  faSlidersH,
-  faTrashCan,
+  faCheckCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { normalizeUrl } from "src/utils";
-import { getApplications } from "src/api";
-import { colors } from "src/theme";
+import { getAdvancedValidation } from "src/api";
 import Switch from "src/imgs/icons/Switch.svg";
 import Trash from "src/imgs/icons/Trash.svg";
+import invalid from "src/imgs/icons/invalid.svg";

 function AccountForm({
  closeForm,
@@ -68,13 +63,26 @@ function AccountForm({
        setAccountSid(formData.decoded.accountSid);
        setApiKey(formData.decoded.apiKey || "");
        setApiServer(formData.decoded.apiServer);
+
+        if (
+          formData.decoded.accountSid ||
+          formData.decoded.apiKey ||
+          formData.decoded.apiServer
+        ) {
+          setIsAdvancedMode(true);
+          checkCredential(
+            formData.decoded.apiServer || "",
+            formData.decoded.accountSid || ""
+          );
+        }
      }
    },
    [formData, handleClose]
  );

-  const checkCredential = () => {
-    getApplications()
+  const checkCredential = (apiServer: string, accountSid: string) => {
+    // getApplications()
+    getAdvancedValidation(apiServer, accountSid)
      .then(() => {
        setIsCredentialOk(true);
      })
@@ -101,7 +109,7 @@ function AccountForm({

    if (showAdvanced) {
      setIsAdvancedMode(true);
-      checkCredential();
+      checkCredential(settings.apiServer || "", settings.accountSid || "");
    }

    toast({
@@ -239,6 +247,42 @@ function AccountForm({
                  isRequired
                />
              </FormControl>
+
+              {isAdvancedMode && (
+                <HStack
+                  w="full"
+                  mt={2}
+                  mb={2}
+                  gap={"1.5"}
+                  alignItems={"center"}
+                >
+                  <Text
+                    fontSize="12px"
+                    fontWeight={600}
+                    color={isCredentialOk ? "greenish.500" : "jambonz.450"}
+                  >
+                    {isCredentialOk
+                      ? "Credentials are valid"
+                      : "We cant verify your credentials"}
+                  </Text>
+                  {isCredentialOk ? (
+                    <Box
+                      as={FontAwesomeIcon}
+                      icon={faCheckCircle}
+                      color={"greenish.500"}
+                    />
+                  ) : (
+                    <Box w={"22px"} h={"22px"} p={0} marginLeft={-1}>
+                      <Image
+                        width={"full"}
+                        height={"full"}
+                        p={0}
+                        src={invalid}
+                      />
+                    </Box>
+                  )}
+                </HStack>
+              )}
            </VStack>
          )}
          <Center flexDirection={"column"} gap={"2.5"}>
@@ -257,22 +301,6 @@ function AccountForm({
          </Center>
        </VStack>

-        {isAdvancedMode && (
-          <HStack w="full" mt={2} mb={2}>
-            <Box
-              as={FontAwesomeIcon}
-              icon={isCredentialOk ? faCheckCircle : faCircleXmark}
-              color={isCredentialOk ? "green.500" : "red.500"}
-            />
-            <Text
-              fontSize="14px"
-              color={isCredentialOk ? "green.500" : "red.500"}
-            >
-              Credential is {isCredentialOk ? "valid" : "invalid"}
-            </Text>
-          </HStack>
-        )}
-
        <HStack
          w="full"
          alignItems="center"