Fix: Refactored App.vue

src/components/SettingsPrompt/SettingsPrompt.vue

@@ -64,18 +64,9 @@
                                     : 'mdi-eye-off-outline'
                             "
                             :type="tokenVisibility ? 'text' : 'password'"
-                            :rules="[
-                                rules.uppercase,
-                                rules.lowercase,
-                                rules.min,
-                                rules.required,
-                                rules.special,
-                                rules.number,
-                            ]"
                             :error="!validateAccessToken()"
                             :error-messages="errorMessage"
                             @click:append-inner="toggleTokenVisibility()"
-                            @update:model-value="validateAccessToken()"
                             persistent-placeholder
                         >
                             <template v-slot:append>
@@ -89,7 +80,6 @@
                                             "
                                         ></v-icon>
                                     </template>
-
                                     Copy to clipboard
                                 </v-tooltip>
                             </template>
@@ -102,7 +92,6 @@
                                             @click="regenerateAccessToken"
                                         ></v-icon>
                                     </template>
-
                                     Generate new token
                                 </v-tooltip>
                             </template>
@@ -160,11 +149,12 @@ import { Ref, ref, watch } from 'vue';
  * Composables
  */
 const { writeClipboardText } = useClipboard();
-const { rules, generateValidToken } = useTokenGenerator();
+const { defaultRules, generateValidToken } = useTokenGenerator();
 
 /**
  * Data
  */
+const accessToken = ref('');
 const isAccessTokenValid = ref(false);
 const errorMessage: Ref<string[]> = ref([]);
 const tokenVisibility = ref(false);
@@ -176,31 +166,42 @@ const streamRegexAndCaptureAreaSettings = ref(false);
  * Dialog visibility
  */
 const dialog = ref(false);
+
 watch(
     () => dialog.value,
     (value) => {
         if (value) {
             // generate token if empty
-            if (accessToken.value === '') regenerateAccessToken();
+            if (accessToken.value === '') {
+                regenerateAccessToken();
+                return;
+            } else {
+                // try to validate token if not empty
+                errorMessage.value = Object.values(defaultRules)
+                    .map((rule) => rule(accessToken.value))
+                    .filter((value) => typeof value === 'string') as string[];
+            }
         } else {
             // reset validation state
-            const isValid = Object.values(rules).every(
+            const isValid = Object.values(defaultRules).every(
                 (rule) => rule(accessToken.value) === true
             );
 
             if (isAccessTokenValid.value === isValid) {
-                errorMessage.value = Object.values(rules)
+                errorMessage.value = Object.values(defaultRules)
                     .map((rule) => rule(accessToken.value))
                     .filter((value) => typeof value === 'string') as string[];
             }
         }
     }
 );
 
-/**
- * Access token
- */
-const accessToken = ref('');
+watch(
+    () => accessToken.value,
+    (value) => {
+        validate();
+    }
+);
 
 /**
  * Start the session
@@ -242,30 +243,46 @@ async function regenerateAccessToken() {
 /**
  * Function which will validate the access token and notifies the user
  */
-function validateAccessToken() {
-    const isValid = Object.values(rules).every(
+function validate() {
+    const isValid = Object.values(defaultRules).every(
         (rule) => rule(accessToken.value) === true
     );
 
-    if (isAccessTokenValid.value === isValid) {
-        return isValid;
-    }
-
     isAccessTokenValid.value = isValid;
 
+    errorMessage.value = Object.values(defaultRules)
+        .map((rule) => rule(accessToken.value))
+        .filter((value) => typeof value === 'string') as string[];
+
     if (!isValid && isSessionActive.value) {
         stopSession();
         useNotificationSystem().createErrorNotification({
             title: 'Session stopped',
             message: 'The access token is invalid',
         });
-    } else if (isValid) {
+    } else if (isValid && errorMessage.value.length === 0) {
         useNotificationSystem().createSuccessNotification({
             title: 'The access token is valid',
         });
     }
+}
 
-    return isValid;
+/**
+ * Function which will validate the access token and returns a boolean
+ * @returns boolean
+ */
+function validateAccessToken() {
+    // check if the access token is valid via the defaultRules
+    const isValid = Object.values(defaultRules).every(
+        (rule) => rule(accessToken.value) === true
+    );
+
+    if (isAccessTokenValid.value === isValid) {
+        return true;
+    }
+
+    isAccessTokenValid.value = isValid;
+    return false;
 }
 
 /**

src/composables/useClipboard/useClipboard.test.ts

@@ -20,6 +20,9 @@ describe('useClipboard Composable', () => {
         const text = 'Hello, world!';
         const result = await writeClipboardText(text);
 
+        /**
+         * It is currently not possible to write into the clipboard when run in a GitHub Action therefore always true
+         */
         if (result) {
             expect(result).toBe(true);
             expect(clipboardText.value).toBe(text);
@@ -35,6 +38,9 @@ describe('useClipboard Composable', () => {
 
         const result = await readClipboardText();
 
+        /**
+         * It is currently not possible to read the clipboard when run in a GitHub Action therefore always true
+         */
         if (result) {
             expect(result).toBe(text);
         } else {

src/composables/useTokenGenerator/useTokenGenerator.test.ts

@@ -2,7 +2,8 @@ import { describe, it, expect } from 'vitest';
 import useTokenGenerator from '@/composables/useTokenGenerator/useTokenGenerator';
 
 describe('useTokenGenerator Composable', () => {
-    const { generateValidToken, rules, minTokenLenght } = useTokenGenerator();
+    const { generateValidToken, defaultRules, minTokenLenght } =
+        useTokenGenerator();
 
     it('generateToken returns a string', () => {
         const token = generateValidToken();
@@ -18,12 +19,12 @@ describe('useTokenGenerator Composable', () => {
         const runs = 100;
         for (let index = 0; index < runs; index++) {
             const token = generateValidToken();
-            expect(rules.required(token)).toBe(true);
-            expect(rules.min(token)).toBe(true);
-            expect(rules.uppercase(token)).toBe(true);
-            expect(rules.lowercase(token)).toBe(true);
-            expect(rules.special(token)).toBe(true);
-            expect(rules.number(token)).toBe(true);
+            expect(defaultRules.required(token)).toBe(true);
+            expect(defaultRules.min(token)).toBe(true);
+            expect(defaultRules.uppercase(token)).toBe(true);
+            expect(defaultRules.lowercase(token)).toBe(true);
+            expect(defaultRules.special(token)).toBe(true);
+            expect(defaultRules.number(token)).toBe(true);
         }
     });
 });

src/composables/useTokenGenerator/useTokenGenerator.ts

@@ -16,9 +16,9 @@ export default function useTokenGenerator() {
     const minTokenLenght = ref(8);
 
     /**
-     * Rules for the access token
+     * Default Rules for the access token
      */
-    const rules = {
+    const defaultRules = {
         required: (value: string) =>
             !!value || 'An access token is required to start a session',
         min: (v: string) =>
@@ -31,7 +31,7 @@ export default function useTokenGenerator() {
         special: (v: string) =>
             /[\W_]/.test(v) || 'Must include at least one special character',
         number: (v: string) =>
-            /[0-9]*/.test(v) || 'Must include at least one number',
+            /[0-9]+/.test(v) || 'Must include at least one number',
     };
 
     /**
@@ -62,46 +62,29 @@ export default function useTokenGenerator() {
         return generatedToken;
     };
 
-    /**
-     * Generate multiple tokens using the generateToken function, but they are not guaranteed to be valid tokens (they may not meet the rules)
-     * @param count
-     * @returns
-     */
-    const generateMultipleTokens = (count: number = 16): string[] => {
-        const tokens: string[] = [];
-        for (let i = 0; i < count; i++) {
-            const token = generateToken();
-            tokens.push(token);
-        }
-        return tokens;
-    };
-
     /**
      * Generate a valid token using the rules defined in the rules object
      * @returns a valid token
      */
     const generateValidToken = (): string => {
-        const tokens = generateMultipleTokens();
-        for (const token of tokens) {
-            if (
-                rules.lowercase(token) === true &&
-                rules.uppercase(token) === true &&
-                rules.special(token) === true &&
-                rules.number(token) === true &&
-                rules.min(token) === true
-            ) {
-                return token;
-            }
+        const token = generateToken();
+        if (
+            defaultRules.lowercase(token) === true &&
+            defaultRules.uppercase(token) === true &&
+            defaultRules.special(token) === true &&
+            defaultRules.number(token) === true &&
+            defaultRules.min(token) === true
+        ) {
+            return token;
         }
         return generateValidToken();
     };
 
     return {
         characterSet,
         minTokenLenght,
-        rules,
+        defaultRules,
         generateToken,
-        generateMultipleTokens,
         generateValidToken,
     };
 }