Emphasise 'sign in with phone' and 'sign with email link' as main sig…

…n in methods: * Make the 'sign in with google' and 'sign in with email and password' buttons smaller (icon only) on login screen * Add Key and Google icons to 'svg' package * Update english translation for email signin to 'sign in with email and password' * Update related e2e tests
eisbuk · Jul 6, 2023 · 2d92487 · 2d92487
1 parent 1103e37
commit 2d92487
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 20 deletions.
diff --git a/packages/client/src/react-redux-firebase-auth/ui/AuthDialog.tsx b/packages/client/src/react-redux-firebase-auth/ui/AuthDialog.tsx
@@ -7,6 +7,8 @@ import {
 } from "@firebase/auth";
 
 import { useTranslation, AuthTitle } from "@eisbuk/translations";
+import { Google, Key } from "@eisbuk/svg";
+import { HoverText, IconButton, IconButtonSize } from "@eisbuk/ui";
 
 import AuthButton from "./atoms/AuthButton";
 import AuthContainer from "./atoms/AuthContainer";
@@ -56,8 +58,8 @@ const AuthDialog: React.FC = () => {
         <AuthContainer>
           {({ Content }) => (
             <Content>
-              <ul className="list-none my-4">
-                {buttons.map(({ authFlow, label, ...button }) => (
+              <ul className="list-none my-4 mb-8">
+                {mainButtons.map(({ authFlow, label, ...button }) => (
                   <AuthButton
                     key={label}
                     {...button}
@@ -66,42 +68,62 @@ const AuthDialog: React.FC = () => {
                   />
                 ))}
               </ul>
+
+              <ul className="list-none flex gap-2 items-center">
+                <span className="h-0.5 w-full bg-gray-100" />
+                {additionalButtons.map(({ authFlow, label, Icon }) => (
+                  <li
+                    className="cursor-pointer m-1"
+                    onClick={() => setAuthFlow(authFlow)}
+                    aria-label={t(label)}
+                  >
+                    <HoverText text={t(label)}>
+                      <IconButton size={IconButtonSize.XS} className="">
+                        <Icon />
+                      </IconButton>
+                    </HoverText>
+                  </li>
+                ))}
+              </ul>
             </Content>
           )}
         </AuthContainer>
       );
   }
 };
 
-export const buttons = [
+export const mainButtons = [
   {
     color: "#ffff",
     backgroundColor: "#02bd7e",
     label: AuthTitle.SignInWithPhone,
     icon: "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/phone.svg",
     authFlow: AuthFlow.Phone,
   },
+  {
+    color: "#ffff",
+    backgroundColor: "#db4437",
+    label: `${AuthTitle.SignInWithEmailLink}`,
+    icon: "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/mail.svg",
+    authFlow: AuthFlow.EmailLink,
+  },
+];
+
+export const additionalButtons = [
   {
     color: "#757575",
     backgroundColor: "#ffffff",
     label: AuthTitle.SignInWithGoogle,
-    icon: "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg",
+    Icon: Google,
     authFlow: AuthFlow.Google,
   },
   {
     color: "#ffff",
-    backgroundColor: "#db4437",
+    backgroundColor: "rgba(0,0,0,0.8)",
     label: AuthTitle.SignInWithEmail,
-    icon: "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/mail.svg",
+    Icon: Key,
     authFlow: AuthFlow.Email,
   },
-  {
-    color: "#ffff",
-    backgroundColor: "rgba(0,0,0,0.8)",
-    label: `${AuthTitle.SignInWithEmailLink}`,
-    icon: "https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/mail.svg",
-    authFlow: AuthFlow.EmailLink,
-  },
 ];
 
 export default AuthDialog;
diff --git a/packages/e2e/integration/athlete_self_register.ts b/packages/e2e/integration/athlete_self_register.ts
@@ -47,7 +47,7 @@ describe("Athlete self registration", () => {
   });
 
   it("creates a new account with not-yet-registered email and allows for self registration using the form", () => {
-    cy.clickButton(t(AuthTitle.SignInWithEmail));
+    cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
     // since auth service is shared amongst all organizations
     // we're creating a new email each time to ensure the current email
     // is not yet registered (by any previous tests)

diff --git a/packages/e2e/integration/login_flow_spec.ts b/packages/e2e/integration/login_flow_spec.ts
@@ -45,7 +45,7 @@ describe("login", () => {
       cy.clearCookies();
       cy.visit(PrivateRoutes.Root);
       // start email auth flow
-      cy.clickButton(t(AuthTitle.SignInWithEmail));
+      cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
     });
 
     it("logs in with existing email", () => {
@@ -131,7 +131,7 @@ describe("login", () => {
       cy.clickButton(t(ActionButton.Cancel));
 
       // check mismatched password
-      cy.clickButton(t(AuthTitle.SignInWithEmail));
+      cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
       cy.getAttrWith("type", "email").type(defaultUser.email);
       cy.clickButton(t(ActionButton.Next));
       cy.getAttrWith("type", "password").type("invalid-password");
@@ -166,7 +166,7 @@ describe("login", () => {
       cy.clickButton(t(ActionButton.Cancel));
 
       // check sign in flow
-      cy.clickButton(t(AuthTitle.SignInWithEmail));
+      cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
       cy.getAttrWith("type", "email").type(defaultUser.email);
       cy.clickButton(t(ActionButton.Next));
       // password is required
@@ -415,7 +415,7 @@ describe("login", () => {
       const password = "password";
       cy.addAuthUser({ email: saul.email, password });
       // log in saul, who is not an admin, but exists in customers collection
-      cy.clickButton(t(AuthTitle.SignInWithEmail));
+      cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
       cy.getAttrWith("type", "email").type(saul.email);
       cy.clickButton(t(ActionButton.Next));
       cy.contains(t(AuthTitle.SignIn));
@@ -431,7 +431,7 @@ describe("login", () => {
       const password = "password";
       cy.addAuthUser({ email, password });
       // log in saul, who is not an admin, but exists in customers collection
-      cy.clickButton(t(AuthTitle.SignInWithEmail));
+      cy.getAttrWith("aria-label", t(AuthTitle.SignInWithEmail)).click();
       cy.getAttrWith("type", "email").type(email);
       cy.clickButton(t(ActionButton.Next));
       cy.contains(t(AuthTitle.SignIn));

diff --git a/packages/svg/src/assets/google.svg b/packages/svg/src/assets/google.svg
diff --git a/packages/svg/src/assets/key.svg b/packages/svg/src/assets/key.svg
diff --git a/packages/svg/src/index.ts b/packages/svg/src/index.ts
@@ -33,6 +33,8 @@ export { default as Identification } from "./assets/identification.svg";
 export { default as FolderOpen } from "./assets/folder-open.svg";
 export { default as Plus } from "./assets/plus.svg";
 export { default as Minus } from "./assets/minus.svg";
+export { default as Google } from "./assets/google.svg";
+export { default as Key } from "./assets/key.svg";
 
 // Export a standard type for SVG component, to be used throughout the app
 import type { SVGComponent } from "./types";

diff --git a/packages/translations/src/dict/en.json b/packages/translations/src/dict/en.json
@@ -50,7 +50,7 @@
     "Unknown": "Unknown error"
   },
   "AuthTitle": {
-    "SignInWithEmail": "Sign in with email",
+    "SignInWithEmail": "Sign in with email and password",
     "SignInWithEmailLink": "Sign in with email link",
     "SignInWithPhone": "Sign in with phone",
     "SignInWithGoogle": "Sign in with Google",