move all on import, center

.env.example

@@ -1,6 +1,7 @@
 # supabase config
-REACT_APP_SUPABASE_URL=https://my-project.supabase.co
-REACT_APP_SUPABASE_ANON_KEY=abcdefghijklmnopqrstuvwxyz
+REACT_APP_SUPABASE_URL=https://oupgudlkspsmzkmeovlh.supabase.co
+REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im91cGd1ZGxrc3BzbXprbWVvdmxoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTM0NTIwNzQsImV4cCI6MjAyOTAyODA3NH0.KAbKFBChJHtxTmOZM2pdeppIyNbcnQkEgSi6RA7OQdo
+
 
 # radi4000 api
 REACT_APP_RADIO4000_API_URL=https://api.radio4000.com

src/components/site/nav.js

@@ -4,8 +4,6 @@ import {DbSessionContext} from 'contexts/db-session'
 import CommandMenu from 'components/site/command-menu'
 import createCommands from 'utils/commands'
 
-const {RADIO4000_APP_NAME_MINI} = config
-
 export default function Nav(props) {
 	const navigate = useNavigate()
 
@@ -27,7 +25,7 @@ export default function Nav(props) {
 						<CommandMenu commands={commands}></CommandMenu>
 						<menu>
 							<li>
-								<Link to="/">{RADIO4000_APP_NAME_MINI} Migration Tool</Link>
+								<Link to="/">Radio4000 migration (v1 → v2)</Link>
 								{/* {!session && <Link to="/login">Login</Link>} */}
 								{session && (
 									<>

src/index.css

@@ -12,6 +12,3 @@
 @import url("./styles/command-menu.css");
 @import url("./styles/tracks.css");
 @import url("./styles/tags.css");
-
-/* plugin overwrites */
-@import url("./styles/firebaseui.css");

src/pages/auth/login.js

@@ -34,16 +34,17 @@ export default function PageLogin(props) {
 			{/* 	<summary>Log in to Radio4000</summary> */}
 			{/* </details> */}
 			{/* <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>
+
+			{/* <LoginInfo onResetPassword={onResetPassword} /> */}
+			<p>Migration of a v1 radio4000 channel, requires a v2 user account.</p>
+		<p>If you don't have one yet,<a href="https://radio4000.com">create it</a> then come back here</p>
 		</>
-	) : (
+		) : (
 		<>
 			<p>You are logged in.</p>
 			<button onClick={signOut}>Log out</button>
-		</>
-	)
+			</>
+		)
 }
 
 function LoginInfo({onResetPassword}) {

src/pages/auth/logout.js

@@ -8,7 +8,7 @@ export default function PageLogout({
 	useEffect(() => {
 		if (session) {
 			signOut().finally(() => {
-				navigate('/login', { replace: true })
+				navigate('/', { replace: true })
 			})
 		}
 		navigate('/login', { replace: true })

src/pages/create/channel/import.js

@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import {Link} from 'react-router-dom'
 import FirebaseAuth from 'components/firebase-ui/auth'
+import AuthForm from 'components/auth-form'
 import ErrorDisplay from 'components/error-display'
 // import LoginRequired from 'components/login-required'
 
@@ -11,7 +12,7 @@ import useUserChannelFirebase from 'hooks/use-user-channel-firebase'
 // This is not how to do it (?), but we can delay figuring it out until we need Firebase in a second place.
 startFirebase()
 
-export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, session}}) {
+export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, session, signIn}}) {
 	const [loading, setLoading] = useState(false)
 	const [error, setError] = useState(false)
 	const [migrationResult, setMigrationResult] = useState(false)
@@ -22,6 +23,18 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 	const tokenSupabase = session?.access_token
 	const tokenFirebase = sessionFirebase?.accessToken
 
+	const handleSignIn = async (data) => {
+		let res
+		try {
+			res = await signIn(data)
+			if (!res.error) {
+			}
+		} catch (error) {
+			console.log('Error login-in', error)
+		}
+		return res
+	}
+
 	const startMigration = async () => {
 		setLoading(true)
 		try {
@@ -64,40 +77,54 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 
 	return (
 		<>
-			<p>This tool will help you migrate your old Radio4000 channel to the new system.</p>
-			<p>
-				You will need an account for each. You can not use your old Radio4000 account to sign in to
-				the new.
-			</p>
-
-			{/* LOGIN STUFF */}
-
-			<h3>Old account</h3>
-			{sessionFirebase?.email ? (
-				<p>
-					✔ {sessionFirebase.email}{' '}
-					<button onClick={() => firebase.auth().signOut()} className="ButtonReset underline">
-						Log out
-					</button>
-				</p>
-			) : (
-				<FirebaseAuth firebase={firebase} />
-			)}
-
-			<h2>New account</h2>
-			{session?.user?.email ? (
-				<p>
-					✔ {session?.user.email} <Link to="/logout">Log out</Link>
-				</p>
-			) : (
-				<p>
-					<Link to="/login">Sign in to your NEW Radio4000 account</Link>
-				</p>
-			)}
-
-			{/* MIGRATE STUFF */}
-			{sessionFirebase?.email && session?.user?.email && (
-				<>
+			<p>Radio channel <strong>migration</strong> from <a href="https://v1.radio4000.com">v1.radio4000.com</a> to <a href="https://radio4000.com">v2.radio4000.com</a></p>
+		<ol>
+			<li>
+				Requires 2 existing accounts: a v1 and a v2 account
+			</li>
+			<li>
+				Log in v1 and v2 accounts
+			</li>
+			<li>
+				Click "import", wait a few seconds, visit your new radio page!
+			</li>
+			<li>
+				After migration, log out the 2 account here, and optionally delete your v1 account.
+			</li>
+		</ol>
+
+		{/* LOGIN STUFF */}
+
+		<r4-migration>
+			<r4-migration-step>
+				<h3>Login <u>v1</u> account</h3>
+				{sessionFirebase?.email ? (
+					<p>
+						✔ {sessionFirebase.email}{' '}
+						<button onClick={() => firebase.auth().signOut()} className="ButtonReset underline">
+							Log out
+						</button>
+					</p>
+				) : (
+					<FirebaseAuth firebase={firebase} />
+				)}
+			</r4-migration-step>
+
+			<r4-migration-step>
+				<h3>Login <u>v2</u> account</h3>
+				{session?.user?.email ? (
+					<p>
+						✔ {session?.user.email} <Link to="/logout">Log out</Link>
+					</p>
+				) : (
+					<AuthForm onSubmit={handleSignIn} submitLabel="Log in Radio4000 (v2)" />
+				)}
+			</r4-migration-step>
+
+			<r4-migration-step>
+				{/* MIGRATE STUFF */}
+				{sessionFirebase?.email && session?.user?.email ? (
+					<>
 					{!migrationResult && !userChannelFirebase ? (
 						<p>
 							This old Radio4000 account has no channel to migrate.
@@ -108,9 +135,11 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 					) : (
 						<section>
 							<h2>
-								Ready to import the radio channel <strong>@{userChannelFirebase.slug}</strong> into
-								the new Radio4000 system.
+								Start channel migration
 							</h2>
+							<p>
+								Import channel <strong>@{userChannelFirebase.slug}</strong> into radio4000 v2.
+							</p>
 							<h2>
 								<button
 									onClick={startMigration}
@@ -128,18 +157,24 @@ export default function PageNewChannelImport({dbSession: {radio4000ApiUrl, sessi
 					{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>
+						<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} />
 					)}
-				</>
-			)}
+					</>
+				) : (
+					<i>
+						Waiting for user authentication into v1 & v2 accounts, to start channel import.
+					</i>
+				)}
+			</r4-migration-step>
+		</r4-migration>
 		</>
 	)
 }

src/styles/defaults.css

@@ -45,9 +45,6 @@ h3 select {
 	max-width: 10em;
 	margin-left: 0.5rem;
 }
-h1, h2, h3, h4, h5, h6 {
-	margin-top: 0;
-}
 /* 48, 36, 24, 19, 16*/
 h1 {
 	font-size: 1.5em;

src/styles/layout-themes.css

@@ -40,6 +40,7 @@ body,
 	flex-direction: column;
 	flex-grow: 1;
 	min-height: 100%;
+	align-items: center;
 }
 
 /* Themes */
@@ -55,7 +56,6 @@ html,
 	scroll-behavior: smooth;
 	padding: 1em 1.5em 0;
 	width: 100%;
-	background-color: var(--bg-color);
 	color: var(--text-color);
 	transition: background-color ease-in-out 100ms, color ease-in-out 100ms;
 }
@@ -82,3 +82,26 @@ html,
 	border-top: 1px solid var(--darkgray);
 	background: var(--bg-color);
 }
+
+
+.Layout ol {
+	text-align: left;
+}
+
+/* migration only */
+r4-migration-step {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		background-color: var(--bg-color);
+		border-radius: 0.3rem;
+		padding: 1rem;
+		margin: 0.5rem;
+
+}
+r4-migration-step h3 {
+	padding: 1rem;
+}
+r4-migration-step p {
+	margin-bottom: 0;
+}

src/utils/commands.js

@@ -9,36 +9,36 @@ export default function createCommands({isSignedIn, navigate, userChannel}) {
 		},
 	})
 
-	commands.push({
-		label: 'Go to channels',
-		action: () => {
-			navigate('/channels')
-		},
-	})
+	/* commands.push({
+		 label: 'Go to channels',
+		 action: () => {
+		 navigate('/channels')
+		 },
+		 }) */
 
 	// Has a channel
 	if (userChannel) {
-		commands.push({
-			label: `Go to your channel: ${userChannel.name}`,
-			keys: 'g c',
-			action: () => navigate(`/${userChannel.slug}`),
-		})
-		commands.push({
-			label: `Create track`,
-			keys: 'c c',
-			action: () => navigate('/create/track'),
-		})
-		commands.push({
-			label: `Edit your channel`,
-			keys: 'g e',
-			action: () => navigate(`/${userChannel.slug}/edit`),
-		})
+		/* commands.push({
+			 label: `Go to your channel: ${userChannel.name}`,
+			 keys: 'g c',
+			 action: () => navigate(`/${userChannel.slug}`),
+			 }) */
+		/* commands.push({
+			 label: `Create track`,
+			 keys: 'c c',
+			 action: () => navigate('/create/track'),
+			 }) */
+		/* commands.push({
+			 label: `Edit your channel`,
+			 keys: 'g e',
+			 action: () => navigate(`/${userChannel.slug}/edit`),
+			 }) */
 		// Does not have a channel
 	} else {
-		commands.push({
-			label: `Create new channel`,
-			action: () => navigate(`/create/channel`),
-		})
+		/* commands.push({
+			 label: `Create new channel`,
+			 action: () => navigate(`/create/channel`),
+			 }) */
 		commands.push({
 			label: `Import channel`,
 			action: () => navigate(`/create/channel/import`),