bugfix: Login and Signup is not working (#69)

closes #62
### Identified Issue
During signup, the code unexpectedly checks for `userId` and `secret`
before a user is even created. This check seems intended for email
verification but is happening at the wrong stage, causing errors.

### Temporary Fix
To prevent the error, a section of code in `signupPage.tsx` responsible
for this check has been commented out. However, this is not a permanent
solution.

### Next Steps
1. **Dedicated Verification Page:** Create a new page named
`verifyEmail.tsx` specifically for handling email verification. This
page will allow users to enter the userId and Secret received in their
verification email.

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_APPWRITE_URL = <>
+NEXT_PUBLIC_APPWRITE_PROJECT_ID = <>
+NEXT_PUBLIC_APPWRITE_DB_ID = <>
+NEXT_PUBLIC_APPWRITE_COLLECTION_ID = <>
+
+NEXT_PUBLIC_SUCCESS_LOGIN_PATH='http://localhost:3000/'
+NEXT_PUBLIC_FAILURE_LOGIN_PATH='http://localhost:3000/login'

.github/ISSUE_TEMPLATE/bug-report.yaml

@@ -1,7 +1,7 @@
 name: Bug report
 description: Create a bug report to help us improve Keploy
 title: '[bug]: '
-labels: [bug]
+labels: [bug, infraboard, xerocodee]
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yaml

@@ -1,7 +1,7 @@
 name: Feature request
 description: Suggest a feature to improve InfraBoard
 title: '[feature]: '
-labels: [feature]
+labels: [feature, infraboard, xerocodee]
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/figma-design.yaml

@@ -0,0 +1,56 @@
+name: Figma Design Submission
+description: Submit a design file for review
+title: "[Design]: "
+labels: [design, figma, infraboard, xerocodee]
+body:
+  - type: markdown
+    attributes:
+      value: "Thank you for submitting your design. Please provide the necessary details for review."
+
+  - type: input
+    id: design-title
+    attributes:
+      label: Design Title
+      description: "What is the title of your design?"
+      placeholder: "Enter the title here"
+    validations:
+      required: true
+
+  - type: textarea
+    id: design-description
+    attributes:
+      label: Design Description
+      description: "Please provide a detailed description of your design."
+      placeholder: "Describe your design here"
+    validations:
+      required: true
+
+  - type: input
+    id: figma-link
+    attributes:
+      label: Figma File Link
+      description: "Please paste the link to your Figma file."
+      placeholder: "https://www.figma.com/file/..."
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Terms and Conditions
+      description: "Please accept the terms and conditions."
+      options:
+        - label: "I have read and agree to the [Terms of Service](/terms) and [Privacy Policy](/privacy)."
+
+  - type: dropdown
+    id: design-category
+    attributes:
+      label: Design Category
+      description: "Please select the category your design best fits into."
+      options:
+        - UI/UX
+        - Branding
+        - Icons
+        - Illustrations
+    validations:
+      required: true

.gitignore

@@ -24,6 +24,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -51,4 +52,5 @@ Thumbs.db
 /tmp
 
 # Local Netlify folder
-.netlify
+.netlify
+.husky

README.md

@@ -33,15 +33,17 @@ InfraBoard combines synchronous and asynchronous services for a streamlined expe
 ### Getting Started
 Here you will find all the available npm commands [HERE](https://github.com/xerocodee/InfraBoard/wiki/Getting-Started)
 
-## 🤝 Contributing
+##### Demo Loging
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Email : `[email protected]` | Passowrd : `test@123`
 
-1. Fork the Project
-2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the Branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
+## 🤝 Contribution Department
+
+InfraBoard Open Source Contribution Department
+
+1. [Tech Department](./CONTRIBUTING.md) | [Code Structure](./STRUCTURE.md)
+2. [Designer Department](https://www.figma.com/file/HALTRuGqqInPg3VQ0kMwH2/InfraBoard?type=design&node-id=0%3A1&mode=design&t=GNyhaHaAAO4b4RgK-1)
+3. Technical Documentation Department : Comming Soon . . .
 
 ## Preview
 

STRUCTURE.md

@@ -8,13 +8,21 @@ This document provides an overview of the InfraBoard project's file structure to
 - `src/`: The source code directory for the application.
   - `app/`: Core app files including global styles and layout definitions.
   - `assets/`: Asset files categorized by their types (AWS, GCP, logos, etc.).
+  - `appwrite` : Contains various appwrite authentication functions.
   - `components/`: Reusable React components.
     - `canvas/`: Components related to the canvas functionality.
     - `drag/`: Drag-and-drop related components.
     - `header/`: Header component of the application.
     - `modals/`: Contains various modal components like `ReadmeModal.tsx`.
     - `sidebar/`: Sidebar and related components.
+  - `conf` : config file for appwrite project credentials.
+  - `context` : contains various global context states functions.
+  - `lib` : contains various library files for the project.
   - `store/`: State management using Redux or similar state stores, separated by service types.
+  - `styles`: css file for the project
+  - `types` : typescript interface files
+  - `utils` : functions which will be used multiple times across the project.
+    - `protectedRoutes.tsx` : This file is important! This file ensures that only authenticated user will have access to InfraBoard Dashboard.
 - `.eslintrc.json`: ESLint configuration for coding standards.
 - `.gitignore`: Specifies files to be ignored by git.
 - `.prettierrc`: Prettier configuration for code formatting.
@@ -29,4 +37,4 @@ Each subdirectory contains further organization specific to its purpose. For ins
 - `store/aws/`: Contains state management files specific to AWS services.
 - `store/gcp/`: Contains state management files specific to GCP services.
 
-Remember, this structure may evolve as the project grows. Always pull the latest changes and consult the documentation for the most up-to-date information.
+Remember, this structure may evolve as the project grows. Always pull the latest changes and consult the documentation for the most up-to-date information.

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -9,32 +9,44 @@
     "lint": "eslint .",
     "format": "prettier --write .",
     "lint:fix": "eslint --fix .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "generate:robots": "node scripts/generate-robots.js",
+    "generate:sitemap": "node scripts/generate-sitemap.js",
+    "prebuild": "npm run generate:robots && npm run generate:sitemap"
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "appwrite": "^13.0.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "globby": "^14.0.0",
     "lucide-react": "^0.323.0",
     "next": "14.1.0",
     "react": "^18",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18",
     "react-draggable": "^4.4.6",
+    "react-hook-form": "^7.50.1",
     "react-icons": "^5.0.1",
     "react-monaco-editor": "^0.55.0",
     "react-resizable": "^3.0.5",
     "tailwind-merge": "^2.2.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",

public/robots.txt

@@ -1,2 +1,4 @@
-User-agent: *
-Allow: /
+User-agent: *
+Disallow:
+
+Sitemap: https://www.infraboard.xerocodee.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+    <url>
+      <loc>https://www.infraboard.xerocodee.com/</loc>
+      <priority>1</priority>
+    </url>
+
+</urlset>

scripts/generate-robots.js

@@ -0,0 +1,11 @@
+// generate-robots.js
+const fs = require('fs')
+
+const robotsContent = `User-agent: *
+Disallow:
+
+Sitemap: https://www.infraboard.xerocodee.com/sitemap.xml
+`
+
+fs.writeFileSync('public/robots.txt', robotsContent)
+console.log('robots.txt generated!')

scripts/generate-sitemap.js

@@ -0,0 +1,21 @@
+const fs = require('fs')
+
+const pages = [{ path: '/', priority: 1.0 }]
+
+const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  ${pages
+    .map(
+      (page) => `
+    <url>
+      <loc>https://www.infraboard.xerocodee.com${page.path}</loc>
+      <priority>${page.priority}</priority>
+    </url>
+  `,
+    )
+    .join('')}
+</urlset>
+`
+
+fs.writeFileSync('public/sitemap.xml', sitemapContent)
+console.log('sitemap.xml generated!')

src/app/(auth)/layout.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import '../globals.css'
+import { TooltipProvider } from '@/components/ui/tooltip'
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'InfraBoard',
+  description: 'Visual Cloud Infrastructure Management',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <TooltipProvider delayDuration={50}>{children}</TooltipProvider>
+      </body>
+    </html>
+  )
+}

src/app/(auth)/login/page.tsx

@@ -0,0 +1,7 @@
+import LoginPage from '@/pages/loginPage'
+
+const Login = () => {
+  return <LoginPage />
+}
+
+export default Login

src/app/(auth)/signup/page.tsx

@@ -0,0 +1,9 @@
+import dynamic from 'next/dynamic'
+
+const SignUpPage = dynamic(() => import('@/pages/signupPage'), { ssr: false })
+
+const Signup = () => {
+  return <SignUpPage />
+}
+
+export default Signup

src/app/page.tsx

@@ -1,35 +1,10 @@
-'use client'
-import Canvas from '@/components/canvas/canvas'
-import Header from '@/components/header/header'
-import SideBar from '@/components/sidebar/sidebar'
-import { HTML5Backend } from 'react-dnd-html5-backend'
-import { DndProvider } from 'react-dnd'
-import CodeEditor from '@/components/code_editor/codeEditor'
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-
-interface DroppedItem {
-  subTab: {
-    title: string
-    icon?: any
-    subList: any[]
-  }
-  position: { x: number; y: number }
-}
-
-export default function Home() {
-  const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([])
-  const handleItemDrop = (newItem: DroppedItem) => {
-    setDroppedItems((prevItems) => [...prevItems, newItem])
-  }
+import RootPage from '@/pages/home'
+const Home = () => {
   return (
     <main>
-      <DndProvider backend={HTML5Backend}>
-        <Header />
-        <SideBar />
-        <Canvas onItemDrop={handleItemDrop} droppedItems={droppedItems} />
-        <CodeEditor droppedItems={droppedItems} />
-      </DndProvider>
+      <RootPage />
     </main>
   )
 }
+
+export default Home