[dashboard] Improve email address already in use

1. Advertise to use another identity provider.
2. Handle same error in New Project wizard.

Fixes #5975

Author: AlexTugarev

components/dashboard/src/Login.tsx

@@ -93,7 +93,7 @@ export function Login() {
                     } else {
                         errorMessage = payload.description ? payload.description : `Error: ${payload.error}`;
                         if (payload.error === "email_taken") {
-                            errorMessage = `Email address already exists. Log in using a different provider.`;
+                            errorMessage = `Email address already used in another account. Please log in with ${(payload as any).host}.`;
                         }
                     }
                     setErrorMessage(errorMessage);

components/dashboard/src/projects/NewProject.tsx

@@ -19,6 +19,7 @@ import search from "../icons/search.svg";
 import moment from "moment";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
+import exclamation from "./images/exclamation.svg";
 
 export default function NewProject() {
     const location = useLocation();
@@ -404,6 +405,7 @@ function GitProviders(props: {
     onHostSelected: (host: string, updateUser?: boolean) => void
 }) {
     const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+    const [ errorMessage, setErrorMessage ] = useState<string | undefined>(undefined);
 
     useEffect(() => {
         (async () => {
@@ -413,6 +415,8 @@ function GitProviders(props: {
     }, []);
 
     const selectProvider = async (ap: AuthProviderInfo) => {
+        setErrorMessage(undefined);
+
         const token = await getGitpodService().server.getToken({ host: ap.host });
         if (token) {
             props.onHostSelected(ap.host);
@@ -424,8 +428,17 @@ function GitProviders(props: {
             onSuccess: async () => {
                 props.onHostSelected(ap.host, true);
             },
-            onError: (error) => {
-                console.log(error);
+            onError: (payload) => {
+                let errorMessage: string;
+                if (typeof payload === "string") {
+                    errorMessage = payload;
+                } else {
+                    errorMessage = payload.description ? payload.description : `Error: ${payload.error}`;
+                    if (payload.error === "email_taken") {
+                        errorMessage = `Email address already used in another account. Please log in with ${(payload as any).host}.`;
+                    }
+                }
+                setErrorMessage(errorMessage);
             }
         });
     }
@@ -446,6 +459,18 @@ function GitProviders(props: {
                         );
                     })}
                 </div>
+
+                {errorMessage && (
+                    <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
+                        <div className="pr-3 self-center w-6">
+                            <img src={exclamation} />
+                        </div>
+                        <div className="flex-1 flex flex-col">
+                            <p className="text-gitpod-red text-sm">{errorMessage}</p>
+                        </div>
+                    </div>
+                )}
+
             </div>
         </div>
     )

components/server/src/auth/errors.ts

@@ -69,12 +69,11 @@ export namespace SelectAccountException {
 }
 
 export interface EmailAddressAlreadyTakenException extends AuthException {
-    payload: string;
 }
 export namespace EmailAddressAlreadyTakenException {
     const type = "EmailAddressAlreadyTakenException";
-    export function create(message: string) {
-        return AuthException.create(type, message, message);
+    export function create(message: string, payload: object | undefined) {
+        return AuthException.create(type, message, payload);
     }
     export function is(error: any): error is EmailAddressAlreadyTakenException {
         return AuthException.is(error) && error.authException === type;

components/server/src/auth/generic-auth-provider.ts

@@ -343,7 +343,7 @@ export class GenericAuthProvider implements AuthProvider {
                 return this.sendCompletionRedirectWithError(response, err.payload);
             }
             if (EmailAddressAlreadyTakenException.is(err)) {
-                return this.sendCompletionRedirectWithError(response, { error: "email_taken" });
+                return this.sendCompletionRedirectWithError(response, { error: "email_taken", host: err.payload?.host });
             }
 
             let message = 'Authorization failed. Please try again.';
@@ -448,15 +448,12 @@ export class GenericAuthProvider implements AuthProvider {
                 if (!currentGitpodUser) {
 
                     // signup new accounts with email adresses already taken is disallowed
-                    const existingUserWithSameEmail = (await this.userDb.findUsersByEmail(primaryEmail))[0];
-                    if (existingUserWithSameEmail) {
-                        try {
-                            await this.userService.asserNoAccountWithEmail(primaryEmail);
-                        } catch (error) {
-                            log.warn(`Login attempt with matching email address.`, { ...defaultLogPayload, authUser, candidate, clientInfo });
-                            done(error, undefined);
-                            return;
-                        }
+                    try {
+                        await this.userService.asserNoAccountWithEmail(primaryEmail);
+                    } catch (error) {
+                        log.warn(`Login attempt with matching email address.`, { ...defaultLogPayload, authUser, candidate, clientInfo });
+                        done(error, undefined);
+                        return;
                     }
                 }
             }

components/server/src/user/user-service.ts

@@ -335,8 +335,10 @@ export class UserService {
         /*
          * /!\ the given email address is used in another user account.
          */
+        const authProviderId = existingUser.identities.find(i => i.primaryEmail === email)?.authProviderId;
+        const host = this.hostContextProvider.getAll().find(c => c.authProvider.authProviderId === authProviderId)?.authProvider?.info?.host || "unknown";
 
-        throw EmailAddressAlreadyTakenException.create(`Email address is already in use.`);
+        throw EmailAddressAlreadyTakenException.create(`Email address is already in use.`, { host });
     }
 
 }