diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx index 6a75dc99a8..b75f6b5054 100644 --- a/site/src/components/SignInForm/OAuthSignInForm.tsx +++ b/site/src/components/SignInForm/OAuthSignInForm.tsx @@ -14,10 +14,10 @@ type OAuthSignInFormProps = { authMethods?: AuthMethods } -const useStyles = makeStyles(() => ({ +const useStyles = makeStyles((theme) => ({ buttonIcon: { - width: 14, - height: 14, + width: theme.spacing(2), + height: theme.spacing(2), }, })) @@ -62,8 +62,7 @@ export const OAuthSignInForm: FC = ({ Open ID Connect icon ) : ( diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx index d900372002..870f67b81b 100644 --- a/site/src/components/SignInForm/SignInForm.tsx +++ b/site/src/components/SignInForm/SignInForm.tsx @@ -1,5 +1,4 @@ import { makeStyles } from "@material-ui/core/styles" -import Typography from "@material-ui/core/Typography" import { FormikTouched } from "formik" import { FC, useState } from "react" import { AuthMethods } from "../../api/typesGenerated" @@ -8,6 +7,8 @@ import { Maybe } from "../Conditionals/Maybe" import { PasswordSignInForm } from "./PasswordSignInForm" import { OAuthSignInForm } from "./OAuthSignInForm" import { BuiltInAuthFormValues } from "./SignInForm.types" +import Button from "@material-ui/core/Button" +import EmailIcon from "@material-ui/icons/EmailOutlined" export enum LoginErrors { AUTH_ERROR = "authError", @@ -66,11 +67,9 @@ const useStyles = makeStyles((theme) => ({ fontSize: 12, letterSpacing: 1, }, - showPasswordLink: { - cursor: "pointer", - fontSize: 12, - color: theme.palette.text.secondary, - marginTop: 12, + icon: { + width: theme.spacing(2), + height: theme.spacing(2), }, })) @@ -131,13 +130,22 @@ export const SignInForm: FC> = ({ authMethods={authMethods} /> + - +
+
Or
+
+
+ +
) diff --git a/site/src/i18n/en/loginPage.json b/site/src/i18n/en/loginPage.json index 187f6a4d14..2420c7c251 100644 --- a/site/src/i18n/en/loginPage.json +++ b/site/src/i18n/en/loginPage.json @@ -1,4 +1,4 @@ { "signInTo": "Sign in to", - "showPassword": "Show password login" + "showPassword": "Email and password" } diff --git a/site/src/pages/LoginPage/LoginPage.test.tsx b/site/src/pages/LoginPage/LoginPage.test.tsx index f272f9198c..d5f5bcff25 100644 --- a/site/src/pages/LoginPage/LoginPage.test.tsx +++ b/site/src/pages/LoginPage/LoginPage.test.tsx @@ -11,6 +11,9 @@ import { import { server } from "../../testHelpers/server" import { LoginPage } from "./LoginPage" import * as TypesGen from "api/typesGenerated" +import { i18n } from "i18n" + +const { t } = i18n describe("LoginPage", () => { beforeEach(() => { @@ -143,7 +146,8 @@ describe("LoginPage", () => { expect(screen.queryByText(Language.passwordSignIn)).not.toBeInTheDocument() await screen.findByText(Language.githubSignIn) - const showPasswordAuthLink = screen.getByText("Show password login") + const showPasswordLabel = t("showPassword", { ns: "loginPage" }) + const showPasswordAuthLink = screen.getByText(showPasswordLabel) await userEvent.click(showPasswordAuthLink) await screen.findByText(Language.passwordSignIn)