'updated links back to localhost and fixed nav'

nellysegi · nellysegi · commit 800e118e0d99 · 2024-07-18T14:49:31.000-07:00
Co-authored-by: kim &lt;kimcuomo@users.noreply.github.com&gt;
Co-authored-by: FredAires &lt;FredAires@users.noreply.github.com&gt;
Co-authored-by: ianmannn &lt;ianmannn@users.noreply.github.com&gt;
diff --git a/public/Transparent Logo White.png b/public/Transparent Logo White.png
diff --git a/public/transparent-gif-v2-_1_.svg b/public/transparent-gif-v2-_1_.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1500.000000pt" height="660.000000pt" viewBox="0 0 1500.000000 660.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,660.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 3300 l0 -3300 7500 0 7500 0 0 3300 0 3300 -7500 0 -7500 0 0
+-3300z"/>
+</g>
+</svg>
diff --git a/src/app/Transparent Logo White.png b/src/app/Transparent Logo White.png
diff --git a/src/app/dashboard/components/APIkey.js b/src/app/dashboard/components/APIkey.js
@@ -9,7 +9,7 @@ function APIKey({ username }) {
   const [ api, setApi ] = useState('');
 
   useEffect(() => {
-    fetch(`https://nextlevel-dash.com/onboarding/api?username=${username}`)
+    fetch(`http://localhost:3000/onboarding/api?username=${username}`)
     .then((res) => {
       if (res.ok) {
         console.log('res:', res);
diff --git a/src/app/dashboard/components/sidebar.js b/src/app/dashboard/components/sidebar.js
@@ -9,7 +9,7 @@ function SideBar(props) {
   return (
     <div className={styles.sidebar}>
       <div className={styles.sidebarTop}>
-      <Link href="/dashboard/onboarding">
+      <Link href={`/onboarding?username=${username}`}>
         <ul className={styles.sidebarTop}>
           <Link className={styles.link} href={`/onboarding?username=${username}`}>
           <li className={styles.sidebarListItems}>Onboarding</li>
diff --git a/src/app/dashboard/hooks/useBuildTimeData.js b/src/app/dashboard/hooks/useBuildTimeData.js
@@ -5,7 +5,8 @@ import React, { useEffect, useState } from 'react';
 const useBuildTimeData = async (username) => {
   console.log('entering use effect useBuildTimeData for:', username);
   try {
-    const res = await fetch(`https://nextlevel-dash.com/dashboard/api/build?username=${username}`);
+    // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/build?username=${username}`);
+    const res = await fetch(`http://localhost:3000/dashboard/api/build?username=${username}`);
     if (res.ok) {
       console.log('Res from useBuildTimeData:', res);
       const data = await res.json();
diff --git a/src/app/dashboard/hooks/useBundleData.js b/src/app/dashboard/hooks/useBundleData.js
@@ -5,7 +5,8 @@ import React, { useEffect, useState } from 'react';
 const useBundleData = async (username) => {
   console.log('entering use effect usebundledata for:', username);
   try {
-    const res = await fetch(`https://nextlevel-dash.com/dashboard/api/bundle?username=${username}`);
+    // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/bundle?username=${username}`);
+    const res = await fetch(`http://localhost:3000/dashboard/api/bundle?username=${username}`);
     if (res.ok) {
       console.log('res from useBundleData:', res);
       const data = await res.json();
diff --git a/src/app/dashboard/hooks/useWebVitalsData.js b/src/app/dashboard/hooks/useWebVitalsData.js
@@ -2,7 +2,8 @@
 
 async function fetchWebVitals (username, metricType) {
   try {
-    const res = await fetch(`https://nextlevel-dash.com/dashboard/api/webvitals?username=${username}&metricType=${metricType}`);
+    // const res = await fetch(`https://nextlevel-dash.com/dashboard/api/webvitals?username=${username}&metricType=${metricType}`);
+    const res = await fetch(`http://localhost:3000/dashboard/api/webvitals?username=${username}&metricType=${metricType}`);
       if (res.ok) {
         console.log('Res from useWebVitalsData:', res);
         const resData = await res.json();
diff --git a/src/app/home.css b/src/app/home.css
@@ -10,27 +10,27 @@ body {
 }
 
 .navbar-gap {
-    width: 100%;
-    height: 50px;
+  width: 100%;
+  height: 50px;
 }
 
-.home-logo{
+.home-logo {
   width: 900px;
   margin-top: 130px;
 }
 
-h2{
+h2 {
   margin-top: -30px;
 }
 
 section {
-    display: grid;
-    place-items: center;
-    align-content: center;
-    min-height: 110vh;
-    font-size: 50px;
-    padding-left: 20px;
-    padding-right: 20px;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  min-height: 110vh;
+  font-size: 50px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .buttonsDiv {
@@ -44,7 +44,7 @@ section {
   text-decoration: none;
 }
 
-.or{
+.or {
   margin-top: 15px;
 }
 
@@ -53,48 +53,15 @@ section {
   text-decoration: none;
 }
 
-/* Container for the GIF and static logo */
 .gif-container {
   position: relative;
   display: inline-block;
 }
 
-/* GIF styling */
-.gif {
+.gif, .static-logo {
   width: 100%; /* Adjust as necessary */
   height: auto; /* Adjust as necessary */
-  animation: play-gif 5s forwards; /* Adjust 5s to the duration of your GIF */
-}
-
-/* Static logo styling */
-.static-logo {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%; /* Adjust as necessary */
-  height: auto; /* Adjust as necessary */
-  opacity: 0; /* Initially hidden */
-  animation: show-logo 5s forwards; /* Adjust 5s to the duration of your GIF */
-}
-
-/* Keyframe animation to hide GIF */
-@keyframes play-gif {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-/* Keyframe animation to show static logo */
-@keyframes show-logo {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+  display: block;
 }
 
 .hidden-fade {
@@ -124,7 +91,7 @@ section {
   min-height: 80vh !important;
 }
 
-@media(prefers-reduced-motion) {
+@media (prefers-reduced-motion) {
   .hidden {
     transition: none;
   }
@@ -137,3 +104,4 @@ section {
 }
 
 
+
diff --git a/src/app/login/login.css b/src/app/login/login.css
@@ -9,7 +9,7 @@ body-login {
   font-family: 'Poppins', sans-serif;
   display: flex;
   justify-content: center;
-  align-items: center; 
+  align-items: center;
   min-height: 100vh;
   background: no-repeat;
   background-size: cover;
diff --git a/src/app/login/page.js b/src/app/login/page.js
@@ -7,19 +7,17 @@ import { Si1Password } from 'react-icons/si';
 import { AiOutlineGoogle } from 'react-icons/ai';
 import { IoLogoGithub } from 'react-icons/io';
 import Link from 'next/link';
-import Modal from '../components/Modal';
 import { signIn, useSession } from 'next-auth/react';
 
 export default function Login() {
   const { data: session, status } = useSession();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    // Stops background/other css elements from bleeding to next page
-    console.log('Setting up login page styles');
     document.body.style.fontFamily = "'Poppins', sans-serif";
     document.body.style.display = 'flex';
     document.body.style.justifyContent = 'center';
@@ -31,7 +29,6 @@ export default function Login() {
     document.body.style.backgroundPosition = 'center';
 
     return () => {
-      console.log('Cleaning up login page styles');
       document.body.style.fontFamily = '';
       document.body.style.display = '';
       document.body.style.justifyContent = '';
@@ -53,6 +50,7 @@ export default function Login() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true); // Show preloader
     console.log("Submitting login form with username:", username);
 
     const result = await signIn('credentials', {
@@ -61,6 +59,8 @@ export default function Login() {
       password,
     });
 
+    setLoading(false); // Hide preloader
+
     if (result.error) {
       console.log('Login error:', result.error);
       setError(result.error);
@@ -74,24 +74,29 @@ export default function Login() {
   };
 
   const handleOAuthSignIn = async (provider) => {
+    setLoading(true); // Show preloader
     const result = await signIn(provider, { redirect: false });
     console.log('RESULT', result);
+
     if (!result.error) {
       const interval = setInterval(() => {
         if (status === 'authenticated' && session) {
           clearInterval(interval);
           const userNameFromSession = session.user.email;
+          setLoading(false); // Hide preloader
           window.location.href = `/dashboard/?username=${encodeURIComponent(userNameFromSession)}`;
         }
       }, 100); // Check every 100ms
     } else {
+      setLoading(false); // Hide preloader
       console.log(`OAuth sign-in error with ${provider}:`, result.error);
       setError(`Failed to sign in with ${provider}. Please try again.`);
     }
   };
 
   return (
     <div className="wrapper">
+      {loading && <Preloader />}
       <form onSubmit={handleSubmit}>
         <div className="logo-container">
           <img src="./TransparentIcon.png" alt="Logo" className="logo" />
@@ -130,7 +135,11 @@ export default function Login() {
             {error}
           </p>
         )}
-
+        {success && (
+          <p className="message" style={{ color: 'green' }}>
+            Login successful!
+          </p>
+        )}
         <div className="oauth-link">
           <button
             type="button"
diff --git a/src/app/login/transparent gif v2 (1).gif b/src/app/login/transparent gif v2 (1).gif
diff --git a/src/app/onboarding/components/Step.js b/src/app/onboarding/components/Step.js
@@ -9,7 +9,7 @@ const Step = ({ stepNumber, title, description, code, language, api, username })
   
   useEffect(() => {
     if(api === true) {
-      fetch(`https://nextlevel-dash.com/onboarding/api?username=${username}`)
+      fetch(`http://localhost:3000/onboarding/api?username=${username}`)
       .then((res) => {
         if (res.ok) {
           console.log('res:', res);
diff --git a/src/app/page.js b/src/app/page.js
@@ -2,7 +2,6 @@
 
 import React, { useEffect } from 'react';
 import './home.css';
-import { IoMdVideocam } from 'react-icons/io';
 import Link from 'next/link';
 
 export default function Home() {
@@ -42,23 +41,19 @@ export default function Home() {
   return (
     <main>
       <div className='navbar-gap'></div>
-      <div className="gif-container">
-        <img src="/transparent gif v2 (1).gif" alt="GIF" className="gif" />
-        <img src="/Transparent Logo White.png" alt="Logo" className="static-logo" />
-      </div>
       <section className='hidden-fade'>
         <h2>Take your app to the</h2>
         <section className='hidden-fly-up'>
           <div className="buttonsDiv"> 
             <div className='homepageButtons'>
               <Link className='homepage-link' href="/login">
-                <div className="login-button">Login</div> {/* Added button to route to the login page */}
+                <div className="login-button">Login</div> 
               </Link>
             </div>
             <div className='or'> or </div>
             <div className='homepageButtons'>
               <Link className='homepage-link' href="/signup">
-                <div className="signup-button">Get Started</div> {/* Added button to route to the login page */}
+                <div className="signup-button">Get Started</div>
               </Link>
             </div>
           </div>
diff --git a/src/app/signup/page.js b/src/app/signup/page.js
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { useSession, signIn } from 'next-auth/react';
 import './signUp.css';
 import { Si1Password } from 'react-icons/si';
 import { AiOutlineGoogle } from 'react-icons/ai';
@@ -19,6 +20,30 @@ export default function Signup () {
   const [error, setError] = useState('');
   const [success, setSuccess] = useState(false);
 
+  useEffect(() => {
+    //Stops background/other css elements from bleeding to next page
+    document.body.style.fontFamily = "'Poppins', sans-serif";
+    document.body.style.display = 'flex';
+    document.body.style.justifyContent = 'center';
+    document.body.style.alignItems = 'center';
+    document.body.style.minHeight = '100vh';
+    document.body.style.background =
+      'url("https://getwallpapers.com/wallpaper/full/2/8/f/537844.jpg") no-repeat';
+    document.body.style.backgroundSize = 'cover';
+    document.body.style.backgroundPosition = 'center';
+
+    return () => {
+      document.body.style.fontFamily = '';
+      document.body.style.display = '';
+      document.body.style.justifyContent = '';
+      document.body.style.alignItems = '';
+      document.body.style.minHeight = '';
+      document.body.style.background = '';
+      document.body.style.backgroundSize = '';
+      document.body.style.backgroundPosition = '';
+    };
+  }, []);
+
   useEffect(() => {
     if (status === 'authenticated' && session) {
       const userNameFromSession = session.user.email;
diff --git a/src/app/signup/signUp.css b/src/app/signup/signUp.css
@@ -13,7 +13,6 @@ body {
   min-height: 100vh;
   background: no-repeat;
   background-size: cover;
-  background-image: url('https://getwallpapers.com/wallpaper/full/2/8/f/537844.jpg');
   background-position: center;
 }
 
