A focused Docker Compose management web application.
feat: project name validation
+11
-2
+4
-1
packages/panel/src/routes/(authenticated)/create/+page.svelte
+4
-1
packages/panel/src/routes/(authenticated)/create/+page.svelte
···
70
70
71
71
<div class="flexr gap-10">
72
72
<div>
73
-
<PromiseButton onclick={create} disabled={project.name.trim() === ""}>
73
+
<PromiseButton
74
+
onclick={create}
75
+
disabled={project.name.trim() === "" || !/^[A-Za-z0-9-_]*$/.test(project.name)}
76
+
>
74
77
<div class="flexr gap-5 center">
75
78
<Fa icon={faPlus} /> Create
76
79
</div>
+3
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
+3
packages/panel/src/routes/(authenticated)/projects/EditTabs.svelte
···
26
26
{/if}
27
27
<input required id="name" type="text" bind:value={data.name} />
28
28
</div>
29
+
{#if !/^[A-Za-z0-9-_]*$/.test(data.name)}
30
+
<div style="color: var(--red)">Project name only contain only alphanumeric, underscores and dashes</div>
31
+
{/if}
29
32
</div>
30
33
31
34
<h2>Compose</h2>
+4
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
+4
-1
packages/panel/src/routes/(authenticated)/projects/[project]/+page.svelte
···
116
116
<div style="color: var(--peach); margin-bottom: 10px;">* Unsaved changes</div>
117
117
<div class="flexr gap-10">
118
118
<div>
119
-
<PromiseButton onclick={save} disabled={changes.name.trim() === ""}>
119
+
<PromiseButton
120
+
onclick={save}
121
+
disabled={project.name.trim() === "" || !/^[A-Za-z0-9-_]*$/.test(changes.name)}
122
+
>
120
123
<div class="flexr gap-5 center">
121
124
<Fa icon={faSave} /> Save
122
125
</div>