Skip to content

Commit

Permalink
Merge pull request #61 from usual2970/feat/settings
Browse files Browse the repository at this point in the history
Feat/settings
  • Loading branch information
usual2970 authored Sep 20, 2024
2 parents 5981200 + 30beee6 commit 2cca82e
Show file tree
Hide file tree
Showing 16 changed files with 591 additions and 387 deletions.
Binary file removed certimate
Binary file not shown.
303 changes: 303 additions & 0 deletions ui/dist/assets/index-BLKGMHXS.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions ui/dist/assets/index-BmYeXvQX.css

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion ui/dist/assets/index-ChWRjRip.css

This file was deleted.

293 changes: 0 additions & 293 deletions ui/dist/assets/index-liy7dSav.js

This file was deleted.

4 changes: 2 additions & 2 deletions ui/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certimate - Your Trusted SSL Automation Partner</title>
<script type="module" crossorigin src="/assets/index-liy7dSav.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ChWRjRip.css">
<script type="module" crossorigin src="/assets/index-BLKGMHXS.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BmYeXvQX.css">
</head>
<body class="bg-background">
<div id="root"></div>
Expand Down
49 changes: 49 additions & 0 deletions ui/src/components/certimate/DeployState.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Deployment } from "@/domain/deployment";
import { CircleCheck, CircleX } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "../ui/tooltip";

type DeployStateProps = {
deployment: Deployment;
};

const DeployState = ({ deployment }: DeployStateProps) => {
// 获取指定阶段的错误信息
const error = (state: "check" | "apply" | "deploy") => {
if (!deployment.log[state]) {
return "";
}
return deployment.log[state][deployment.log[state].length - 1].error;
};

return (
<>
{deployment.phase === "deploy" && deployment.phaseSuccess ? (
<CircleCheck size={16} className="text-green-700" />
) : (
<>
{error(deployment.phase).length ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild className="cursor-pointer">
<CircleX size={16} className="text-red-700" />
</TooltipTrigger>
<TooltipContent className="max-w-[35em]">
{error(deployment.phase)}
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<CircleX size={16} className="text-red-700" />
)}
</>
)}
</>
);
};

export default DeployState;
2 changes: 1 addition & 1 deletion ui/src/domain/version.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const version = "Certimate v0.1.8";
export const version = "Certimate v0.1.9";
4 changes: 2 additions & 2 deletions ui/src/pages/DashboardLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ export default function Dashboard() {
};

const handleSettingClick = () => {
navigate("/setting/password");
navigate("/setting/account");
};
return (
<>
<ConfigProvider>
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div className="grid min-h-screen w-full md:grid-cols-[180px_1fr] lg:grid-cols-[200px_1fr] 2xl:md:grid-cols-[280px_1fr] ">
<div className="hidden border-r dark:border-stone-500 bg-muted/40 md:block">
<div className="flex h-full max-h-screen flex-col gap-2">
<div className="flex h-14 items-center border-b dark:border-stone-500 px-4 lg:h-[60px] lg:px-6">
Expand Down
55 changes: 46 additions & 9 deletions ui/src/pages/SettingLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Toaster } from "@/components/ui/toaster";
import { Outlet } from "react-router-dom";
import { KeyRound, UserRound } from "lucide-react";
import { useEffect, useState } from "react";

import { Outlet, useLocation, useNavigate } from "react-router-dom";

const SettingLayout = () => {
const location = useLocation();
const [tabValue, setTabValue] = useState("account");
const navigate = useNavigate();

useEffect(() => {
const pathname = location.pathname;
const tabValue = pathname.split("/")[2];
setTabValue(tabValue);
}, [location]);

return (
<div>
<Toaster />
<div className="text-muted-foreground border-b dark:border-stone-500 py-5">
设置密码
偏好设置
</div>
<div className="w-full sm:w-[35em] mt-10 flex flex-col p-3 mx-auto">
{/* <div className="text-muted-foreground">
<span className="transition-all text-sm bg-gray-400 px-3 py-1 rounded-sm text-white cursor-pointer">
密码
</span>
</div> */}
<Outlet />
<div className="w-full mt-5 p-3 flex justify-center">
<Tabs defaultValue="account" className="" value={tabValue}>
<TabsList>
<TabsTrigger
value="account"
onClick={() => {
navigate("/setting/account");
}}
className="px-5"
>
<UserRound size={14} />
<div className="ml-1">账户</div>
</TabsTrigger>
<TabsTrigger
value="password"
onClick={() => {
navigate("/setting/password");
}}
className="px-5"
>
<KeyRound size={14} />
<div className="ml-1">密码</div>
</TabsTrigger>
</TabsList>
<TabsContent value={tabValue}>
<div className="mt-5 w-full md:w-[45em]">
<Outlet />
</div>
</TabsContent>
</Tabs>
</div>
</div>
);
Expand Down
9 changes: 2 additions & 7 deletions ui/src/pages/dashboard/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DeployProgress from "@/components/certimate/DeployProgress";
import DeployState from "@/components/certimate/DeployState";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
Expand All @@ -17,8 +18,6 @@ import { statistics } from "@/repository/domains";
import {
Ban,
CalendarX2,
CircleCheck,
CircleX,
LoaderPinwheel,
Smile,
SquareSigma,
Expand Down Expand Up @@ -204,11 +203,7 @@ const Dashboard = () => {
{deployment.expand.domain?.domain}
</div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
{deployment.phase === "deploy" && deployment.phaseSuccess ? (
<CircleCheck size={16} className="text-green-700" />
) : (
<CircleX size={16} className="text-red-700" />
)}
<DeployState deployment={deployment} />
</div>
<div className="sm:w-56 w-full pt-1 sm:pt-0 flex items-center">
<DeployProgress
Expand Down
22 changes: 9 additions & 13 deletions ui/src/pages/domains/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DeployProgress from "@/components/certimate/DeployProgress";
import DeployState from "@/components/certimate/DeployState";
import XPagination from "@/components/certimate/XPagination";
import Show from "@/components/Show";
import {
Expand Down Expand Up @@ -31,7 +32,7 @@ import {
} from "@/repository/domains";

import { TooltipContent, TooltipProvider } from "@radix-ui/react-tooltip";
import { CircleCheck, CircleX, Earth } from "lucide-react";
import { Earth } from "lucide-react";
import { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";

Expand Down Expand Up @@ -196,12 +197,12 @@ const Home = () => {
) : (
<>
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
<div className="w-40">域名</div>
<div className="w-48">有效期限</div>
<div className="w-36">域名</div>
<div className="w-40">有效期限</div>
<div className="w-32">最近执行状态</div>
<div className="w-64">最近执行阶段</div>
<div className="w-40 sm:ml-2">最近执行时间</div>
<div className="w-32">是否启用</div>
<div className="w-24">是否启用</div>
<div className="grow">操作</div>
</div>
<div className="sm:hidden flex text-sm text-muted-foreground">
Expand All @@ -213,10 +214,10 @@ const Home = () => {
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={domain.id}
>
<div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">
<div className="sm:w-36 w-full pt-1 sm:pt-0 flex items-center">
{domain.domain}
</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
<div className="sm:w-40 w-full pt-1 sm:pt-0 flex items-center">
<div>
{domain.expiredAt ? (
<>
Expand All @@ -231,12 +232,7 @@ const Home = () => {
<div className="sm:w-32 w-full pt-1 sm:pt-0 flex items-center">
{domain.lastDeployedAt && domain.expand?.lastDeployment ? (
<>
{domain.expand.lastDeployment?.phase === "deploy" &&
domain.expand.lastDeployment?.phaseSuccess ? (
<CircleCheck size={16} className="text-green-700" />
) : (
<CircleX size={16} className="text-red-700" />
)}
<DeployState deployment={domain.expand.lastDeployment} />
</>
) : (
"---"
Expand All @@ -257,7 +253,7 @@ const Home = () => {
? convertZulu2Beijing(domain.lastDeployedAt)
: "---"}
</div>
<div className="sm:w-32 flex items-center">
<div className="sm:w-24 flex items-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
Expand Down
9 changes: 3 additions & 6 deletions ui/src/pages/history/History.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import DeployProgress from "@/components/certimate/DeployProgress";
import DeployState from "@/components/certimate/DeployState";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
Expand All @@ -13,7 +14,7 @@ import {
import { Deployment, DeploymentListReq, Log } from "@/domain/deployment";
import { convertZulu2Beijing } from "@/lib/time";
import { list } from "@/repository/deployment";
import { CircleCheck, CircleX, Smile } from "lucide-react";
import { Smile } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";

Expand Down Expand Up @@ -88,11 +89,7 @@ const History = () => {
{deployment.expand.domain?.domain}
</div>
<div className="sm:w-24 w-full pt-1 sm:pt-0 flex items-center">
{deployment.phase === "deploy" && deployment.phaseSuccess ? (
<CircleCheck size={16} className="text-green-700" />
) : (
<CircleX size={16} className="text-red-700" />
)}
<DeployState deployment={deployment} />
</div>
<div className="sm:w-56 w-full pt-1 sm:pt-0 flex items-center">
<DeployProgress
Expand Down
109 changes: 109 additions & 0 deletions ui/src/pages/setting/Account.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { getErrMessage } from "@/lib/error";
import { getPb } from "@/repository/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";

import { z } from "zod";

const formSchema = z.object({
email: z.string().email("请输入正确的邮箱"),
});

const Account = () => {
const { toast } = useToast();
const navigate = useNavigate();

const [changed, setChanged] = useState(false);

const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
email: getPb().authStore.model?.email,
},
});

const onSubmit = async (values: z.infer<typeof formSchema>) => {
try {
await getPb().admins.update(getPb().authStore.model?.id, {
email: values.email,
});

getPb().authStore.clear();
toast({
title: "修改账户邮箱功",
description: "请重新登录",
});
setTimeout(() => {
navigate("/login");
}, 500);
} catch (e) {
const message = getErrMessage(e);
toast({
title: "修改账户邮箱失败",
description: message,
variant: "destructive",
});
}
};

return (
<>
<div className="w-full md:max-w-[35em]">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>邮箱</FormLabel>
<FormControl>
<Input
placeholder="请输入邮箱"
{...field}
type="email"
onChange={(e) => {
setChanged(true);
form.setValue("email", e.target.value);
}}
/>
</FormControl>

<FormMessage />
</FormItem>
)}
/>

<div className="flex justify-end">
{changed ? (
<Button type="submit">确认修改</Button>
) : (
<Button type="submit" disabled variant={"secondary"}>
确认修改
</Button>
)}
</div>
</form>
</Form>
</div>
</>
);
};

export default Account;
Loading

0 comments on commit 2cca82e

Please sign in to comment.