Adjust login page for prefix visit

Author: Laurie T. Malau

components/dashboard/src/App.test.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { getURLHash } from './App'
+
+test('urlHash', () => {
+    global.window = Object.create(window);
+    Object.defineProperty(window, 'location', {
+        value: {
+            href: '#http://example.org/',
+            hash: '#examples'
+        }
+    });
+
+    expect(getURLHash()).toBe('examples');
+});

components/dashboard/src/App.tsx

@@ -85,7 +85,7 @@ function isWebsiteSlug(pathName: string) {
     return slugs.some(slug => pathName.startsWith('/' + slug + '/') || pathName === ('/' + slug));
 }
 
-function getURLHash() {
+export function getURLHash() {
     return window.location.hash.replace(/^[#/]+/, '');
 }
 

components/dashboard/src/Login.tsx

@@ -21,6 +21,7 @@ import customize from "./images/welcome/customize.svg";
 import fresh from "./images/welcome/fresh.svg";
 import prebuild from "./images/welcome/prebuild.svg";
 import exclamation from "./images/exclamation.svg";
+import { getURLHash } from "./App";
 
 
 function Item(props: { icon: string, iconSize?: string, text: string }) {
@@ -46,17 +47,27 @@ export function hasVisitedMarketingWebsiteBefore() {
 export function Login() {
     const { setUser } = useContext(UserContext);
     const { setTeams } = useContext(TeamsContext);
-    const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore();
+    const urlHash = getURLHash();
+    const URLFromPrefix = urlHash ? new URL(urlHash).host : null;
+    const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && urlHash.length === 0;
 
     const [ authProviders, setAuthProviders ] = useState<AuthProviderInfo[]>([]);
     const [ errorMessage, setErrorMessage ] = useState<string | undefined>(undefined);
+    const [ providerFromPrefix, setProviderFromPrefix ] = useState<AuthProviderInfo>();
 
     useEffect(() => {
         (async () => {
             setAuthProviders(await getGitpodService().server.getAuthProviders());
         })();
     }, [])
 
+    useEffect(() => {
+        if (URLFromPrefix) {
+            const providerFromPrefix = authProviders.find(provider => provider.host === URLFromPrefix);
+            setProviderFromPrefix(providerFromPrefix);
+        }
+    }, [authProviders])
+
     const authorizeSuccessful = async (payload?: string) => {
         updateUser().catch(console.error);
         // Check for a valid returnTo in payload
@@ -69,7 +80,7 @@ export function Login() {
 
     const updateUser = async () => {
         await getGitpodService().reconnect();
-        const [ user, teams ] = await Promise.all([
+        const [user, teams] = await Promise.all([
             getGitpodService().server.getLoggedInUser(),
             getGitpodService().server.getTeams(),
         ]);
@@ -104,6 +115,49 @@ export function Login() {
         }
     }
 
+    const renderWelcomeText = () => {
+        if (showWelcome) {
+            return (
+                <div className="mx-auto text-center pb-8 space-y-2">
+                    <h1 className="text-3xl">Log in to Gitpod</h1>
+                    <h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
+                </div>
+            )
+        }
+        return (
+            <div className="mx-auto text-center pb-8 space-y-2">
+                <h1 className="text-3xl">Log in / Sign up</h1>
+                <h2 className="text-m text-gray-400">Open a cloud-based environment for</h2>
+                <h2 className="text-m text-gray-400">{urlHash}</h2>
+            </div>
+        )
+    }
+
+    const renderAuthProviders = () => {
+        if (showWelcome) {
+            <div className="flex flex-col space-y-3 items-center">
+                {authProviders.map(ap => {
+                    return (
+                        <button key={"button" + ap.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(ap.host)}>
+                            {iconForAuthProvider(ap.authProviderType)}
+                            <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(ap.host)}</span>
+                        </button>
+                    );
+                })}
+            </div>
+        }
+        if (!showWelcome && providerFromPrefix) {
+            return (
+                <div className="flex flex-col space-y-3 items-center">
+                    <button key={"button" + providerFromPrefix.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(providerFromPrefix.host)}>
+                        {iconForAuthProvider(providerFromPrefix.authProviderType)}
+                        <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(providerFromPrefix.host)}</span>
+                    </button>
+                </div>
+            )
+        }
+    }
+
     return (<div id="login-container" className="z-50 flex w-screen h-screen">
         {showWelcome ? <div id="feature-section" className="flex-grow bg-gray-100 dark:bg-gray-800 w-1/2 hidden lg:block">
             <div id="feature-section-column" className="flex max-w-xl h-full mx-auto pt-6">
@@ -138,20 +192,10 @@ export function Login() {
                         <div className="mx-auto pb-8">
                             <img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
                         </div>
-                        <div className="mx-auto text-center pb-8 space-y-2">
-                            <h1 className="text-3xl">Log in{showWelcome ? '' : ' to Gitpod'}</h1>
-                            <h2 className="uppercase text-sm text-gray-400">ALWAYS READY-TO-CODE</h2>
-                        </div>
-                        <div className="flex flex-col space-y-3 items-center">
-                            {authProviders.map(ap => {
-                                return (
-                                    <button key={"button" + ap.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(ap.host)}>
-                                        {iconForAuthProvider(ap.authProviderType)}
-                                        <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(ap.host)}</span>
-                                    </button>
-                                );
-                            })}
-                        </div>
+
+                        {renderWelcomeText()}
+
+                        {renderAuthProviders()}
 
                         {errorMessage && (
                             <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
@@ -174,5 +218,5 @@ export function Login() {
             </div>
 
         </div>
-    </div>);
+    </div >);
 }