diff --git a/packages/client/src/react-redux-firebase-auth/ui/AuthDialog.tsx b/packages/client/src/react-redux-firebase-auth/ui/AuthDialog.tsx
index fc6ad4b2d..95b7addd3 100644
--- 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 = () => {
{({ Content }) => (
-
- {buttons.map(({ authFlow, label, ...button }) => (
+
+ {mainButtons.map(({ authFlow, label, ...button }) => (
{
/>
))}
+
+
+
+ {additionalButtons.map(({ authFlow, label, Icon }) => (
+ - setAuthFlow(authFlow)}
+ aria-label={t(label)}
+ >
+
+
+
+
+
+
+ ))}
+
)}
@@ -73,7 +92,7 @@ const AuthDialog: React.FC = () => {
}
};
-export const buttons = [
+export const mainButtons = [
{
color: "#ffff",
backgroundColor: "#02bd7e",
@@ -81,27 +100,30 @@ export const buttons = [
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
index 24fd5d9c7..8e686617d 100644
--- 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
index 03ccd47f1..bc0eeacbf 100644
--- 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
new file mode 100644
index 000000000..4cf163bfe
--- /dev/null
+++ b/packages/svg/src/assets/google.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/svg/src/assets/key.svg b/packages/svg/src/assets/key.svg
new file mode 100644
index 000000000..17ab14209
--- /dev/null
+++ b/packages/svg/src/assets/key.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/svg/src/index.ts b/packages/svg/src/index.ts
index 943c42d2e..2c88a8644 100644
--- 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
index fa393a084..cc2ac68cb 100644
--- 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",