Rework migration UI

radio4000 · Apr 21, 2024 · bddea51 · bddea51
1 parent d7ff023
commit bddea51
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 61 deletions.
diff --git a/src/components/site/nav.js b/src/components/site/nav.js
@@ -31,7 +31,7 @@ export default function Nav(props) {
 								{/* {!session && <Link to="/login">Login</Link>} */}
 								{session && (
 									<>
-										<Link to="/account">Account</Link>
+										{/* <Link to="/account">Account</Link> */}
 										{/* <Link to="/channels" end>Channels</Link> */}
 										{userChannels?.length ? (
 											<>

diff --git a/src/pages/account/index.js b/src/pages/account/index.js
@@ -10,9 +10,9 @@ export default function Account({dbSession: {database, session, userChannel}}) {
 					<br />
 					<em>{session?.user?.email}</em>
 				</p>
-				<p>
+				{/* <p>
 					<Link to="/reset-password">Change password</Link>
-				</p>
+				</p> */}
 				<p>
 					<Link to="/logout">Log out</Link>
 				</p>

diff --git a/src/pages/auth/login.js b/src/pages/auth/login.js
@@ -36,6 +36,7 @@ export default function PageLogin(props) {
 			{/* <br /> */}
 			<AuthForm onSubmit={handleSignIn} submitLabel="Log in" />
 			<LoginInfo onResetPassword={onResetPassword} />
+			<p>Don't have one yet? Create one on <a href="https://beta.radio4000.com">beta.radio4000.com</a></p>
 		</>
 	) : (
 		<>

diff --git a/src/pages/create/channel/import.js b/src/pages/create/channel/import.js
@@ -39,7 +39,13 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 
 			const data = await res.json()
 			setMigrationResult(data)
-			console.log(res.ok, res.status, res.statusText, 'api/import/firebase-realtime response data', data)
+			console.log(
+				res.ok,
+				res.status,
+				res.statusText,
+				'api/import/firebase-realtime response data',
+				data,
+			)
 			if (!res.ok) throw Error(data.message)
 			if (Object.keys(data).length === 0) throw Error('Empty response from migration backend')
 		} catch (error) {
@@ -58,78 +64,98 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 		loginMessage = `to import a radio channel from the previous system`
 	}
 
-	if (!session) {
-		return (
-			<>
-				<p>This tool will help you migrate your old Radio4000 channel to the new system.</p>
-				<p>You will need two accounts: one from the old Radio4000, one from the new. The old could be using Email, Facebook or Google to sign in. The new will always be email.</p>
-				<h2>
-					<Link to="/login">First, sign in to your NEW Radio4000 account</Link>
-				</h2>
-			</>
-		)
-	}
+	console.log(sessionFirebase?.email, session?.user?.email)
 
-	if (!sessionFirebase && !migrationResult)
-		return (
-			<>
-				<h2>
-					Now, sign in to your <em>OLD</em> account:
-				</h2>
-				<FirebaseAuth firebase={firebase} />
-			</>
-		)
+	if (!sessionFirebase) {
+		return <p>Loading</p>
+	}
 
 	return (
 		<>
+			<p>This tool will help you migrate your old Radio4000 channel to the new system.</p>
 			<p>
-				✔ Access to new account: {session.user.email}
-				<br />✔ Access to old account: {sessionFirebase.email}
+				You will need an account for each. You can not use your old Radio4000 account to sign in to
+				the new.
 			</p>
 
-			{sessionFirebase && !userChannelFirebase && (
-				<p>
-					This old Radio4000 account has no channel to migrate.
-					<br />
-					You can <button onClick={() => firebase.auth().signOut()}>sign out</button> and forget
-					about this account.
-				</p>
-			)}
+			{/* LOGIN STUFF */}
 
-			{!migrationResult && userChannelFirebase && (
-				<section>
+			<h3>Old account</h3>
+			{sessionFirebase?.email ? (
+				<>
 					<p>
-						Ready to import the channel <strong>@{userChannelFirebase.slug}</strong> into the new Radio4000 system.
-					</p>
-					<h2>
-						<button onClick={startMigration} disabled={loading || !tokenSupabase || !tokenFirebase}>
-							<strong>
-								Import <em>@{userChannelFirebase.slug}</em>
-							</strong>
+						✔ {sessionFirebase.email}{' '}
+						<button onClick={() => firebase.auth().signOut()} className="ButtonReset underline">
+							Log out
 						</button>
-					</h2>
-					<button onClick={() => firebase.auth().signOut()}>
-						Cancel and sign out of the old R4 system
-					</button>
-				</section>
+					</p>
+				</>
+			) : (
+				<FirebaseAuth firebase={firebase} />
 			)}
 
-			{migrationResult && !error ? (
+			<h3>New account</h3>
+			{sessionFirebase?.email && !session?.user?.email ? (
+				<p>
+					<Link to="/login">Sign in to your NEW Radio4000 account</Link>
+				</p>
+			) : (
 				<>
-					<h1>Successfully imported @{userChannelFirebase.slug}!</h1>
-					<p>Go to the new Radio4000. Your channel is waiting for you.</p>
-					<p><a href={`https://beta.radio4000.com/${userChannelFirebase.slug}`}>beta.radio4000.com/{userChannelFirebase.slug}</a></p>
+					<p>
+						{' '}
+						✔ {session.user.email} <Link to="/logout">Log out</Link>
+					</p>
 				</>
-			) : (
-				<ErrorDisplay error={error} />
 			)}
 
-			{userChannelFirebase && !session && (
-				<footer>
-					<small>You'll have to </small>
-					<LoginRequired register={true} importChannel={true} message={loginMessage} />
-				</footer>
+			{/* MIGRATE STUFF */}
+
+			{sessionFirebase?.email && session?.user?.email && (
+				<>
+					{!migrationResult && !userChannelFirebase ? (
+						<p>
+							This old Radio4000 account has no channel to migrate.
+							<br />
+							You can <button onClick={() => firebase.auth().signOut()}>sign out</button> and forget
+							about this account.
+						</p>
+					) : (
+						<section>
+							<h2>
+								Ready to import the radio channel <strong>@{userChannelFirebase.slug}</strong> into
+								the new Radio4000 system.
+							</h2>
+							<h2>
+								<button
+									onClick={startMigration}
+									disabled={loading || !tokenSupabase || !tokenFirebase}
+									className="SuperImportantButton"
+								>
+									<strong>
+										{loading ? 'Importing…' : 'Import'} <em>@{userChannelFirebase.slug}</em>
+									</strong>
+								</button>
+							</h2>
+						</section>
+					)}
+
+					{migrationResult && !error ? (
+						<>
+							<h1>Successfully imported @{userChannelFirebase.slug}!</h1>
+							<p>Go to the new Radio4000. Your channel is waiting for you.</p>
+							<p>
+								<a href={`https://beta.radio4000.com/${userChannelFirebase.slug}`}>
+									beta.radio4000.com/{userChannelFirebase.slug}
+								</a>
+							</p>
+						</>
+					) : (
+						<ErrorDisplay error={error} />
+					)}
+				</>
 			)}
+
+			{/* {session?.user?.email ? <p>Has supabase</p> : <p>needs supabase</p>} */}
 		</>
 	)
 }
diff --git a/src/styles/defaults.css b/src/styles/defaults.css
@@ -134,6 +134,9 @@ button[disabled] {
 .ButtonReset {
 	all: unset;
 }
+.underline {
+	text-decoration: underline;
+}
 
 /* Shared styles between buttons and some text inputs */
 button,

diff --git a/src/styles/layout-themes.css b/src/styles/layout-themes.css
@@ -14,6 +14,10 @@
 	--text-color: hsl(180deg 7% 90%);
 	--link-color: var(--text-color);
 	/* --lightgray: hsl(0, 0%, 14%); */
+
+	menu a[aria-current="page"] {
+		color: white;
+	}
 }
 
 /* Layout padding/margin behavior */
@@ -78,4 +82,3 @@ html,
 	border-top: 1px solid var(--darkgray);
 	background: var(--bg-color);
 }
-
diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -7,7 +7,7 @@
 	--black: hsl(255, 6%, 12%);
 
 	--green: hsl(130, 52%, 24%);
-	--orange: orange;
+	--orange: var(--purple);
 	--purple: #5e1ae6;
 	--red: hsl(0, 100%, 40%);