A focused Docker Compose management web application.
feat: name input validation
+17
-6
+3
-4
packages/panel/src/routes/(authenticated)/create/+page.svelte
+3
-4
packages/panel/src/routes/(authenticated)/create/+page.svelte
···
1
1
<script lang="ts">
2
-
import { faBan, faCircleInfo, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
3
-
import { faSquarePlus } from "@fortawesome/free-regular-svg-icons";
2
+
import { faBan, faCircleInfo, faLayerGroup, faPlus } from "@fortawesome/free-solid-svg-icons";
4
3
import PromiseButton from "$lib/component/PromiseButton.svelte";
5
4
import EditTabs from "../projects/EditTabs.svelte";
6
5
import placeholder from "./placeholder.yml?raw";
···
57
56
58
57
<div class="flexr gap-10">
59
58
<div>
60
-
<PromiseButton onclick={save}>
59
+
<PromiseButton onclick={save} disabled={project.name.trim() === ""}>
61
60
<div class="flexr gap-5 center">
62
-
<Fa icon={faSquarePlus} /> Create
61
+
<Fa icon={faPlus} /> Create
63
62
</div>
64
63
</PromiseButton>
65
64
</div>
+13
-1
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
+13
-1
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
···
15
15
{#snippet compose()}
16
16
<div>
17
17
<label for="name">Name</label>
18
-
<input required id="name" type="text" bind:value={data.name} />
18
+
<div style="position: relative; display: flex; align-items: center;">
19
+
{#if data.name.trim() === ""}
20
+
<div class="error">Name is required</div>
21
+
{/if}
22
+
<input required id="name" type="text" bind:value={data.name} />
23
+
</div>
19
24
</div>
20
25
21
26
<h2>Compose</h2>
···
31
36
&:not(:first-child) {
32
37
margin-top: 15px;
33
38
}
39
+
}
40
+
41
+
.error {
42
+
color: var(--red);
43
+
position: absolute;
44
+
margin-left: 10px;
45
+
font-style: italic;
34
46
}
35
47
</style>
+1
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
+1
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
···
103
103
<div style="color: var(--peach); margin-bottom: 10px;">* Unsaved changes</div>
104
104
<div class="flexr gap-10">
105
105
<div>
106
-
<PromiseButton onclick={save}>
106
+
<PromiseButton onclick={save} disabled={copy.name.trim() === ""}>
107
107
<div class="flexr gap-5 center">
108
108
<Fa icon={faSave} /> Save
109
109
</div>