calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-10 20:02:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add advanced toggle to sites and clients create

Browse Source
This commit is contained in:
miloschwartz
2025-12-21 16:02:09 -05:00
parent 3f81b88073
commit b2df8eb72e
2 changed files with 112 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/[orgId]/settings/clients/machine/create/page.tsx
View File

@@ -25,7 +25,7 @@ import { createElement, useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { InfoIcon, Terminal } from "lucide-react"; import { ChevronDown, ChevronUp, InfoIcon, Terminal } from "lucide-react";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import CopyTextBox from "@app/components/CopyTextBox"; import CopyTextBox from "@app/components/CopyTextBox";
import CopyToClipboard from "@app/components/CopyToClipboard"; import CopyToClipboard from "@app/components/CopyToClipboard";
@@ -121,6 +121,7 @@ export default function Page() {
const [olmCommand, setOlmCommand] = useState(""); const [olmCommand, setOlmCommand] = useState("");
const [createLoading, setCreateLoading] = useState(false); const [createLoading, setCreateLoading] = useState(false);
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [clientDefaults, setClientDefaults] = const [clientDefaults, setClientDefaults] =
useState<PickClientDefaultsResponse | null>(null); useState<PickClientDefaultsResponse | null>(null);
@@ -443,33 +444,54 @@ export default function Page() {
</FormItem> </FormItem>
)} )}
/> />
<div className="flex items-center justify-end md:col-start-2">
<FormField <Button
control={form.control} type="button"
name="subnet" variant="ghost"
render={({ field }) => ( size="sm"
<FormItem> onClick={() =>
<FormLabel> setShowAdvancedSettings(
{t("clientAddress")} !showAdvancedSettings
</FormLabel> )
<FormControl> }
<Input className="flex items-center gap-2"
autoComplete="off" >
placeholder={t( {showAdvancedSettings ? (
"subnetPlaceholder" <ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
{t("advancedSettings")}
</Button>
</div>
{showAdvancedSettings && (
<FormField
control={form.control}
name="subnet"
render={({ field }) => (
<FormItem className="md:col-start-1 md:col-span-2">
<FormLabel>
{t("clientAddress")}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
placeholder={t(
"subnetPlaceholder"
)}
{...field}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"addressDescription"
)} )}
{...field} </FormDescription>
/> </FormItem>
</FormControl> )}
<FormMessage /> />
<FormDescription> )}
{t(
"addressDescription"
)}
</FormDescription>
</FormItem>
)}
/>
</form> </form>
</Form> </Form>
</SettingsSectionBody> </SettingsSectionBody>

102
src/app/[orgId]/settings/sites/create/page.tsx
View File

@@ -25,7 +25,7 @@ import { createElement, useEffect, useState } from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "@app/components/ui/input"; import { Input } from "@app/components/ui/input";
import { InfoIcon, Terminal } from "lucide-react"; import { ChevronDown, ChevronUp, InfoIcon, Terminal } from "lucide-react";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import CopyTextBox from "@app/components/CopyTextBox"; import CopyTextBox from "@app/components/CopyTextBox";
import CopyToClipboard from "@app/components/CopyToClipboard"; import CopyToClipboard from "@app/components/CopyToClipboard";
@@ -204,6 +204,7 @@ export default function Page() {
const [createLoading, setCreateLoading] = useState(false); const [createLoading, setCreateLoading] = useState(false);
const [acceptClients, setAcceptClients] = useState(true); const [acceptClients, setAcceptClients] = useState(true);
const [newtVersion, setNewtVersion] = useState("latest"); const [newtVersion, setNewtVersion] = useState("latest");
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [siteDefaults, setSiteDefaults] = const [siteDefaults, setSiteDefaults] =
useState<PickSiteDefaultsResponse | null>(null); useState<PickSiteDefaultsResponse | null>(null);
@@ -727,45 +728,68 @@ WantedBy=default.target`
</FormItem> </FormItem>
)} )}
/> />
{form.watch("method") === "newt" && ( <div className="flex items-center justify-end md:col-start-2">
<FormField <Button
control={form.control} type="button"
name="clientAddress" variant="ghost"
render={({ field }) => ( size="sm"
<FormItem> onClick={() =>
<FormLabel> setShowAdvancedSettings(
{t("siteAddress")} !showAdvancedSettings
</FormLabel> )
<FormControl> }
<Input className="flex items-center gap-2"
autoComplete="off" >
value={ {showAdvancedSettings ? (
clientAddress <ChevronUp className="h-4 w-4" />
} ) : (
onChange={( <ChevronDown className="h-4 w-4" />
e
) => {
setClientAddress(
e.target
.value
);
field.onChange(
e.target
.value
);
}}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"siteAddressDescription"
)}
</FormDescription>
</FormItem>
)} )}
/> {t("advancedSettings")}
)} </Button>
</div>
{form.watch("method") === "newt" &&
showAdvancedSettings && (
<FormField
control={form.control}
name="clientAddress"
render={({ field }) => (
<FormItem className="md:col-start-1 md:col-span-2">
<FormLabel>
{t("siteAddress")}
</FormLabel>
<FormControl>
<Input
autoComplete="off"
value={
clientAddress
}
onChange={(
e
) => {
setClientAddress(
e
.target
.value
);
field.onChange(
e
.target
.value
);
}}
/>
</FormControl>
<FormMessage />
<FormDescription>
{t(
"siteAddressDescription"
)}
</FormDescription>
</FormItem>
)}
/>
)}
</form> </form>
</Form> </Form>
</SettingsSectionBody> </SettingsSectionBody>