fix: prevent hypen at start or end of organzation or domain name (#340)

* fix: adding hypen to start or end of org or domain name

* fix: add org name validation to settings page

* chore: remove unnecessary variable use

* chore: remove error reset function

* Update OrgSettings.svelte

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Org/Settings/OrgSettings.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { goto } from '$app/navigation';
   import { Grid, Row, Column } from 'carbon-components-svelte';
   import FlashFilled from 'carbon-icons-svelte/lib/FlashFilled.svelte';
@@ -12,8 +12,18 @@
   import SectionTitle from '../SectionTitle.svelte';
   import { t } from '$lib/utils/functions/translations';
   import { isFreePlan } from '$lib/utils/store/org';
+  import { updateOrgNameValidation } from '$lib/utils/functions/validator';
 
   let avatar;
+
+  type Error = {
+    orgName: string;
+  };
+
+  let errors: Error = {
+    orgName: ''
+  };
+
   let loading = false;
   const themes = {
     rose: 'theme-rose',
@@ -42,11 +52,18 @@
   }
 
   async function handleUpdate() {
+    errors = updateOrgNameValidation($currentOrg.name) as Error;
+
+    if (Object.values(errors).length) {
+      loading = false;
+      return;
+    }
+
     try {
       loading = true;
 
       const updates = {
-        name: $currentOrg.name
+        name: $currentOrg.name,
       };
 
       if (avatar) {
@@ -108,6 +125,7 @@
         label={$t('settings.organization.organization_profile.organization_name')}
         bind:value={$currentOrg.name}
         className="w-full lg:w-60 mb-5"
+        errorMessage={errors.orgName}
       />
       <UploadImage
         bind:avatar

apps/dashboard/src/lib/utils/functions/validator.js

@@ -3,10 +3,20 @@ import z from 'zod';
 import { validateEmail } from './validateEmail';
 
 const getOrgNameValidation = () =>
-  z.string().min(5, { message: 'Organization must contain 5 or more characters' });
+  z
+    .string()
+    .min(5, { message: 'Organization must contain 5 or more characters' })
+    .refine((val) => !/^[-]|[-]$/.test(val), {
+      message: 'Organization name cannot start or end with a hyphen'
+    });
 
 const getSiteNameValidation = () =>
-  z.string().min(5, { message: 'Site name must contain 5 or more characters' });
+  z
+    .string()
+    .min(5, { message: 'Site name must contain 5 or more characters' })
+    .refine((val) => !/^[-]|[-]$/.test(val), {
+      message: 'Site name cannot start or end with a hyphen'
+    });
 
 const getNewsfeedValidation = () =>
   z.string().min(5, { message: 'Field must contain 5 or more characters' });
@@ -242,6 +252,14 @@ export const createOrgValidation = (fields = {}) => {
   return processErrors(error);
 };
 
+export const updateOrgNameValidation = (orgName) => {
+  const schema = z.object({
+    orgName: getOrgNameValidation()
+  });
+  const { error } = schema.safeParse({ orgName });
+
+  return processErrors(error);
+};
 export const updateOrgSiteNameValidation = (siteName) => {
   const schema = z.object({
     siteName: getSiteNameValidation()