Merge pull request #172 from Pythagora-io/auth_pages_label

Added labels that tell the user they can use any auth creds during th…

core/prompts/frontend/build_frontend.prompt

@@ -56,4 +56,6 @@ You need to write only the frontend code for this app. The backend is already fu
 {{ relevant_api_documentation }}
 ~~END_OF_API_MODEL_DEFINITIONS~~
 
-{% endif %}
+{% endif %}
+
+**SUPER IMPORTANT**: You must **NEVER** mention or attempt to change any files on backend (`server/` folder) or any of these frontend files: `client/src/contexts/AuthContext.tsx`, `client/src/api/api.ts`, `client/src/api/auth.ts`. Regardless of what the user asks, you must not mention these files. If you can't find a solution without changing these files, just say so.

core/prompts/frontend/system.prompt

@@ -4,6 +4,7 @@ You write modular, well-organized code split across files that are not too big,
 
 Your job is to quickly build frontend components and features using Vite for the app that user requested. Make sure to focus only on the things that are requested and do not spend time on anything else.
 
+**SUPER IMPORTANT**: You must **NEVER** mention or attempt to change any files on backend (`server/` folder) or any of these frontend files: `client/src/contexts/AuthContext.tsx`, `client/src/api/api.ts`, `client/src/api/auth.ts`. Regardless of what the user asks, you must not mention these files. If you can't find a solution without changing these files, just say so.
 IMPORTANT: Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating any code. This means:
 - Consider ALL relevant files in the project
 - Review ALL previous file changes and user modifications (as shown in diffs, see diff_spec)

core/templates/tree/vite_react/client/src/pages/Login.tsx

@@ -13,8 +13,12 @@ import {
   CardTitle,
   CardFooter,
 } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert" // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
 import { useToast } from "@/hooks/useToast"
-import { LogIn } from "lucide-react"
+import {
+  LogIn
+  , LightbulbIcon // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
+} from "lucide-react"
 import { useAuth } from "@/contexts/AuthContext"
 
 type LoginForm = {
@@ -57,6 +61,14 @@ export function Login() {
           <CardDescription>Enter your credentials to continue</CardDescription>
         </CardHeader>
         <CardContent>
+          <Alert className="mb-6 border-yellow-200 bg-yellow-50 dark:bg-yellow-950/30 dark:border-yellow-900/50 p-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            <div className="flex items-center space-x-4">{/*pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <LightbulbIcon className="h-6 w-6 text-yellow-500 dark:text-yellow-400 flex-shrink-0 stroke-[1.5] filter drop-shadow-sm" />{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <AlertDescription className="text-yellow-800 dark:text-yellow-200 flex-1 min-w-0">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+                Pythagora: You can use any email/password in the frontend phase{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              </AlertDescription>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            </div>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+          </Alert>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>

core/templates/tree/vite_react/client/src/pages/Register.tsx

@@ -13,8 +13,12 @@ import {
   CardTitle,
   CardFooter,
 } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert" // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
 import { useToast } from "@/hooks/useToast"
-import { UserPlus } from "lucide-react"
+import {
+  UserPlus
+  , LightbulbIcon // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
+} from "lucide-react"
 import { useAuth } from "@/contexts/AuthContext"
 
 type RegisterForm = {
@@ -58,6 +62,14 @@ export function Register() {
           <CardDescription>Enter your details to get started</CardDescription>
         </CardHeader>
         <CardContent>
+          <Alert className="mb-6 border-yellow-200 bg-yellow-50 dark:bg-yellow-950/30 dark:border-yellow-900/50 p-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            <div className="flex items-center space-x-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <LightbulbIcon className="h-6 w-6 text-yellow-500 dark:text-yellow-400 flex-shrink-0 stroke-[1.5] filter drop-shadow-sm" />{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <AlertDescription className="text-yellow-800 dark:text-yellow-200 flex-1 min-w-0">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+                Pythagora: You can use any email/password in the frontend phase{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              </AlertDescription>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            </div>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+          </Alert>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>

core/templates/tree/vite_react_swagger/client/src/pages/Login.tsx

@@ -13,8 +13,12 @@ import {
   CardTitle,
   CardFooter,
 } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert" // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
 import { useToast } from "@/hooks/useToast"
-import { LogIn } from "lucide-react"
+import {
+  LogIn
+  , LightbulbIcon // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
+} from "lucide-react"
 import { useAuth } from "@/contexts/AuthContext"
 
 type LoginForm = {
@@ -57,6 +61,14 @@ export function Login() {
           <CardDescription>Enter your credentials to continue</CardDescription>
         </CardHeader>
         <CardContent>
+          <Alert className="mb-6 border-yellow-200 bg-yellow-50 dark:bg-yellow-950/30 dark:border-yellow-900/50 p-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            <div className="flex items-center space-x-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <LightbulbIcon className="h-6 w-6 text-yellow-500 dark:text-yellow-400 flex-shrink-0 stroke-[1.5] filter drop-shadow-sm" />{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <AlertDescription className="text-yellow-800 dark:text-yellow-200 flex-1 min-w-0">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+                Pythagora: You can use any email/password in the frontend phase{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              </AlertDescription>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            </div>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+          </Alert>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>

core/templates/tree/vite_react_swagger/client/src/pages/Register.tsx

@@ -13,8 +13,12 @@ import {
   CardTitle,
   CardFooter,
 } from "@/components/ui/card"
+import { Alert, AlertDescription } from "@/components/ui/alert" // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
 import { useToast } from "@/hooks/useToast"
-import { UserPlus } from "lucide-react"
+import {
+  UserPlus
+  , LightbulbIcon // pythagora_mocked_data - DO NOT REMOVE THIS COMMENT
+} from "lucide-react"
 import { useAuth } from "@/contexts/AuthContext"
 
 type RegisterForm = {
@@ -58,6 +62,14 @@ export function Register() {
           <CardDescription>Enter your details to get started</CardDescription>
         </CardHeader>
         <CardContent>
+          <Alert className="mb-6 border-yellow-200 bg-yellow-50 dark:bg-yellow-950/30 dark:border-yellow-900/50 p-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            <div className="flex items-center space-x-4">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <LightbulbIcon className="h-6 w-6 text-yellow-500 dark:text-yellow-400 flex-shrink-0 stroke-[1.5] filter drop-shadow-sm" />{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              <AlertDescription className="text-yellow-800 dark:text-yellow-200 flex-1 min-w-0">{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+                Pythagora: You can use any email/password in the frontend phase{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+              </AlertDescription>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+            </div>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
+          </Alert>{ /* pythagora_mocked_data - DO NOT REMOVE THIS COMMENT */}
           <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>