Merge pull request #29 from MrPutzi/autopilot/17-20240408123157565

Fixed API keys in .env and added alerts for invalid credentials
MrPutzi · Apr 29, 2024 · 5e86d04 · 5e86d04
2 parents 2192eb8 + 59d6530
commit 5e86d04
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 167 deletions.
diff --git a/.example.env b/.example.env
@@ -1,5 +1,4 @@
-REPLICATE_API_KEY=r8_2vsTHdL2qcq6r7jJLiCbNnZTTROSwNA0iEK1H
-
+REPLICATE_API_KEY=r8_I3qmCVzlGI0xjAuOAU0NgQShASJbAi606AzcT
 #console.log('Replicate API Key:', process.env.REPLICATE_API_KEY);
 #
 #const replicate = new Replicate(process.env.REPLICATE_API_KEY);

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,4 +1,4 @@
-import {LoginLink, RegisterLink} from "@kinde-oss/kinde-auth-nextjs";
+import { LoginLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs";
 import Image from "next/image";
 import Link from "next/link";
 import React, { useContext } from "react";
@@ -9,7 +9,7 @@ export default function Header() {
     const user = userContext?.user;
 
     return (
-        <header className=" flex justify-between items-center w-full border-b-2 border-double bor pb-7 sm:px-4 px-2  ">
+        <header className="flex justify-between items-center w-full border-b-2 border-double bor pb-7 sm:px-4 px-2">
             <Link href="/">
                 <div className="flex space-x-2">
                     <Image
@@ -19,7 +19,7 @@ export default function Header() {
                         width={36}
                         height={36}
                     />
-                    <h1 className="sm:text-5xl text-3xl font-bold ml-2   ">
+                    <h1 className="sm:text-5xl text-3xl font-bold ml-2">
                         <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-700 to-violet-800">
                             DESIGN + AI Toolkit
                         </span>
@@ -31,18 +31,21 @@ export default function Header() {
                     <>
                         <img src="/profile-icon.png" alt="Profile" />
                         <span>{user.email}</span>
+                        <span>Credit: {user.credit}</span> {/* Add this line to display the user's credit */}
                     </>
                 ) : (
                     <>
                         <Link href="/login">
                             <button
-                                className="bg-gradient-to-r from-pink-700 to-violet-800 hover:bg-gradient-to-tl text-white font-semibold py-2 px-4 border border-gray-400 rounded shadow">
+                                className="bg-gradient-to-r from-pink-700 to-violet-800 hover:bg-gradient-to-tl text-white font-semibold py-2 px-4 border border-gray-400 rounded shadow"
+                            >
                                 Login
                             </button>
                         </Link>
                         <Link href="/register">
                             <button
-                                className="bg-gradient-to-r from-pink-700 to-violet-800 hover:bg-gradient-to-tl text-white font-semibold py-2 px-4 border border-gray-400 rounded shadow">
+                                className="bg-gradient-to-r from-pink-700 to-violet-800 hover:bg-gradient-to-tl text-white font-semibold py-2 px-4 border border-gray-400 rounded shadow"
+                            >
                                 Register
                             </button>
                         </Link>

diff --git a/components/InputForm.tsx b/components/InputForm.tsx
@@ -139,8 +139,8 @@ const InputForm: React.FC = () => {
         //     </div>
 
 
-    <div className="flex">
-        <div className="w-1/2 p-4 border-r-2 border-gray-200">
+    <div className="flex  ">
+        <div className="w-1/2 p-4 border-gray-300 border-2 rounded-xl ">
             <form onSubmit={handleSubmit}>
             <div className="form-group">
                     <label htmlFor="inputPrompt">Image Prompt:</label>
@@ -150,7 +150,7 @@ const InputForm: React.FC = () => {
                         name="prompt" // Zmenené z "inputPrompt" na "prompt"
                         value={formData.prompt}
                         onChange={handleChange}
-                        className="w-full border border-gray-300 rounded-lg px-4 py-2 mb-2"
+                        className="w-full border border-gray-500 rounded-lg px-4 py-2 mb-2"
                     />
                 </div>
 
@@ -250,9 +250,9 @@ const InputForm: React.FC = () => {
             </form>
 
         </div>
-        <div className="w-1/2 ">
-            {generatedPhoto && <img src={generatedPhoto} alt="Generated" className="w-full"/>}
+        <div className="w-1/2  border-gray-300 border-2 rounded-xl ">
         </div>
+        {generatedPhoto && <img src={generatedPhoto} alt="Generated" className="w-full"/>}
     </div>
 )
     ;

diff --git a/context/UserContext.tsx b/context/UserContext.tsx
@@ -3,11 +3,14 @@ import React from 'react';
 type UserState = {
     email: string;
     password: string;
+    credit: number; // Add this line
 } | null;
 
 export type UserContextType = {
     user: UserState;
     setUser: React.Dispatch<React.SetStateAction<UserState>>;
 };
 
-export const UserContext = React.createContext<UserContextType | undefined>(undefined);
+export const UserContext = React.createContext<UserContextType | undefined>(undefined);
+
+
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,19 +8,19 @@ class MyDocument extends Document {
           <link rel="icon" href="/favicon.ico" />
           <meta
             name="description"
-            content="Restore your old face photos and keep the memories alive."
+            content="Vyskúšajte si rôzne modely umelej inteligencie a dizajnu."
           />
-          <meta property="og:site_name" content="restorePhotos.io" />
+          <meta property="og:site_name" content="design-plus-ai-toolkit" />
           <meta
             property="og:description"
-            content="Restore your old face photos and keep the memories alive."
+            content="Vyskúšajte si rôzne modely umelej inteligencie a dizajnu."
           />
           <meta property="og:title" content="Face Photo Restorer" />
           <meta name="twitter:card" content="summary_large_image" />
           <meta name="twitter:title" content="Face Photo Restorer" />
           <meta
             name="twitter:description"
-            content="Restore your old photos and keep the memories alive."
+            content="Vyskúšajte si rôzne modely umelej inteligencie a dizajnu."
           />
           <meta
             property="og:image"

diff --git a/pages/api/login.ts b/pages/api/login.ts
@@ -32,6 +32,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
         if (!passwordMatches) {
             res.status(400).json({ message: 'Invalid email or password.' })
+            alert('Invalid credentials')
             return
         }
 

diff --git a/pages/api/register.ts b/pages/api/register.ts
@@ -16,8 +16,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             id: Date.now().toString(),
             email: email,
             password: hashedPassword,
+            credit: 50
         }
 
+
         // Read the users.json file
         const usersFilePath = path.join(process.cwd(), 'users.json')
         const usersFile = fs.readFileSync(usersFilePath, 'utf8')

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -14,6 +14,7 @@ import NadpisAI from "../components/NadpisAI";
 const Home: NextPage = () => {
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
+
 
     const handleSubmit = async (event: React.FormEvent) => {
         event.preventDefault()
@@ -35,7 +36,8 @@ const Home: NextPage = () => {
             localStorage.setItem('token', data.token)
             // Redirect the user to the home page or dashboard
         } else {
-            // Handle error
+            alert('Invalid credentials')
+
         }
     }
 
@@ -98,8 +100,8 @@ const Home: NextPage = () => {
             </main>
         </div>
 )
-}
 
+}
 
 
-export default Home;
+export default Home;
diff --git a/pages/realvision.tsx b/pages/realvision.tsx
@@ -56,7 +56,7 @@ const Home = () => {
                 <ResizablePanel>
                     <AnimatePresence>
                         <motion.div className="flex justify-between items-center w-full flex-col mt-4">
-                            <div className="w-full">
+                            <div className="w-full p-4 border-gray-300 border-2 rounded-xl ">
                                 {generatedPhoto ? (
                                     <a href={generatedPhoto} target="_blank" rel="noreferrer">
                                         <Image
-Original file line number
+Diff line change
@@ Expand Up @@
             if (!passwordMatches) {
                 res.status(400).json({ message: 'Invalid email or password.' })
+                alert('Invalid credentials')
                 return
             }
@@ Expand Down @@