Adjust login page for prefix visit

Author: Laurie T. Malau

components/dashboard/src/App.test.ts

@@ -0,0 +1,18 @@
+/**
+ * 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: {
+            hash: '#https://example.org/user/repo'
+        }
+    });
+
+    expect(getURLHash()).toBe('https://example.org/user/repo');
+});

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,37 @@ export function hasVisitedMarketingWebsiteBefore() {
 export function Login() {
     const { setUser } = useContext(UserContext);
     const { setTeams } = useContext(TeamsContext);
-    const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore();
+    const urlHash = getURLHash();
+    let hostFromContext: string | undefined;
+    let repoPathname: string | undefined;
+    try {
+        if (urlHash.length > 0) {
+            const url = new URL(urlHash);
+            hostFromContext = url.host;
+            repoPathname = url.pathname;
+        }
+    } catch (error) {
+        // Hash is not a valid URL
+    }
 
-    const [ authProviders, setAuthProviders ] = useState<AuthProviderInfo[]>([]);
-    const [ errorMessage, setErrorMessage ] = useState<string | undefined>(undefined);
+    const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+    const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+    const [providerFromContext, setProviderFromContext] = useState<AuthProviderInfo>();
+    const showWelcome = !hasLoggedInBefore() && !hasVisitedMarketingWebsiteBefore() && !urlHash.startsWith("https://");
 
     useEffect(() => {
         (async () => {
             setAuthProviders(await getGitpodService().server.getAuthProviders());
         })();
     }, [])
 
+    useEffect(() => {
+        if (hostFromContext && authProviders) {
+            const providerFromContext = authProviders.find(provider => provider.host === hostFromContext);
+            setProviderFromContext(providerFromContext);
+        }
+    }, [authProviders])
+
     const authorizeSuccessful = async (payload?: string) => {
         updateUser().catch(console.error);
         // Check for a valid returnTo in payload
@@ -69,7 +90,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(),
         ]);
@@ -136,21 +157,37 @@ export function Login() {
                 <div className="flex-grow h-100 flex flex-row items-center justify-center" >
                     <div className="rounded-xl px-10 py-10 mx-auto">
                         <div className="mx-auto pb-8">
-                            <img src={gitpodIcon} className="h-16 mx-auto" alt="Gitpod's logo" />
+                            <img src={providerFromContext ? gitpod : gitpodIcon} className="h-14 mx-auto block dark:hidden" alt="Gitpod's logo" />
+                            <img src={gitpodDark} className="h-14 hidden dark:block" alt="Gitpod dark theme 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>
+                            {providerFromContext
+                                ? <>
+                                    <h2 className="text-xl text-black dark:text-gray-50 font-semibold">Open a cloud-based development environment</h2>
+                                    <h2 className="text-xl">for the repository {repoPathname?.slice(1)}</h2>
+                                </>
+                                : <>
+                                    <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>
+                            {providerFromContext
+                                ?
+                                    <button key={"button" + providerFromContext.host} className="btn-login flex-none w-56 h-10 p-0 inline-flex" onClick={() => openLogin(providerFromContext.host)}>
+                                        {iconForAuthProvider(providerFromContext.authProviderType)}
+                                        <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">Continue with {simplifyProviderName(providerFromContext.host)}</span>
                                     </button>
-                                );
-                            })}
+                                :
+                                    authProviders.map(ap =>
+                                        <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>
 
                         {errorMessage && (