From 404168fe7da6b50025bcce522bffe57fe0397e17 Mon Sep 17 00:00:00 2001 From: Jeroen Reumkens Date: Tue, 13 Sep 2022 18:35:14 +0200 Subject: [PATCH] Feat/3796 new UI for signin (#4369) Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- apps/storybook/stories/Input.stories.tsx | 9 +- apps/web/components/v2/ui/AuthContainer.tsx | 4 +- apps/web/middleware.ts | 1 + apps/web/pages/v2/auth/login.tsx | 100 +++++++++--------- apps/web/public/static/locales/en/common.json | 3 + packages/ui/v2/core/form/fields.tsx | 39 ++++++- packages/ui/v2/modules/auth/SAMLLogin.tsx | 48 ++++----- 7 files changed, 123 insertions(+), 81 deletions(-) diff --git a/apps/storybook/stories/Input.stories.tsx b/apps/storybook/stories/Input.stories.tsx index 3d2519cd41..343a38f93d 100644 --- a/apps/storybook/stories/Input.stories.tsx +++ b/apps/storybook/stories/Input.stories.tsx @@ -1,7 +1,8 @@ +import { TooltipProvider } from "@radix-ui/react-tooltip"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import { Copy } from "react-feather"; -import { TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields"; +import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields"; import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker"; export default { @@ -66,3 +67,9 @@ export const TextAreaInput: ComponentStory = () => ( ); export const DatePickerInput: ComponentStory = () => ; + +export const PasswordInput: ComponentStory = () => ( + + + +); diff --git a/apps/web/components/v2/ui/AuthContainer.tsx b/apps/web/components/v2/ui/AuthContainer.tsx index e74a03d982..f34f51b7f7 100644 --- a/apps/web/components/v2/ui/AuthContainer.tsx +++ b/apps/web/components/v2/ui/AuthContainer.tsx @@ -32,10 +32,10 @@ export default function AuthContainer(props: React.PropsWithChildren) { )}
-
+
{props.children}
-
{props.footerText}
+
{props.footerText}
); diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index 0f1f96b230..58ee523240 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -18,6 +18,7 @@ const V2_WHITELIST = [ "/workflows", "/apps", "/success", + "/auth/login", ]; const V2_BLACKLIST = [ // diff --git a/apps/web/pages/v2/auth/login.tsx b/apps/web/pages/v2/auth/login.tsx index 80c66a1dce..f56db78daf 100644 --- a/apps/web/pages/v2/auth/login.tsx +++ b/apps/web/pages/v2/auth/login.tsx @@ -5,13 +5,14 @@ import Link from "next/link"; import { useRouter } from "next/router"; import { useState } from "react"; import { useForm } from "react-hook-form"; +import { FaGoogle } from "react-icons/fa"; import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import prisma from "@calcom/prisma"; +import { Icon } from "@calcom/ui"; import { Alert } from "@calcom/ui/Alert"; -import { Icon } from "@calcom/ui/Icon"; import { Button, EmailField, Form, PasswordField } from "@calcom/ui/v2"; import SAMLLogin from "@calcom/ui/v2/modules/auth/SAMLLogin"; @@ -22,7 +23,7 @@ import { inferSSRProps } from "@lib/types/inferSSRProps"; import AddToHomescreen from "@components/AddToHomescreen"; import TwoFactor from "@components/auth/TwoFactor"; -import AuthContainer from "@components/ui/AuthContainer"; +import AuthContainer from "@components/v2/ui/AuthContainer"; import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants"; import { ssrInit } from "@server/lib/ssr"; @@ -76,12 +77,9 @@ export default function Login({ callbackUrl = safeCallbackUrl || ""; const LoginFooter = ( - - {t("dont_have_an_account")}{" "} - - {t("create_an_account")} - - + + {t("i_dont_have_an_account")} + ); const TwoFactorFooter = ( @@ -106,7 +104,6 @@ export default function Login({ footerText={twoFactorRequired ? TwoFactorFooter : LoginFooter}>
{ setErrorMessage(null); telemetry.event(telemetryEventTypes.login, collectPageParameters()); @@ -132,51 +129,52 @@ export default function Login({ {...form.register("csrfToken")} /> -
- -
- - +
+ +
+ + +
-
- {twoFactorRequired && } + {twoFactorRequired && } - {errorMessage && } -
-
-
{!twoFactorRequired && ( <> - {isGoogleLoginEnabled && ( -
+ {(isGoogleLoginEnabled || isSAMLLoginEnabled) &&
} +
+ {isGoogleLoginEnabled && ( -
- )} - {isSAMLLoginEnabled && ( - - )} + )} + {isSAMLLoginEnabled && ( + + )} +
)} diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 9e49b30e37..ccd6400299 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -206,6 +206,7 @@ "2fa_enter_six_digit_code": "Enter the six-digit code from your authenticator app below.", "create_an_account": "Create an account", "dont_have_an_account": "Don't have an account?", + "i_dont_have_an_account": "I don't have an account", "2fa_code": "Two-Factor Code", "sign_in_account": "Sign in to your account", "sign_in": "Sign in", @@ -266,6 +267,8 @@ "enter_new_password": "Enter the new password you'd like for your account.", "reset_password": "Reset Password", "change_your_password": "Change your password", + "show_password": "Show password", + "hide_password": "Hide password", "try_again": "Try Again", "request_is_expired": "That Request is Expired.", "reset_instructions": "Enter the email address associated with your account and we will send you a link to reset your password.", diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx index 81375324e2..04d779cdc7 100644 --- a/packages/ui/v2/core/form/fields.tsx +++ b/packages/ui/v2/core/form/fields.tsx @@ -1,6 +1,6 @@ import { useId } from "@radix-ui/react-id"; -import React, { forwardRef, ReactElement, ReactNode, Ref } from "react"; -import { Check, Circle, Info, X } from "react-feather"; +import React, { forwardRef, ReactElement, ReactNode, Ref, useCallback, useMemo, useState } from "react"; +import { Check, Circle, Info, X, Eye, EyeOff } from "react-feather"; import { FieldErrors, FieldValues, @@ -13,6 +13,7 @@ import { import classNames from "@calcom/lib/classNames"; import { getErrorFromUnknown } from "@calcom/lib/errors"; import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Tooltip } from "@calcom/ui/v2"; import showToast from "@calcom/ui/v2/core/notifications"; import { Alert } from "../../../Alert"; @@ -248,7 +249,39 @@ export const PasswordField = forwardRef(funct props, ref ) { - return ; + const { t } = useLocale(); + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + const toggleIsPasswordVisible = useCallback( + () => setIsPasswordVisible(!isPasswordVisible), + [isPasswordVisible, setIsPasswordVisible] + ); + const textLabel = isPasswordVisible ? t("hide_password") : t("show_password"); + + return ( +
+ + + + + +
+ ); }); export const EmailInput = forwardRef(function EmailInput(props, ref) { diff --git a/packages/ui/v2/modules/auth/SAMLLogin.tsx b/packages/ui/v2/modules/auth/SAMLLogin.tsx index ddaec5bec8..d47182410c 100644 --- a/packages/ui/v2/modules/auth/SAMLLogin.tsx +++ b/packages/ui/v2/modules/auth/SAMLLogin.tsx @@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { trpc } from "@calcom/trpc/react"; +import { Icon } from "@calcom/ui"; import Button from "@calcom/ui/v2/core/Button"; interface Props { @@ -30,32 +31,31 @@ export default function SAMLLogin(props: Props) { }); return ( -
- -
+ // hosted solution, fetch tenant and product from the backend + mutation.mutate({ + email: methods.getValues("email"), + }); + } + }}> + {t("signin_with_saml")} + ); }