update

lerte · Apr 13, 2024 · 2724289 · 2724289
1 parent b992ddf
commit 2724289
Show file tree

Hide file tree

Showing 12 changed files with 354 additions and 138 deletions.
diff --git a/app.go b/app.go
@@ -83,6 +83,41 @@ func (a *App) Invite(email string) string {
 	return resp.Status
 }
 
+func (a *App) getEnvZId(status string) (string,string) {
+  arr := strings.Split(status, " ")
+	return arr[len(arr)-4],arr[len(arr)-9]
+}
+
+
+func (a *App) UnShare(shrToken string) string {
+	status := []string{"status", "--secrets"}
+	output, _ := zrokCmd(status).Output()
+
+	envZId, XToken := a.getEnvZId(string(output))
+
+	xurlsStrict := xurls.Strict()
+	find := xurlsStrict.FindAllString(string(output), -1)
+	apiEndpoint := find[0]
+
+	requestBody := []byte(fmt.Sprintf(`{"envZId": "%s", "shrToken": "%s"}`, envZId,shrToken ))
+	log.Info("requestBody", string(requestBody))
+	req, err := http.NewRequest("DELETE", apiEndpoint+"/api/v1/unshare", bytes.NewBuffer(requestBody))
+	req.Header.Add("Content-Type", "application/zrok.v1+json")
+	req.Header.Add("X-Token", XToken)
+
+	if err != nil {
+		log.Error("创建请求出错:", err)
+	}
+
+	resp, err := http.DefaultClient.Do(req)
+
+	if err != nil {
+		log.Error("发送请求时出错:", err)
+	}
+	defer resp.Body.Close()
+	return resp.Status
+}
+
 func (a *App) Version() string {
 	version := []string{"version"}
 	output, _ := zrokCmd(version).Output()
@@ -120,3 +155,8 @@ func (a *App) Zrok(args []string) string {
 	return stdout.String()
 }
 
+// Open link in browser
+func (a *App) OpenExternal(link string) {
+	runtime.BrowserOpenURL(a.ctx, link)
+}
+
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,10 +1,10 @@
 import router from "./router";
-import { useEffect, useState } from "react";
 import { isDark } from "./utils";
+import { Theme } from "@radix-ui/themes";
 import { Toaster } from "react-hot-toast";
+import { useEffect, useState } from "react";
 import { RouterProvider } from "react-router-dom";
 import { useAutoDark } from "./hooks/useAutoDark";
-import { Theme, ThemePanel } from "@radix-ui/themes";
 
 const App = () => {
   const [theme] = useAutoDark();
@@ -34,7 +34,6 @@ const App = () => {
           },
         }}
       />
-      <ThemePanel />
     </Theme>
   );
 };

diff --git a/frontend/src/assets/images/space3-1327x1536.png.webp b/frontend/src/assets/images/space3-1327x1536.png.webp
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { Link } from "react-router-dom";
-import { Card, Flex, Text } from "@radix-ui/themes";
+import { Link, useLocation } from "react-router-dom";
+import { Card, Flex, Text, ScrollArea } from "@radix-ui/themes";
 
 const Sidebar = () => {
+  const { pathname } = useLocation();
   const menus = [
     {
       title: "Overview",
@@ -28,27 +29,30 @@ const Sidebar = () => {
 
   return (
     <Card className="w-[160px]">
-      <Flex
-        gap="2"
-        direction="column"
-      >
-        {menus.map((menu) => (
-          <Card
-            key={menu.to}
-            variant="classic"
-          >
-            <Link to={menu.to}>
-              <Text
-                as="div"
-                size="2"
-                weight="bold"
-              >
-                {menu.title}
-              </Text>
-            </Link>
-          </Card>
-        ))}
-      </Flex>
+      <ScrollArea scrollbars="vertical">
+        <Flex
+          gap="2"
+          direction="column"
+        >
+          {menus.map((menu) => (
+            <Card
+              key={menu.to}
+              variant="classic"
+              className={pathname == menu.to ? "bg-indigo-500" : ""}
+            >
+              <Link to={menu.to}>
+                <Text
+                  as="div"
+                  size="5"
+                  weight="bold"
+                >
+                  {menu.title}
+                </Text>
+              </Link>
+            </Card>
+          ))}
+        </Flex>
+      </ScrollArea>
     </Card>
   );
 };

diff --git a/frontend/src/views/enable.tsx b/frontend/src/views/enable.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
+import { Info } from "lucide-react";
 import toast from "react-hot-toast";
-import { Zrok } from "../../wailsjs/go/main/App";
-import { Card, TextField, Button } from "@radix-ui/themes";
+import { Zrok, OpenExternal } from "../../wailsjs/go/main/App";
+import { Card, Tooltip, Flex, Text, TextField, Button } from "@radix-ui/themes";
 
 const Page = () => {
   const [command, setCommand] = useState("");
@@ -22,22 +23,42 @@ const Page = () => {
   };
 
   return (
-    <Card className="w-full flex flex-col gap-2 p-8">
-      <h2>Enable your zrok account</h2>
-      <div className="flex gap-4 w-full">
+    <Card className="w-full">
+      <Flex
+        gap="6"
+        align="center"
+        justify="center"
+        direction="column"
+        className="h-full max-w-sm mx-auto"
+      >
+        <Text size="6">Enable your zrok account</Text>
+
         <TextField.Root
+          size="3"
           value={command}
+          className="w-full"
           placeholder="Enable your zrok account"
           onChange={(e) => setCommand(e.target.value)}
-        />
+        >
+          <TextField.Slot>
+            <Tooltip content="Copy Enable Your Environment from https://api.zrok.io/">
+              <Info
+                className="cursor-pointer"
+                onClick={() => OpenExternal("https://api.zrok.io/")}
+              />
+            </Tooltip>
+          </TextField.Slot>
+        </TextField.Root>
         <Button
+          size="3"
           color="blue"
+          className="!block !w-full"
           loading={loading}
           onClick={handleEnable}
         >
           Enable
         </Button>
-      </div>
+      </Flex>
     </Card>
   );
 };

diff --git a/frontend/src/views/invite.tsx b/frontend/src/views/invite.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { Card, TextField, Button } from "@radix-ui/themes";
+import { Card, Flex, Text, TextField, Button } from "@radix-ui/themes";
 import { Invite } from "../../wailsjs/go/main/App";
 
 const Page = () => {
@@ -23,21 +23,33 @@ const Page = () => {
   };
 
   return (
-    <Card className="w-full flex flex-col gap-2 p-8">
-      <div className="flex gap-4 w-full">
+    <Card className="w-full">
+      <Flex
+        gap="6"
+        align="center"
+        justify="center"
+        direction="column"
+        className="h-full max-w-sm mx-auto"
+      >
+        <Text size="6">Please input email address</Text>
         <TextField.Root
-          placeholder="Email"
+          size="3"
           value={email}
+          className="w-full"
+          placeholder="Email"
           onChange={(e) => setEmail(e.target.value)}
         />
+
         <Button
+          size="3"
           color="lime"
           loading={loading}
           onClick={handleInvite}
+          className="!block !w-full"
         >
           Zrok Invite
         </Button>
-      </div>
+      </Flex>
     </Card>
   );
 };