info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-23 01:13:03 +02:00
Code Issues Releases Wiki Activity

UI changes for logged out users

Browse Source
This commit is contained in:
Kamran Ahmed
2024-03-12 15:36:37 +00:00
parent 64cfe503af
commit f838b5dac7
1 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/GenerateRoadmap/GenerateRoadmap.tsx
View File

@@ -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,28 +532,46 @@ 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 ||
!roadmapTerm ||
roadmapLimitUsed >= roadmapLimit ||
roadmapTerm === currentRoadmap?.term ||
(isKeyOnly && !openAPIKey)
isAuthenticatedUser &&
(!roadmapLimit ||
!roadmapTerm ||
roadmapLimitUsed >= roadmapLimit ||
roadmapTerm === currentRoadmap?.term ||
(isKeyOnly && !openAPIKey))
}
>
{roadmapLimit > 0 && canGenerateMore && (
{!isAuthenticatedUser && (
<>
<Wand size={20} />
Generate
</>
)}
{roadmapLimit === 0 && <span>Please wait..</span>}
{isAuthenticatedUser && (
<>
{roadmapLimit > 0 && canGenerateMore && (
<>
<Wand size={20} />
Generate
</>
)}
{roadmapLimit > 0 && !canGenerateMore && (
<span className="flex items-center">
<Ban size={15} className="mr-2" />
Limit reached
</span>
{roadmapLimit === 0 && <span>Please wait..</span>}
{roadmapLimit > 0 && !canGenerateMore && (
<span className="flex items-center">
<Ban size={15} className="mr-2" />
Limit reached
</span>
)}
</>
)}
</button>
</form>