Allow using username and email in SMTP configuration (#3398)

* Remove isDiscourse check and apply adding email or username for all apps with smtp

* Update packages/playground/src/components/smtp_server.vue

Co-authored-by: Zainab Elgohary <[email protected]>

* Update packages/playground/src/weblets/tf_discourse.vue

Co-authored-by: Zainab Elgohary <[email protected]>

* Validate SMTP username/email

* Fix build

* Apply code scanning fix for overly permissive regular expression range

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Update packages/playground/src/utils/validators.ts

Co-authored-by: Omar Kassem <[email protected]>

* rn validate smtp function

* Rename validate function parameter

* Add doc string for validate smtp function

* - Set validation to limit username
- Add space checker in validator function
- Add unit test for smtp validation function

* - Add min length and max length for the username and Email
- Accept usernames that contain dashs and underscores and it must start with an alphabetical character and validate them

* Add doc string for IsAlphaExpectDashAndUnderscore validator

* Add unit test for IsAlphaExpectDashAndUnderscore function

* Update SMTP input validation msg

* Update SMTP input validation msg

* Remove number validator of first char and add test case for it

* Modify the valitator function to accept numbers too

---------

Co-authored-by: Zainab Elgohary <[email protected]>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Omar Kassem <[email protected]>

packages/playground/src/components/smtp_server.vue

@@ -20,17 +20,23 @@
       <input-validator
         :value="$props.modelValue.username"
         :rules="[
-          validators.required('Email is required.'),
-          validators.isEmail('Please provide a valid email address.'),
-          v => {
-            return isDiscourse ? undefined : validators.isEmail('Please provide a valid email address.')(v);
+          validators.required('Email or Username is required.'),
+          validators.minLength('Username must be at least 2 characters.', 2),
+          validators.maxLength('Email or Username cannot exceed 50 characters.', 50),
+          (v: string) => {
+            return (
+              validators.isEmail('Please provide a valid email address.')(v) &&
+              (validators.IsAlphanumericExpectDashAndUnderscore(
+                'Username should consist of letters, numbers, dashs and underscores only.' 
+              )(v))
+            );
           },
         ]"
         #="{ props }"
       >
-        <input-tooltip :tooltip="isDiscourse ? 'SMTP admin email, Username or API key.' : 'SMTP admin email'">
+        <input-tooltip tooltip="SMTP admin email, Username or API key.">
           <v-text-field
-            label="Admin Email"
+            label="Admin Email or Username"
             placeholder="[email protected]"
             v-model="$props.modelValue.username"
             v-bind="props"
@@ -46,7 +52,7 @@
           :rules="[
             validators.required('Password is required.'),
             validators.minLength('Password must be at least 6 characters.', 6),
-            validators.maxLength('Password cannot exceed 50 characters.', 50),
+            validators.maxLength('Password cannot exceed 69 characters.', 69),
             validators.pattern('Password should not contain whitespaces.', {
               pattern: /^[^\s]+$/,
             }),
@@ -139,7 +145,6 @@ defineProps<{
   tls?: boolean;
   email?: boolean;
   persistent?: boolean;
-  isDiscourse?: boolean;
 }>();
 </script>
 

packages/playground/src/utils/validators.ts

@@ -117,6 +117,22 @@ export function IsAlphanumericExpectUnderscore(msg: string) {
   };
 }
 
+/**
+ * Returns a validation function that checks if the value only contains alphanumeric characters, dashes, and underscores.
+ *
+ * @param {string} msg - The error message to return if the validation fails.
+ *
+ * @returns {(value: string) => { message: string, requiredTrue: boolean }} - A function that takes a string value as input and returns an object with an error message and a requiredTrue flag if the validation fails.
+ */
+
+export function IsAlphanumericExpectDashAndUnderscore(msg: string) {
+  return (value: string) => {
+    if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
+      return { message: msg, requiredTrue: true };
+    }
+  };
+}
+
 export function isAfter(msg: string, date?: string) {
   return (value: string) => {
     if (!validator.isAfter(value, date)) {

packages/playground/src/weblets/tf_discourse.vue

@@ -94,7 +94,7 @@
       </template>
 
       <template #mail>
-        <SmtpServer v-model="smtp" :persistent="true" :tls="true" :is-discourse="true">
+        <SmtpServer v-model="smtp" persistent tls>
           Discourse needs SMTP service so please configure these settings properly.
         </SmtpServer>
       </template>

packages/playground/tests/utils/validators/IsAlphaExpectDashAndUnderscore.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+import { IsAlphanumericExpectDashAndUnderscore } from "../../../src/utils/validators";
+
+const validator = IsAlphanumericExpectDashAndUnderscore(
+  "Username should consist of letters, numbers, dashs and underscores only.",
+);
+
+describe("IsAlphanumericExpectDashAndUnderscore", () => {
+  it("returns an error message for input with spaces", () => {
+    const result = validator("hello world!");
+    expect(result).toEqual({
+      message: "Username should consist of letters, numbers, dashs and underscores only.",
+      requiredTrue: true,
+    });
+  });
+
+  it("returns an error message for input with special characters", () => {
+    const result = validator("hello@world");
+    expect(result).toEqual({
+      message: "Username should consist of letters, numbers, dashs and underscores only.",
+      requiredTrue: true,
+    });
+  });
+
+  it("returns undefined for valid username that contains underscore", () => {
+    const result = validator("hello_world");
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for valid username that contains dash", () => {
+    const result = validator("hello-world");
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for valid username", () => {
+    const result = validator("hello");
+    expect(result).toBeUndefined();
+  });
+
+  it("returns undefined for valid username/email that starts with numbers", () => {
+    const result = validator("4me");
+    expect(result).toBeUndefined();
+  });
+});