Merge pull request #73 from sinamics/dev

Merge dev branch
sinamics · Jul 31, 2023 · b6f962f · b6f962f
2 parents 0054ddf + d14c81e
commit b6f962f
Show file tree

Hide file tree

Showing 8 changed files with 496 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.0",
     "react-timeago": "^7.1.0",
+    "sharp": "^0.32.4",
     "superjson": "1.9.1",
     "unique-names-generator": "^4.7.1",
     "usehooks-ts": "^2.9.1",

diff --git a/src/components/elements/modal.tsx b/src/components/elements/modal.tsx
@@ -30,15 +30,12 @@ const Modal = () => {
     toggleModal();
   };
   const modalClass = cn({
-    "modal modal-bottom sm:modal-middle z-20 ": true,
+    "modal transition-none z-20": true,
     "modal-open": isOpen,
   });
 
   return (
-    // we add modal-bottom and modal-middle classes to make it responsive
-    //add modal-open for now to test the modal
-    <div className={modalClass}>
-      {/* we want any content for this modal layout so we just pass the children */}
+    <dialog className={modalClass}>
       <div
         className={cn(
           "custom-scrollbar modal-box relative bg-base-100",
@@ -67,7 +64,7 @@ const Modal = () => {
           )}
         </div>
       </div>
-    </div>
+    </dialog>
   );
 };
 

diff --git a/src/components/modules/inviteMemberbyMail.tsx b/src/components/modules/inviteMemberbyMail.tsx
@@ -90,7 +90,7 @@ export const InviteMemberByMail = () => {
             {loadingInvite ? (
               <span className="loading loading-spinner"></span>
             ) : (
-              <span>{t("inviteMemberByMail.buttonText")}</span>
+              <>{t("inviteMemberByMail.buttonText")}</>
             )}
           </button>
         </label>

diff --git a/src/components/modules/networkIpAssignments.tsx b/src/components/modules/networkIpAssignments.tsx
@@ -167,13 +167,10 @@ export const NetworkIpAssignment = () => {
         {network.autoAssignIp && ipTabs.easy ? (
           <div>
             <div
-              className={cn(
-                "xs:grid-cols-4 grid cursor-pointer grid-cols-3 gap-2 sm:grid-cols-3 md:grid-cols-4",
-                {
-                  "pointer-events-none cursor-no-drop text-gray-500 opacity-25":
-                    !network.autoAssignIp,
-                }
-              )}
+              className={cn("flex cursor-pointer flex-wrap", {
+                "pointer-events-none cursor-no-drop text-gray-500 opacity-25":
+                  !network.autoAssignIp,
+              })}
             >
               {network.cidr?.map((cidr: string) => {
                 return network?.routes?.some(
@@ -182,7 +179,7 @@ export const NetworkIpAssignment = () => {
                   <div
                     key={cidr}
                     className={cn(
-                      "badge badge-ghost badge-outline badge-lg rounded-md text-xs opacity-30 md:text-base",
+                      "badge badge-ghost badge-outline badge-lg m-1 rounded-md text-xs opacity-30 md:text-base",
                       {
                         "badge badge-lg rounded-md bg-primary text-xs text-white opacity-70 md:text-base":
                           network.autoAssignIp,
@@ -196,7 +193,7 @@ export const NetworkIpAssignment = () => {
                     key={cidr}
                     onClick={() => submitUpdate({ ipPool: cidr })}
                     className={cn(
-                      "badge badge-ghost badge-outline badge-lg rounded-md text-xs opacity-30 md:text-base",
+                      "badge badge-ghost badge-outline badge-lg m-1 rounded-md text-xs opacity-30 md:text-base",
                       { "hover:bg-primary": network.autoAssignIp }
                     )}
                   >
@@ -206,7 +203,41 @@ export const NetworkIpAssignment = () => {
               })}
             </div>
           </div>
-        ) : null}
+        ) : //    <div
+        //    className={cn("flex cursor-pointer flex-wrap", {
+        //      "pointer-events-none cursor-no-drop text-gray-500 opacity-25":
+        //        !network.autoAssignIp,
+        //    })}
+        //  >
+        //    {network.cidr?.map((cidr: string) => {
+        //      return network?.routes?.some((route) => route.target === cidr) ? (
+        //        <div
+        //          key={cidr}
+        //          className={cn(
+        //            "badge badge-ghost badge-outline badge-lg m-1 rounded-md text-xs sm:m-2 md:text-base",
+        //            {
+        //              "badge badge-lg rounded-md bg-primary text-xs text-white opacity-70 md:text-base":
+        //                network.autoAssignIp,
+        //            }
+        //          )}
+        //        >
+        //          {cidr}
+        //        </div>
+        //      ) : (
+        //        <div
+        //          key={cidr}
+        //          onClick={() => submitUpdate({ ipPool: cidr })}
+        //          className={cn(
+        //            "badge badge-ghost badge-outline badge-lg m-1 rounded-md text-xs sm:m-2 md:text-base",
+        //            { "hover:bg-primary": network.autoAssignIp }
+        //          )}
+        //        >
+        //          {cidr}
+        //        </div>
+        //      );
+        //    })}
+        //  </div>
+        null}
         {network.autoAssignIp && ipTabs.advanced ? (
           <div className="mt-4 space-y-2">
             {network?.ipAssignmentPools.map((pool) => {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,6 @@
 import {
   type NextPage,
   type GetServerSideProps,
-  type GetServerSidePropsResult,
   type GetServerSidePropsContext,
 } from "next";
 import Head from "next/head";
@@ -100,14 +99,20 @@ interface Props {
 
 export const getServerSideProps: GetServerSideProps<Props> = async (
   context: GetServerSidePropsContext
-): Promise<GetServerSidePropsResult<Props>> => {
+) => {
   const session = await getSession(context);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+  const messages = (await import(`~/locales/${context.locale}/common.json`))
+    .default;
 
   if (!session || !("user" in session)) {
-    return { props: {} };
+    // eslint-disable-next-line
+    return { props: { messages } };
   }
 
   return {
-    props: { auth: session.user },
+        // eslint-disable-next-line
+    props: { auth: session.user, messages },
+
   };
 };
diff --git a/src/pages/network/[id].tsx b/src/pages/network/[id].tsx
@@ -235,7 +235,7 @@ const NetworkById = () => {
         <NetworkPrivatePublic />
       </div>
       <div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
-        <div className="flex flex-col justify-between sm:flex-row sm:space-x-3">
+        <div className="flex flex-col justify-between lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3 whitespace-nowrap">
           <div>
             <span className="text-muted font-medium">{t("networkStart")}</span>{" "}
             <span
@@ -271,7 +271,7 @@ const NetworkById = () => {
       <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
         {t("networkSettings")}
       </div>
-      <div className="w-5/5 mx-auto grid grid-cols-1  px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex">
+      <div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
         {/* Ipv4 assignment  */}
         <div className="w-6/6 xl:w-3/6">
           <NetworkIpAssignment />
@@ -284,7 +284,7 @@ const NetworkById = () => {
           <NettworkRoutes />
         </div>
       </div>
-      <div className="w-5/5 mx-auto grid grid-cols-1 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex">
+      <div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
         {/* Ipv4 assignment  */}
         <div className="w-6/6 xl:w-3/6">
           <NetworkDns />
@@ -329,9 +329,12 @@ const NetworkById = () => {
           </div>
         )}
       </div>
-      <div className="w-5/5 mx-auto flex space-x-5 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
-        <InviteMemberByMail />
-        <AddMemberById />
+      <div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+        {/* Ipv4 assignment  */}
+        <div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
+          <InviteMemberByMail />
+          <AddMemberById />
+        </div>
       </div>
       <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
         <div className="mb-4 md:mb-0">

diff --git a/src/utils/ztApi.ts b/src/utils/ztApi.ts
@@ -4,7 +4,6 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-
 import fs from "fs";
 import axios, { type AxiosError, type AxiosResponse } from "axios";
 import { type NetworkAndMembers } from "~/types/network";