From d76442434fbf3f3be8b7de10698ef209bcfbbdce Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Mon, 13 Nov 2023 18:09:36 +0800
Subject: [PATCH] Fix #19

---
 backend/stack.ts               | 6 +++---
 frontend/src/pages/Compose.vue | 9 +++++++--
 frontend/src/styles/main.scss  | 4 ++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/backend/stack.ts b/backend/stack.ts
index 311bddb..fd22e30 100644
--- a/backend/stack.ts
+++ b/backend/stack.ts
@@ -72,9 +72,9 @@ export class Stack {
     }
 
     validate() {
-        // Check name, allows [a-z][A-Z][0-9] _ - only
-        if (!this.name.match(/^[a-zA-Z0-9_-]+$/)) {
-            throw new ValidationError("Stack name can only contain [a-z][A-Z][0-9] _ - only");
+        // Check name, allows [a-z][0-9] _ - only
+        if (!this.name.match(/^[a-z0-9_-]+$/)) {
+            throw new ValidationError("Stack name can only contain [a-z][0-9] _ - only");
         }
 
         // Check YAML format
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index d47c6b7..4ccb0b6 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -68,9 +68,10 @@
                         <h4 class="mb-3">{{ $t("general") }}</h4>
                         <div class="shadow-box big-padding mb-3">
                             <!-- Stack Name -->
-                            <div class="mb-3">
+                            <div>
                                 <label for="name" class="form-label">{{ $t("stackName") }}</label>
-                                <input id="name" v-model="stack.name" type="text" class="form-control" required>
+                                <input id="name" v-model="stack.name" type="text" class="form-control" required @blur="stackNameToLowercase">
+                                <div class="form-text">Lowercase only</div>
                             </div>
                         </div>
                     </div>
@@ -582,6 +583,10 @@ export default {
             });
         },
 
+        stackNameToLowercase() {
+            this.stack.name = this.stack?.name?.toLowerCase();
+        },
+
     }
 };
 </script>
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
index e69cac3..9065f28 100644
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@@ -680,6 +680,10 @@ code {
     }
 }
 
+.form-text {
+    color: $dark-font-color3;
+}
+
 // Vue Prism Editor bug - workaround
 // https://github.com/koca/vue-prism-editor/issues/87
 /*