Merge remote-tracking branch 'origin/demo_app_v2' into demo_app_v1

Author: Dave3130

src/components/LoginForm.tsx

@@ -12,6 +12,7 @@ const LoginForm: React.FC = () => {
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const { login } = useUser();
   const navigate = useNavigate();
 
@@ -23,15 +24,16 @@ const LoginForm: React.FC = () => {
     const matchedUser = userProfiles.find(u => u.email === email && u.password === password);
     if (!matchedUser) {
       setIsLoading(false);
-      alert('Login failed. Please check your credentials.');
+      setErrorMessage('Login failed. Please check your credentials.');
       return;
     }
     const success = await login(matchedUser.userId.toString(), email);
     setIsLoading(false);
     if (success) {
+      setErrorMessage(null);
       navigate('/products');
     } else {
-      alert('Login failed. Please check your credentials.');
+      setErrorMessage('Login failed. Please check your credentials.');
     }
   };
 
@@ -51,6 +53,14 @@ const LoginForm: React.FC = () => {
 
           {/* Quick user selector keeps demo credentials handy */}
           <form onSubmit={handleSubmit} className="space-y-6">
+                {errorMessage && (
+                  <div
+                    id="login-error"
+                    className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700"
+                  >
+                    {errorMessage}
+                  </div>
+                )}
                 <div>
                   <label className="block text-sm font-medium mb-2 text-gray-700">Quick Select User</label>
                   <select

src/data/userProfiles.ts

@@ -1,26 +1,4 @@
 // Static user profile data for test/demo use
 import { getAssetPath } from '../lib/assetUtils';
 
-export const userProfiles = [
-  {
-    userId: 1,
-    email: 'demo1@example.com',
-    password: 'Qw!@d..**~cwcw',
-    name: 'Demo One',
-    avatar: getAssetPath('/static/avatars/demo1.svg')
-  },
-  {
-    userId: 2,
-    email: 'demo2@example.com',
-    password: '@qqwdSC1eEem__o12',
-    name: 'Demo Two',
-    avatar: getAssetPath('/static/avatars/demo2.svg')
-  },
-  {
-    userId: 3,
-    email: 'testuser@example.com',
-    password: 'test!!1-23Z~ww',
-    name: 'Test User',
-    avatar: getAssetPath('/static/avatars/testuser.svg')
-  }
-];
+export const userProfiles = [];

src/pages/Scenarios.tsx

@@ -8,8 +8,58 @@ import { Toaster } from '../components/ui/toaster';
 const Scenarios: React.FC = () => {
   const [toggleState, setToggleState] = useState(false);
   const [progressValue, setProgressValue] = useState(45);
+  const [lastCopiedLink, setLastCopiedLink] = useState('');
   const toastStyles = 'border-2 shadow-lg rounded-lg px-4 py-3 font-semibold transition-all duration-200 bg-blue-100 border-blue-300 text-blue-800';
 
+  const showCopyToast = (description: string) =>
+    toast({
+      title: 'Link copied',
+      description,
+      className: toastStyles,
+      duration: 800
+    });
+
+  const fallbackCopyToClipboard = (value: string) => {
+    const textarea = document.createElement('textarea');
+    textarea.value = value;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+    document.body.appendChild(textarea);
+    textarea.select();
+    try {
+      document.execCommand('copy');
+    } catch (error) {
+      console.warn('Clipboard fallback failed', error);
+    }
+    document.body.removeChild(textarea);
+  };
+
+  const handleCopyShareLink = () => {
+    const text = document.getElementById('share-link')?.textContent?.trim();
+    if (!text) {
+      return;
+    }
+
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          setLastCopiedLink(text);
+          showCopyToast('The scenario URL is ready to share.');
+        })
+        .catch(() => {
+          fallbackCopyToClipboard(text);
+          setLastCopiedLink(text);
+          showCopyToast('Copied using fallback clipboard support.');
+        });
+    } else {
+      fallbackCopyToClipboard(text);
+      setLastCopiedLink(text);
+      showCopyToast('Copied using fallback clipboard support.');
+    }
+  };
+
   return (
     <div className="min-h-screen py-8">
       <Toaster />
@@ -21,18 +71,18 @@ const Scenarios: React.FC = () => {
           </p>
         </div>
 
-        <div className="grid lg:grid-cols-2 gap-8">
+        <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-2">
           <Card className="bg-white p-8 rounded-xl shadow-lg">
             <div className="flex items-center gap-3 mb-6">
               <div className="p-2 bg-blue-100 text-blue-600 rounded-lg">
                 <CheckCircle className="w-6 h-6" />
               </div>
               <div>
-                <h3 className="text-xl font-bold">Form Field Target</h3>
-                <p className="text-gray-600">Demonstrate how your flows handle predictable customer reference fields.</p>
+                <h3 className="text-xl font-bold">Static ID Field</h3>
+                <p className="text-gray-600">Demonstrate how your scripts store and reuse customer references.</p>
               </div>
             </div>
-            <div className="space-y-2">
+            <div className="space-y-4">
               <label htmlFor="static-id-field" className="text-sm font-medium text-gray-600">Customer reference</label>
               <input
                 type="text"
@@ -92,7 +142,7 @@ const Scenarios: React.FC = () => {
                   title: 'Demo notification',
                   description: 'Content Description button clicked!',
                   className: toastStyles,
-                  duration: 500
+                  duration: 5000
                 })}
               >
                 Submit
@@ -116,22 +166,20 @@ const Scenarios: React.FC = () => {
               </div>
               <button
                 className="w-full py-3 px-4 rounded-lg font-medium transition-all bg-blue-600 hover:bg-blue-700 text-white"
-                onClick={() => {
-                  const text = document.getElementById('share-link')?.textContent?.trim();
-                  if (text) {
-                    navigator.clipboard.writeText(text).then(() => {
-                      toast({
-                        title: 'Link copied',
-                        description: 'The scenario URL is ready to share.',
-                        className: toastStyles,
-                        duration: 3000
-                      });
-                    });
-                  }
-                }}
+                onClick={handleCopyShareLink}
               >
                 Copy share link
               </button>
+              {lastCopiedLink && (
+                <div
+                  id="share-copy-result"
+                  className="mt-3 rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700"
+                  aria-live="polite"
+                  data-automation="copy-result"
+                >
+                  Last copied: <span className="font-mono">{lastCopiedLink}</span>
+                </div>
+              )}
             </div>
           </Card>