From 7172e8a384aef44d890fe5ae9c7ea3928533420b Mon Sep 17 00:00:00 2001
From: mslaursen <martin_laursen21@hotmail.com>
Date: Sat, 9 Aug 2025 02:30:49 +0200
Subject: [PATCH 1/2] update(Frontend v2): Input validation

---
 frontend/src/components/steps/ProjectNameStep.vue |  8 ++------
 frontend/src/utils/validation.ts                  | 10 ++++++++++
 2 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/utils/validation.ts

diff --git a/frontend/src/components/steps/ProjectNameStep.vue b/frontend/src/components/steps/ProjectNameStep.vue
index bf33c64..f811efd 100644
--- a/frontend/src/components/steps/ProjectNameStep.vue
+++ b/frontend/src/components/steps/ProjectNameStep.vue
@@ -5,7 +5,6 @@
     <div class="input-group">
       <div class="label-group">
         <label class="project-name-label" for="project-name">Project Name</label>
-        <div class="project-name-length-indicator">{{ localProjectName.length }} / 50</div>
       </div>
       <div class="input-horizontal">
         <input
@@ -19,7 +18,7 @@
           :value="localProjectName"
           @input="handleInputChange($event)"
           :disabled="projectStore.isProjectNameConfirmed"
-          maxlength="50"
+          maxlength="100"
         />
         <button
           class="confirm-btn"
@@ -40,16 +39,13 @@
 <script setup>
 import { ref, onMounted } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
+import { isValidProjectName } from "@/utils/validation"
 
 const projectStore = useProjectStore()
 const localProjectName = ref("asd")
 const showError = ref(false)
 const errorMessage = ref("")
 
-const isValidProjectName = (name) => {
-  return /^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(name)
-}
-
 const handleInputChange = (event) => {
   localProjectName.value = event.target.value
 
diff --git a/frontend/src/utils/validation.ts b/frontend/src/utils/validation.ts
new file mode 100644
index 0000000..0189373
--- /dev/null
+++ b/frontend/src/utils/validation.ts
@@ -0,0 +1,10 @@
+export const patterns = {
+  boundedStr: /^.{1,100}$/,
+  snakeCase: /^[a-z][a-z0-9_]*$/,
+  enumStr: /^[a-zA-Z][a-zA-Z0-9_]*$/,
+  projectName: /^[a-zA-Z_][a-zA-Z0-9_-]*$/,
+}
+
+export const isValidProjectName = (value: string): boolean => {
+  return patterns.boundedStr.test(value) && patterns.projectName.test(value)
+}

From 7da5a1308366ef937a0a7de6b24334e0a36eacc7 Mon Sep 17 00:00:00 2001
From: mslaursen <martin_laursen21@hotmail.com>
Date: Sat, 9 Aug 2025 14:17:34 +0200
Subject: [PATCH 2/2] Further validation + toasts

---
 frontend/package-lock.json                    | 12 ++-
 frontend/package.json                         |  3 +-
 frontend/src/App.vue                          |  4 +-
 frontend/src/assets/main.css                  | 20 +++++
 frontend/src/components/ValidatedInput.vue    | 90 +++++++++++++++++++
 .../components/modal/AddEnumValueModal.vue    | 10 ++-
 .../src/components/modal/AddFieldModal.vue    | 11 ++-
 .../src/components/modal/AddRelationModal.vue | 13 ++-
 .../components/modal/EditEnumValueModal.vue   | 12 ++-
 .../src/components/modal/EditFieldModal.vue   | 11 ++-
 .../components/modal/EditRelationModal.vue    | 11 ++-
 .../src/components/modal/RenameNodeModal.vue  | 15 +++-
 .../components/schema_editor/EnumEditor.vue   | 24 +++--
 .../components/schema_editor/SchemaEditor.vue | 13 ++-
 .../src/components/steps/ProjectNameStep.vue  |  4 +-
 frontend/src/main.ts                          | 10 +++
 frontend/src/utils/toast.ts                   | 14 +++
 frontend/src/utils/validation.ts              | 30 ++++++-
 18 files changed, 270 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/components/ValidatedInput.vue
 create mode 100644 frontend/src/utils/toast.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e4a775e..7ba709a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,8 @@
         "@vue-flow/core": "^1.45.0",
         "cytoscape": "^3.32.1",
         "pinia": "^3.0.3",
-        "vue": "^3.5.17"
+        "vue": "^3.5.17",
+        "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.2",
@@ -5249,6 +5250,15 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.12",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0eafca3..97f7b8e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,8 @@
     "@vue-flow/core": "^1.45.0",
     "cytoscape": "^3.32.1",
     "pinia": "^3.0.3",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index cfad2b1..9a92e55 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,7 +37,9 @@ import DatabaseStep from "./components/steps/DatabaseStep.vue"
 import SchemaStep from "./components/steps/SchemaStep.vue"
 import GlobalModal from "@/components/modal/GlobalModal.vue"
 
-const steps: Array<any> = [SchemaStep, ProjectNameStep, DatabaseStep, SchemaStep]
+import type { Component } from "vue"
+
+const steps: Component[] = [ProjectNameStep, DatabaseStep, SchemaStep]
 </script>
 
 <style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 89dbaa4..e5e2536 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -8,5 +8,25 @@ body {
   --color-secondary: #dcebfe;
   --color-success: #7fbc8c;
   --color-danger: #ff6b6b;
+  --color-warning: #f5c26b;
   --color-background: #f4f4f0;
 }
+
+.Vue-Toastification__toast {
+  border: 2px solid black;
+  border-radius: 0px !important;
+  color: black !important;
+  box-shadow: 2px 2px 0px !important;
+}
+
+.Vue-Toastification__toast--success.container-class {
+  background-color: var(--color-success);
+}
+
+.Vue-Toastification__toast--error.container-class {
+  background-color: var(--color-danger);
+}
+
+.Vue-Toastification__toast--warning.container-class {
+  background-color: var(--color-warning);
+}
diff --git a/frontend/src/components/ValidatedInput.vue b/frontend/src/components/ValidatedInput.vue
new file mode 100644
index 0000000..7ad03d6
--- /dev/null
+++ b/frontend/src/components/ValidatedInput.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="validated-input">
+    <label v-if="label" class="field-label">{{ label }}</label>
+
+    <input
+      v-bind="$attrs"
+      :value="modelValue"
+      @input="onInput"
+      :class="{ invalid: error }"
+      class="field-input"
+    />
+
+    <p v-if="error" class="error-msg">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue"
+
+interface Props {
+  modelValue: string
+  label?: string
+  validate?: ((value: string) => boolean) | ((value: string) => string | null)
+  errorMessage?: string // used if validate returns boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(["update:modelValue"])
+
+const error = ref<string | null>(null)
+
+const runValidation = (value: string) => {
+  if (!props.validate) {
+    error.value = null
+    return
+  }
+
+  const result = props.validate(value)
+
+  if (typeof result === "boolean") {
+    error.value = result ? null : (props.errorMessage ?? "Invalid value")
+  } else {
+    error.value = result // already string|null from custom function
+  }
+}
+
+const onInput = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value
+  emit("update:modelValue", value)
+  runValidation(value)
+}
+
+watch(
+  () => props.modelValue,
+  (newVal) => runValidation(newVal),
+  { immediate: true },
+)
+</script>
+
+<style scoped>
+.field-label {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.field-input {
+  border: 2px solid black;
+  border-radius: 6px;
+  padding: 0.6rem;
+  background-color: white;
+  width: 100%;
+}
+
+.field-input.invalid {
+  border-color: red;
+}
+
+.error-msg {
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 2px;
+}
+
+.validated-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+</style>
diff --git a/frontend/src/components/modal/AddEnumValueModal.vue b/frontend/src/components/modal/AddEnumValueModal.vue
index b113fa0..f340cfe 100644
--- a/frontend/src/components/modal/AddEnumValueModal.vue
+++ b/frontend/src/components/modal/AddEnumValueModal.vue
@@ -3,12 +3,12 @@
     <div class="input-container">
       <div class="input-group">
         <label class="field-label">Name</label>
-        <input class="field-input" v-model="name" type="text" />
+        <input class="field-input" v-model="name" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
         <label class="field-label">Value</label>
-        <input class="field-input" v-model="value" type="text" />
+        <input class="field-input" v-model="value" type="text" maxlength="100" />
       </div>
     </div>
 
@@ -22,6 +22,8 @@
 import { ref } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
+import { isValidEnumValueName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   enumName: string
@@ -34,6 +36,10 @@ const name = ref("")
 const value = ref("auto()")
 
 const saveEnumValue = () => {
+  if (!isValidEnumValueName(name.value)) {
+    showDangerToast(warningMessages.enumValueName)
+    return
+  }
   projectStore.addEnumValue(props.enumName, {
     name: name.value,
     value: value.value,
diff --git a/frontend/src/components/modal/AddFieldModal.vue b/frontend/src/components/modal/AddFieldModal.vue
index 2188857..ce6aec5 100644
--- a/frontend/src/components/modal/AddFieldModal.vue
+++ b/frontend/src/components/modal/AddFieldModal.vue
@@ -3,7 +3,7 @@
     <div class="input-container">
       <div class="input-group">
         <label class="field-label">Field name</label>
-        <input class="field-input" v-model="fieldName" type="text" />
+        <input class="field-input" v-model="fieldName" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
@@ -44,10 +44,11 @@
           </option>
         </select>
         <input
+          v-else
           class="field-input"
           v-model="defaultValue"
           type="text"
-          v-else
+          maxlength="100"
           :disabled="isPrimaryKey || createdAtTimestamp || updatedAtTimestamp"
         />
       </div>
@@ -77,6 +78,8 @@ import { ref, watch } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { EnumT, FieldType } from "@/types/types"
+import { isValidFieldName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   id: string
@@ -143,6 +146,10 @@ watch(type, (newVal) => {
 
 const saveField = () => {
   if (!fieldName.value || !type.value) return
+  if (!isValidFieldName(fieldName.value)) {
+    showDangerToast(warningMessages.fieldName)
+    return
+  }
   projectStore.addField(props.id, {
     name: fieldName.value,
     type: type.value as FieldType,
diff --git a/frontend/src/components/modal/AddRelationModal.vue b/frontend/src/components/modal/AddRelationModal.vue
index 355a891..0263e73 100644
--- a/frontend/src/components/modal/AddRelationModal.vue
+++ b/frontend/src/components/modal/AddRelationModal.vue
@@ -3,7 +3,7 @@
     <div class="input-container">
       <div class="input-group">
         <label class="relation-label">Field name</label>
-        <input class="relation-input" v-model="fieldName" type="text" />
+        <input class="relation-input" v-model="fieldName" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
@@ -27,7 +27,7 @@
 
       <div class="input-group">
         <label class="relation-label">Back populates</label>
-        <input class="relation-input" v-model="backPopulates" type="text" />
+        <input class="relation-input" v-model="backPopulates" type="text" maxlength="100" />
       </div>
     </div>
 
@@ -47,6 +47,9 @@
 import { ref, computed } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
+import type { OnDeleteType } from "@/types/types"
+import { isValidFieldName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   id: string
@@ -67,11 +70,15 @@ const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id
 
 const saveSelect = () => {
   if (!selectedNodeId.value || !fieldName.value) return
+  if (!isValidFieldName(fieldName.value)) {
+    showDangerToast(warningMessages.fieldName)
+    return
+  }
   projectStore.addRelation(props.id, selectedNodeId.value, {
     fieldName: fieldName.value,
     targetModel: selectedNodeId.value,
     backPopulates: backPopulates.value,
-    onDelete: onDelete.value,
+    onDelete: onDelete.value as OnDeleteType,
     isNullable: nullable.value,
     isUnique: unique.value,
     isIndex: indexed.value,
diff --git a/frontend/src/components/modal/EditEnumValueModal.vue b/frontend/src/components/modal/EditEnumValueModal.vue
index 95ceafa..ebf42f3 100644
--- a/frontend/src/components/modal/EditEnumValueModal.vue
+++ b/frontend/src/components/modal/EditEnumValueModal.vue
@@ -3,12 +3,12 @@
     <div class="input-container">
       <div class="input-group">
         <label class="field-label">Name</label>
-        <input class="field-input" v-model="name" type="text" />
+        <input class="field-input" v-model="name" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
         <label class="field-label">Value</label>
-        <input class="field-input" v-model="value" type="text" />
+        <input class="field-input" v-model="value" type="text" maxlength="100" />
       </div>
     </div>
 
@@ -23,6 +23,8 @@ import { ref } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { EnumValue } from "@/types/types"
+import { isValidEnumValueName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   enumName: string
@@ -36,6 +38,10 @@ const name = ref(props.enumValue.name)
 const value = ref(props.enumValue.value)
 
 const saveEnumValue = () => {
+  if (!isValidEnumValueName(name.value)) {
+    showDangerToast(warningMessages.enumValueName)
+    return
+  }
   projectStore.updateEnumValue(props.enumName, props.enumValue.name, {
     name: name.value,
     value: value.value,
@@ -101,3 +107,5 @@ const saveEnumValue = () => {
   box-shadow: none;
 }
 </style>
+
+function showDangerToast(modelName: any) { throw new Error("Function not implemented."); }
diff --git a/frontend/src/components/modal/EditFieldModal.vue b/frontend/src/components/modal/EditFieldModal.vue
index 4e53897..ed4fab2 100644
--- a/frontend/src/components/modal/EditFieldModal.vue
+++ b/frontend/src/components/modal/EditFieldModal.vue
@@ -3,7 +3,7 @@
     <div class="input-container">
       <div class="input-group">
         <label class="field-label">Field name</label>
-        <input class="field-input" v-model="fieldName" type="text" />
+        <input class="field-input" v-model="fieldName" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
@@ -44,10 +44,11 @@
           </option>
         </select>
         <input
+          v-else
           class="field-input"
           v-model="defaultValue"
           type="text"
-          v-else
+          maxlength="100"
           :disabled="isPrimaryKey || createdAtTimestamp || updatedAtTimestamp"
         />
       </div>
@@ -78,6 +79,8 @@ import { ref, onMounted, watch } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { EnumT, RelationalField } from "@/types/types"
+import { isValidFieldName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   id: string
@@ -153,6 +156,10 @@ watch(type, (newVal) => {
 })
 
 const saveField = () => {
+  if (!isValidFieldName(fieldName.value)) {
+    showDangerToast(warningMessages.fieldName)
+    return
+  }
   projectStore.updateField(props.id, props.field.name, {
     name: fieldName.value,
     type: type.value,
diff --git a/frontend/src/components/modal/EditRelationModal.vue b/frontend/src/components/modal/EditRelationModal.vue
index 1798958..7a3adfa 100644
--- a/frontend/src/components/modal/EditRelationModal.vue
+++ b/frontend/src/components/modal/EditRelationModal.vue
@@ -3,7 +3,7 @@
     <div class="input-container">
       <div class="input-group">
         <label class="relation-label">Field name</label>
-        <input class="relation-input" v-model="fieldName" type="text" />
+        <input class="relation-input" v-model="fieldName" type="text" maxlength="100" />
       </div>
 
       <div class="input-group">
@@ -49,6 +49,9 @@ import { ref, computed, onMounted } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
 import type { RelationalRelationField } from "@/types.types"
+import { isValidFieldName, warningMessages } from "@/utils/validation"
+import type { OnDeleteType } from "@/types/types"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   id: string
@@ -82,11 +85,15 @@ const filteredNodes = computed(() => projectStore.nodes.filter((node) => node.id
 
 const saveChanges = () => {
   if (!selectedNodeId.value || !fieldName.value) return
+  if (!isValidFieldName(fieldName.value)) {
+    showDangerToast(warningMessages.fieldName)
+    return
+  }
   projectStore.updateRelation(props.id, props.relation.targetModel, props.relation.fieldName, {
     fieldName: fieldName.value,
     targetModel: selectedNodeId.value,
     backPopulates: backPopulates.value,
-    onDelete: onDelete.value,
+    onDelete: onDelete.value as OnDeleteType,
     isNullable: nullable.value,
     isUnique: unique.value,
     isIndex: indexed.value,
diff --git a/frontend/src/components/modal/RenameNodeModal.vue b/frontend/src/components/modal/RenameNodeModal.vue
index d635747..2c68551 100644
--- a/frontend/src/components/modal/RenameNodeModal.vue
+++ b/frontend/src/components/modal/RenameNodeModal.vue
@@ -3,7 +3,7 @@
     <div class="input-container">
       <div class="input-group">
         <label class="field-label">New model name</label>
-        <input class="field-input" v-model="newNodeId" type="text" />
+        <input class="field-input" v-model="nodeId" type="text" maxlength="100" />
       </div>
     </div>
 
@@ -17,6 +17,8 @@
 import { ref } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { useModalStore } from "@/stores/useModalStore"
+import { isValidModelName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const props = defineProps<{
   id: string
@@ -25,15 +27,20 @@ const props = defineProps<{
 const projectStore = useProjectStore()
 const modalStore = useModalStore()
 
-const newNodeId = ref(props.id)
+const nodeId = ref(props.id)
 
 const rename = () => {
-  if (!newNodeId.value.trim() || newNodeId.value === props.id) {
+  const newNodeId = nodeId.value.trim()
+  if (!isValidModelName(newNodeId)) {
+    showDangerToast(warningMessages.modelName)
+    return
+  }
+  if (!newNodeId || nodeId.value === props.id) {
     modalStore.close()
     return
   }
 
-  projectStore.renameNode(props.id, newNodeId.value.trim())
+  projectStore.renameNode(props.id, newNodeId)
   modalStore.close()
 }
 </script>
diff --git a/frontend/src/components/schema_editor/EnumEditor.vue b/frontend/src/components/schema_editor/EnumEditor.vue
index 118740a..f1f6180 100644
--- a/frontend/src/components/schema_editor/EnumEditor.vue
+++ b/frontend/src/components/schema_editor/EnumEditor.vue
@@ -11,7 +11,7 @@
               placeholder="Enter new enum name"
               v-model="newEnumName"
               @keyup.enter="createEnum"
-              maxlength="50"
+              maxlength="100"
             />
             <button class="confirm-btn" @click="createEnum" :disabled="!newEnumName">
               <svg
@@ -50,6 +50,7 @@
               @click.stop
               @keyup.enter="handleEditToggle(enumItem)"
               ref="enumNameInput"
+              maxlength="100"
             />
           </div>
           <div class="enum-item-actions">
@@ -154,6 +155,8 @@ import { useModalStore } from "@/stores/useModalStore"
 import AddEnumValueModal from "@/components/modal/AddEnumValueModal.vue"
 import EditEnumValueModal from "@/components/modal/EditEnumValueModal.vue"
 import type { EnumT, EnumValue } from "@/types/types"
+import { isValidEnumName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const projectStore = useProjectStore()
 const modalStore = useModalStore()
@@ -188,6 +191,10 @@ const selectEnum = (e: EnumT) => {
 const createEnum = () => {
   const name = newEnumName.value.trim()
   if (name === "") return
+  if (!isValidEnumName(name)) {
+    showDangerToast(warningMessages.enumName)
+    return
+  }
   const newEnum = projectStore.addEnum(name)
   newEnumName.value = ""
   selectEnum(newEnum)
@@ -210,20 +217,19 @@ const handleEditToggle = (enumItem: EnumT) => {
   } else {
     editingEnumName.value = enumItem.name
     editedEnumName.value = enumItem.name
-    nextTick(() => {
-      if (enumNameInput.value) {
-        enumNameInput.value.focus()
-      }
-    })
   }
 }
 
 const saveEnumName = (enumItem: EnumT) => {
   const newName = editedEnumName.value.trim()
   if (newName && newName !== enumItem.name) {
-    projectStore.updateEnumName(enumItem.name, newName)
-    if (selectedEnum.value?.name === enumItem.name) {
-      selectedEnum.value.name = newName
+    if (!isValidEnumName(newName)) {
+      showDangerToast(warningMessages.enumName)
+    } else {
+      projectStore.updateEnumName(enumItem.name, newName)
+      if (selectedEnum.value?.name === enumItem.name) {
+        selectedEnum.value.name = newName
+      }
     }
   }
   editingEnumName.value = null
diff --git a/frontend/src/components/schema_editor/SchemaEditor.vue b/frontend/src/components/schema_editor/SchemaEditor.vue
index f85dd96..f0d22b9 100644
--- a/frontend/src/components/schema_editor/SchemaEditor.vue
+++ b/frontend/src/components/schema_editor/SchemaEditor.vue
@@ -2,7 +2,6 @@
   <div class="vue-flow-container">
     <div class="vue-flow-viewport">
       <div class="viewport-wrapper">
-        <button @click="console.log(projectStore.callGenerateEndpoint())">ASD</button>
         <div class="toggle-grid-button" @click="showGrid = !showGrid">#</div>
         <VueFlow
           v-model:nodes="projectStore.nodes"
@@ -37,6 +36,7 @@
                 placeholder="Enter Model Name"
                 v-model="modelName"
                 @keyup.enter="handleCreateClick"
+                maxlength="100"
               />
               <button class="create-model-btn" @click="handleCreateClick">
                 <svg
@@ -90,6 +90,8 @@ import { VueFlow } from "@vue-flow/core"
 import { useModalStore } from "@/stores/useModalStore"
 import type { RelationalRelationField, RelationalField } from "@/types.types"
 import { Background } from "@vue-flow/background"
+import { isValidModelName, warningMessages } from "@/utils/validation"
+import { showDangerToast } from "@/utils/toast"
 
 const projectStore = useProjectStore()
 const modalStore = useModalStore()
@@ -99,8 +101,13 @@ const showInput = ref(false)
 const showGrid = ref(true)
 
 const handleCreateClick = () => {
-  if (modelName.value.trim() === "") return
-  projectStore.createNode(modelName.value)
+  const newModelName = modelName.value.trim()
+  if (newModelName === "") return
+  if (!isValidModelName(newModelName)) {
+    showDangerToast(warningMessages.modelName)
+    return
+  }
+  projectStore.createNode(newModelName)
   modelName.value = ""
   showInput.value = false
 }
diff --git a/frontend/src/components/steps/ProjectNameStep.vue b/frontend/src/components/steps/ProjectNameStep.vue
index f811efd..6ceb2e3 100644
--- a/frontend/src/components/steps/ProjectNameStep.vue
+++ b/frontend/src/components/steps/ProjectNameStep.vue
@@ -36,7 +36,7 @@
   </main>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from "vue"
 import { useProjectStore } from "@/stores/useProjectStore"
 import { isValidProjectName } from "@/utils/validation"
@@ -46,7 +46,7 @@ const localProjectName = ref("asd")
 const showError = ref(false)
 const errorMessage = ref("")
 
-const handleInputChange = (event) => {
+const handleInputChange = (event: { target: { value: string } }) => {
   localProjectName.value = event.target.value
 
   if (localProjectName.value.length === 0) {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 4bb39bf..f1dba80 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,11 +1,21 @@
 import "./assets/main.css"
+import "vue-toastification/dist/index.css"
 
 import { createApp } from "vue"
 import { createPinia } from "pinia"
+import Toast, { POSITION, type PluginOptions } from "vue-toastification"
 import App from "./App.vue"
 
 const app = createApp(App)
 
 app.use(createPinia())
 
+const options: PluginOptions = {
+  position: POSITION.TOP_CENTER,
+  shareAppContext: true,
+  containerClassName: "container-class",
+}
+
+app.use(Toast, options)
+
 app.mount("#app")
diff --git a/frontend/src/utils/toast.ts b/frontend/src/utils/toast.ts
new file mode 100644
index 0000000..9e90554
--- /dev/null
+++ b/frontend/src/utils/toast.ts
@@ -0,0 +1,14 @@
+import { useToast } from "vue-toastification"
+const toast = useToast()
+
+export const showSuccessToast = (msg: string) => {
+  toast.success(msg, { toastClassName: "container-class" })
+}
+
+export const showDangerToast = (msg: string) => {
+  toast.error(msg, { toastClassName: "container-class" })
+}
+
+export const showWarningToast = (msg: string) => {
+  toast.warning(msg, { toastClassName: "container-class" })
+}
diff --git a/frontend/src/utils/validation.ts b/frontend/src/utils/validation.ts
index 0189373..fb78424 100644
--- a/frontend/src/utils/validation.ts
+++ b/frontend/src/utils/validation.ts
@@ -1,10 +1,34 @@
-export const patterns = {
+const patterns = {
   boundedStr: /^.{1,100}$/,
   snakeCase: /^[a-z][a-z0-9_]*$/,
+  pascalCase: /^[A-Z][a-z]*$/,
   enumStr: /^[a-zA-Z][a-zA-Z0-9_]*$/,
-  projectName: /^[a-zA-Z_][a-zA-Z0-9_-]*$/,
+  variableStr: /^[a-zA-Z_][a-zA-Z0-9_-]*$/,
 }
 
 export const isValidProjectName = (value: string): boolean => {
-  return patterns.boundedStr.test(value) && patterns.projectName.test(value)
+  return patterns.boundedStr.test(value) && patterns.variableStr.test(value)
+}
+
+export const isValidModelName = (value: string): boolean => {
+  return patterns.boundedStr.test(value) && patterns.variableStr.test(value)
+}
+
+export const isValidEnumName = (value: string): boolean => {
+  return patterns.boundedStr.test(value) && patterns.pascalCase.test(value)
+}
+export const isValidEnumValueName = (value: string): boolean => {
+  return patterns.boundedStr.test(value) && patterns.variableStr.test(value)
+}
+
+export const isValidFieldName = (value: string): boolean => {
+  return patterns.boundedStr.test(value) && patterns.snakeCase.test(value)
+}
+
+export const warningMessages = {
+  projectName: "Use 1-100 characters. Start with a letter or underscore. Example: my_project1",
+  modelName: "Use 1-100 characters. Start with a letter or underscore. Example: userModel_1",
+  enumName: "Use PascalCase (start with uppercase). Example: UserStatus",
+  enumValueName: "Use 1-100 characters. Start with a letter or underscore. Example: active_status",
+  fieldName: "Use lowercase snake_case. Example: user_name",
 }