UI changes for logged out users

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -106,6 +106,7 @@ export function GenerateRoadmap() {
 
   const openAPIKey = getOpenAIKey();
   const isKeyOnly = IS_KEY_ONLY_ROADMAP_GENERATION;
+  const isAuthenticatedUser = isLoggedIn();
 
   const renderRoadmap = async (roadmap: string) => {
     const { nodes, edges } = generateAIRoadmapFromText(roadmap);
@@ -249,6 +250,11 @@ export function GenerateRoadmap() {
   };
 
   const downloadGeneratedRoadmapContent = async () => {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
     pageProgressMessage.set('Downloading Roadmap');
 
     const node = document.getElementById('roadmap-container');
@@ -432,7 +438,7 @@ export function GenerateRoadmap() {
           {!isLoading && (
             <div className="container flex flex-grow flex-col items-start">
               <AIRoadmapAlert />
-              {isKeyOnly && (
+              {isKeyOnly && isAuthenticatedUser && (
                 <div className="flex flex-row gap-4">
                   {!openAPIKey && (
                     <p className={'text-left text-red-500'}>
@@ -459,7 +465,7 @@ export function GenerateRoadmap() {
                   )}
                 </div>
               )}
-              {!isKeyOnly && (
+              {!isKeyOnly && isAuthenticatedUser && (
                 <div className="mt-2 flex w-full flex-col items-start justify-between gap-2 text-sm sm:flex-row sm:items-center sm:gap-0">
                   <span>
                     <span
@@ -475,19 +481,7 @@ export function GenerateRoadmap() {
                     </span>{' '}
                     roadmaps generated.
                   </span>
-                  {!isLoggedInUser && (
-                    <button
-                      className="rounded-xl border border-current px-1.5 py-0.5 text-left text-sm font-medium text-blue-500 sm:text-center"
-                      onClick={showLoginPopup}
-                    >
-                      Generate more by{' '}
-                      <span className="font-semibold">
-                        signing up (free, takes 2s)
-                      </span>{' '}
-                      or <span className="font-semibold">logging in</span>
-                    </button>
-                  )}
-                  {isLoggedInUser && !openAPIKey && (
+                  {!openAPIKey && (
                     <button
                       onClick={() => setIsConfiguring(true)}
                       className="rounded-xl border border-current px-2 py-0.5 text-left text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
@@ -499,7 +493,7 @@ export function GenerateRoadmap() {
                     </button>
                   )}
 
-                  {isLoggedInUser && openAPIKey && (
+                  {openAPIKey && (
                     <button
                       onClick={() => setIsConfiguring(true)}
                       className="flex flex-row items-center gap-1 rounded-xl border border-current px-2 py-0.5 text-sm text-blue-500 transition-colors hover:bg-blue-400 hover:text-white"
@@ -510,6 +504,14 @@ export function GenerateRoadmap() {
                   )}
                 </div>
               )}
+              {!isAuthenticatedUser && (
+                <button
+                  className="rounded-xl border border-current px-2.5 py-0.5 text-left text-sm font-medium text-blue-500 transition-colors hover:bg-blue-500 hover:text-white sm:text-center"
+                  onClick={showLoginPopup}
+                >
+                  Login to generate your own roadmaps
+                </button>
+              )}
               <form
                 onSubmit={handleSubmit}
                 className="my-3 flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-center"
@@ -530,14 +532,30 @@ export function GenerateRoadmap() {
                     'flex min-w-[127px] flex-shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
                     'disabled:cursor-not-allowed disabled:opacity-50',
                   )}
+                  onClick={(e) => {
+                    if (!isAuthenticatedUser) {
+                      e.preventDefault();
+                      showLoginPopup();
+                    }
+                  }}
                   disabled={
-                    !roadmapLimit ||
+                    isAuthenticatedUser &&
+                    (!roadmapLimit ||
                       !roadmapTerm ||
                       roadmapLimitUsed >= roadmapLimit ||
                       roadmapTerm === currentRoadmap?.term ||
-                    (isKeyOnly && !openAPIKey)
+                      (isKeyOnly && !openAPIKey))
                   }
                 >
+                  {!isAuthenticatedUser && (
+                    <>
+                      <Wand size={20} />
+                      Generate
+                    </>
+                  )}
+
+                  {isAuthenticatedUser && (
+                    <>
                       {roadmapLimit > 0 && canGenerateMore && (
                         <>
                           <Wand size={20} />
@@ -553,6 +571,8 @@ export function GenerateRoadmap() {
                           Limit reached
                         </span>
                       )}
+                    </>
+                  )}
                 </button>
               </form>
               <div className="flex w-full items-center justify-between gap-2">