* Revert "feat: Update UI of signup / login pages (#16710)"
This reverts commit b879aeef09.
* revert
This commit is contained in:
Benny Joo
@@ -39,7 +39,7 @@ interface LoginValues {
|
||||
}
|
||||
|
||||
const GoogleIcon = () => (
|
||||
<img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon-colored.svg" alt="" />
|
||||
<img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
|
||||
);
|
||||
export type PageProps = inferSSRProps<typeof getServerSideProps>;
|
||||
export default function Login({
|
||||
@@ -95,6 +95,12 @@ PageProps & WithNonceProps<{}>) {
|
||||
|
||||
callbackUrl = safeCallbackUrl || "";
|
||||
|
||||
const LoginFooter = (
|
||||
<Link href={`${WEBSITE_URL}/signup`} className="text-brand-500 font-medium">
|
||||
{t("dont_have_an_account")}
|
||||
</Link>
|
||||
);
|
||||
|
||||
const TwoFactorFooter = (
|
||||
<>
|
||||
<Button
|
||||
@@ -172,27 +178,6 @@ PageProps & WithNonceProps<{}>) {
|
||||
? true
|
||||
: isSAMLLoginEnabled && !isPending && data?.connectionExists;
|
||||
|
||||
const LoginFooter = (
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="text-subtle">{t("dont_have_an_account")}</p>
|
||||
<Link href={`${WEBSITE_URL}/signup`} className="text-brand-500 font-medium">
|
||||
{t("sign_up")}
|
||||
</Link>
|
||||
</div>
|
||||
{displaySSOLogin && (
|
||||
<div className="flex items-center gap-1">
|
||||
<p className="text-subtle">Have a SAML account?</p>
|
||||
<SAMLLogin
|
||||
samlTenantID={samlTenantID}
|
||||
samlProductID={samlProductID}
|
||||
setErrorMessage={setErrorMessage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
|
||||
<AuthContainer
|
||||
@@ -210,42 +195,6 @@ PageProps & WithNonceProps<{}>) {
|
||||
: null
|
||||
}>
|
||||
<FormProvider {...methods}>
|
||||
{!twoFactorRequired && (
|
||||
<>
|
||||
<div className="space-y-3">
|
||||
{isGoogleLoginEnabled && (
|
||||
<Button
|
||||
color="primary"
|
||||
className="w-full justify-center"
|
||||
disabled={formState.isSubmitting}
|
||||
data-testid="google"
|
||||
CustomStartIcon={<GoogleIcon />}
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
setLastUsed("google");
|
||||
await signIn("google", {
|
||||
callbackUrl,
|
||||
});
|
||||
}}>
|
||||
<span>{t("signin_with_google")}</span>
|
||||
{lastUsed === "google" && <LastUsed />}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{isGoogleLoginEnabled && (
|
||||
<div className="my-8">
|
||||
<div className="relative flex items-center">
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
<span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
|
||||
{t("or").toLocaleLowerCase()}
|
||||
</span>
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<form onSubmit={methods.handleSubmit(onSubmit)} noValidate data-testid="login-form">
|
||||
<div>
|
||||
<input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
|
||||
@@ -284,7 +233,7 @@ PageProps & WithNonceProps<{}>) {
|
||||
{errorMessage && <Alert severity="error" title={errorMessage} />}
|
||||
<Button
|
||||
type="submit"
|
||||
color="secondary"
|
||||
color="primary"
|
||||
disabled={formState.isSubmitting}
|
||||
className="w-full justify-center">
|
||||
<span>{twoFactorRequired ? t("submit") : t("sign_in")}</span>
|
||||
@@ -294,6 +243,38 @@ PageProps & WithNonceProps<{}>) {
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{!twoFactorRequired && (
|
||||
<>
|
||||
{(isGoogleLoginEnabled || displaySSOLogin) && <hr className="border-subtle my-8" />}
|
||||
<div className="space-y-3">
|
||||
{isGoogleLoginEnabled && (
|
||||
<Button
|
||||
color="secondary"
|
||||
className="w-full justify-center"
|
||||
disabled={formState.isSubmitting}
|
||||
data-testid="google"
|
||||
CustomStartIcon={<GoogleIcon />}
|
||||
onClick={async (e) => {
|
||||
e.preventDefault();
|
||||
setLastUsed("google");
|
||||
await signIn("google", {
|
||||
callbackUrl,
|
||||
});
|
||||
}}>
|
||||
<span>{t("signin_with_google")}</span>
|
||||
{lastUsed === "google" && <LastUsed />}
|
||||
</Button>
|
||||
)}
|
||||
{displaySSOLogin && (
|
||||
<SAMLLogin
|
||||
samlTenantID={samlTenantID}
|
||||
samlProductID={samlProductID}
|
||||
setErrorMessage={setErrorMessage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</FormProvider>
|
||||
</AuthContainer>
|
||||
<AddToHomescreen />
|
||||
|
||||
+177
-216
@@ -46,9 +46,9 @@ import {
|
||||
TextField,
|
||||
Form,
|
||||
Alert,
|
||||
showToast,
|
||||
CheckboxField,
|
||||
Icon,
|
||||
showToast,
|
||||
} from "@calcom/ui";
|
||||
|
||||
import type { getServerSideProps } from "@lib/signup/getServerSideProps";
|
||||
@@ -179,12 +179,9 @@ export default function Signup({
|
||||
redirectUrl,
|
||||
emailVerificationEnabled,
|
||||
}: SignupProps) {
|
||||
const isOrgInviteByLink = orgSlug && !prepopulateFormValues?.username;
|
||||
const displayMiddleDivider = isGoogleLoginEnabled; // Add the isOutlookLoginEnabled flag here when Outlook login is added
|
||||
const [premiumUsername, setPremiumUsername] = useState(false);
|
||||
const [usernameTaken, setUsernameTaken] = useState(false);
|
||||
const [isGoogleLoading, setIsGoogleLoading] = useState(false);
|
||||
const [displayEmailForm, setDisplayEmailForm] = useState(token);
|
||||
const searchParams = useCompatSearchParams();
|
||||
const telemetry = useTelemetry();
|
||||
const { t, i18n } = useLocale();
|
||||
@@ -213,7 +210,6 @@ export default function Signup({
|
||||
}
|
||||
|
||||
const loadingSubmitState = isSubmitSuccessful || isSubmitting;
|
||||
const displayBackButton = token ? false : displayEmailForm;
|
||||
|
||||
const handleErrorsAndStripe = async (resp: Response) => {
|
||||
if (!resp.ok) {
|
||||
@@ -233,6 +229,7 @@ export default function Signup({
|
||||
}
|
||||
};
|
||||
|
||||
const isOrgInviteByLink = orgSlug && !prepopulateFormValues?.username;
|
||||
const isPlatformUser = redirectUrl?.includes("platform") && redirectUrl?.includes("new");
|
||||
|
||||
const signUp: SubmitHandler<FormValues> = async (_data) => {
|
||||
@@ -336,19 +333,6 @@ export default function Signup({
|
||||
<HeadSeo title={t("sign_up")} description={t("sign_up")} />
|
||||
{/* Left side */}
|
||||
<div className="ml-auto mr-auto mt-0 flex w-full max-w-xl flex-col px-4 pt-6 sm:px-16 md:px-20 lg:mt-12 2xl:px-28">
|
||||
{displayBackButton && (
|
||||
<div className="flex w-fit lg:-mt-12">
|
||||
<Button
|
||||
color="minimal"
|
||||
className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group mb-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4 transition"
|
||||
StartIcon="arrow-left"
|
||||
onClick={() => {
|
||||
setDisplayEmailForm(false);
|
||||
}}>
|
||||
{t("back")}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="font-cal text-[28px] leading-none ">
|
||||
{IS_CALCOM ? t("create_your_calcom_account") : t("create_your_account")}
|
||||
@@ -363,220 +347,197 @@ export default function Signup({
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
{displayEmailForm && (
|
||||
<div className="mt-12">
|
||||
<Form
|
||||
className="flex flex-col gap-4"
|
||||
form={formMethods}
|
||||
handleSubmit={async (values) => {
|
||||
let updatedValues = values;
|
||||
if (!formMethods.getValues().username && isOrgInviteByLink && orgAutoAcceptEmail) {
|
||||
updatedValues = {
|
||||
...values,
|
||||
username: getOrgUsernameFromEmail(values.email, orgAutoAcceptEmail),
|
||||
};
|
||||
<div className="mt-12">
|
||||
<Form
|
||||
className="flex flex-col gap-4"
|
||||
form={formMethods}
|
||||
handleSubmit={async (values) => {
|
||||
let updatedValues = values;
|
||||
if (!formMethods.getValues().username && isOrgInviteByLink && orgAutoAcceptEmail) {
|
||||
updatedValues = {
|
||||
...values,
|
||||
username: getOrgUsernameFromEmail(values.email, orgAutoAcceptEmail),
|
||||
};
|
||||
}
|
||||
await signUp(updatedValues);
|
||||
}}>
|
||||
{/* Username */}
|
||||
{!isOrgInviteByLink ? (
|
||||
<UsernameField
|
||||
orgSlug={orgSlug}
|
||||
label={t("username")}
|
||||
username={watch("username") || ""}
|
||||
premium={premiumUsername}
|
||||
usernameTaken={usernameTaken}
|
||||
disabled={!!orgSlug}
|
||||
setUsernameTaken={(value) => setUsernameTaken(value)}
|
||||
data-testid="signup-usernamefield"
|
||||
setPremium={(value) => setPremiumUsername(value)}
|
||||
addOnLeading={
|
||||
orgSlug
|
||||
? `${getOrgFullOrigin(orgSlug, { protocol: true }).replace(URL_PROTOCOL_REGEX, "")}/`
|
||||
: `${process.env.NEXT_PUBLIC_WEBSITE_URL.replace(URL_PROTOCOL_REGEX, "")}/`
|
||||
}
|
||||
await signUp(updatedValues);
|
||||
}}>
|
||||
{/* Username */}
|
||||
{!isOrgInviteByLink ? (
|
||||
<UsernameField
|
||||
orgSlug={orgSlug}
|
||||
label={t("username")}
|
||||
username={watch("username") || ""}
|
||||
premium={premiumUsername}
|
||||
usernameTaken={usernameTaken}
|
||||
disabled={!!orgSlug}
|
||||
setUsernameTaken={(value) => setUsernameTaken(value)}
|
||||
data-testid="signup-usernamefield"
|
||||
setPremium={(value) => setPremiumUsername(value)}
|
||||
addOnLeading={
|
||||
orgSlug
|
||||
? `${getOrgFullOrigin(orgSlug, { protocol: true }).replace(
|
||||
URL_PROTOCOL_REGEX,
|
||||
""
|
||||
)}/`
|
||||
: `${process.env.NEXT_PUBLIC_WEBSITE_URL.replace(URL_PROTOCOL_REGEX, "")}/`
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
{/* Email */}
|
||||
<TextField
|
||||
{...register("email")}
|
||||
label={t("email")}
|
||||
type="email"
|
||||
disabled={prepopulateFormValues?.email}
|
||||
data-testid="signup-emailfield"
|
||||
/>
|
||||
) : null}
|
||||
{/* Email */}
|
||||
<TextField
|
||||
{...register("email")}
|
||||
label={t("email")}
|
||||
type="email"
|
||||
disabled={prepopulateFormValues?.email}
|
||||
data-testid="signup-emailfield"
|
||||
/>
|
||||
|
||||
{/* Password */}
|
||||
<PasswordField
|
||||
data-testid="signup-passwordfield"
|
||||
label={t("password")}
|
||||
{...register("password")}
|
||||
hintErrors={["caplow", "min", "num"]}
|
||||
{/* Password */}
|
||||
<PasswordField
|
||||
data-testid="signup-passwordfield"
|
||||
label={t("password")}
|
||||
{...register("password")}
|
||||
hintErrors={["caplow", "min", "num"]}
|
||||
/>
|
||||
{/* Cloudflare Turnstile Captcha */}
|
||||
{CLOUDFLARE_SITE_ID ? (
|
||||
<TurnstileCaptcha
|
||||
appearance="interaction-only"
|
||||
onVerify={(token) => {
|
||||
formMethods.setValue("cfToken", token);
|
||||
}}
|
||||
/>
|
||||
{/* Cloudflare Turnstile Captcha */}
|
||||
{CLOUDFLARE_SITE_ID ? (
|
||||
<TurnstileCaptcha
|
||||
appearance="interaction-only"
|
||||
onVerify={(token) => {
|
||||
formMethods.setValue("cfToken", token);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
) : null}
|
||||
|
||||
<CheckboxField
|
||||
onChange={() => handleConsentChange(COOKIE_CONSENT)}
|
||||
description={t("cookie_consent_checkbox")}
|
||||
<CheckboxField
|
||||
onChange={() => handleConsentChange(COOKIE_CONSENT)}
|
||||
description={t("cookie_consent_checkbox")}
|
||||
/>
|
||||
{errors.apiError && (
|
||||
<Alert
|
||||
className="mb-3"
|
||||
severity="error"
|
||||
message={errors.apiError?.message}
|
||||
data-testid="signup-error-message"
|
||||
/>
|
||||
{errors.apiError && (
|
||||
<Alert
|
||||
className="mb-3"
|
||||
severity="error"
|
||||
message={errors.apiError?.message}
|
||||
data-testid="signup-error-message"
|
||||
/>
|
||||
)}
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
className="my-2 w-full justify-center"
|
||||
loading={loadingSubmitState}
|
||||
disabled={
|
||||
!!formMethods.formState.errors.username ||
|
||||
!!formMethods.formState.errors.email ||
|
||||
!formMethods.getValues("email") ||
|
||||
!formMethods.getValues("password") ||
|
||||
(CLOUDFLARE_SITE_ID &&
|
||||
!process.env.NEXT_PUBLIC_IS_E2E &&
|
||||
!formMethods.getValues("cfToken")) ||
|
||||
isSubmitting ||
|
||||
usernameTaken
|
||||
}>
|
||||
{premiumUsername && !usernameTaken
|
||||
? `Create Account for ${getPremiumPlanPriceValue()}`
|
||||
: t("create_account")}
|
||||
</Button>
|
||||
</Form>
|
||||
{!isGoogleLoginEnabled && !isSAMLLoginEnabled ? null : (
|
||||
<div className="mt-6">
|
||||
<div className="relative flex items-center">
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
<span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
|
||||
{t("or_continue_with")}
|
||||
</span>
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-6 flex flex-col gap-2 md:flex-row">
|
||||
{isGoogleLoginEnabled ? (
|
||||
<Button
|
||||
type="submit"
|
||||
className="my-2 w-full justify-center"
|
||||
loading={loadingSubmitState}
|
||||
color="secondary"
|
||||
disabled={!!formMethods.formState.errors.username || premiumUsername}
|
||||
loading={isGoogleLoading}
|
||||
CustomStartIcon={
|
||||
<img
|
||||
className={classNames(
|
||||
"text-subtle mr-2 h-4 w-4 dark:invert",
|
||||
premiumUsername && "opacity-50"
|
||||
)}
|
||||
src="/google-icon.svg"
|
||||
alt=""
|
||||
/>
|
||||
}
|
||||
className={classNames(
|
||||
"w-full justify-center rounded-md text-center",
|
||||
formMethods.formState.errors.username ? "opacity-50" : ""
|
||||
)}
|
||||
onClick={async () => {
|
||||
setIsGoogleLoading(true);
|
||||
const username = formMethods.getValues("username");
|
||||
const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
|
||||
const GOOGLE_AUTH_URL = `${baseUrl}/auth/sso/google`;
|
||||
const searchQueryParams = new URLSearchParams();
|
||||
if (username) {
|
||||
// If username is present we save it in query params to check for premium
|
||||
searchQueryParams.set("username", username);
|
||||
localStorage.setItem("username", username);
|
||||
}
|
||||
if (token) {
|
||||
searchQueryParams.set("email", prepopulateFormValues?.email);
|
||||
}
|
||||
const url = searchQueryParams.toString()
|
||||
? `${GOOGLE_AUTH_URL}?${searchQueryParams.toString()}`
|
||||
: GOOGLE_AUTH_URL;
|
||||
|
||||
router.push(url);
|
||||
}}>
|
||||
Google
|
||||
</Button>
|
||||
) : null}
|
||||
{isSAMLLoginEnabled ? (
|
||||
<Button
|
||||
color="secondary"
|
||||
disabled={
|
||||
!!formMethods.formState.errors.username ||
|
||||
!!formMethods.formState.errors.email ||
|
||||
!formMethods.getValues("email") ||
|
||||
!formMethods.getValues("password") ||
|
||||
(CLOUDFLARE_SITE_ID &&
|
||||
!process.env.NEXT_PUBLIC_IS_E2E &&
|
||||
!formMethods.getValues("cfToken")) ||
|
||||
premiumUsername ||
|
||||
isSubmitting ||
|
||||
usernameTaken
|
||||
}>
|
||||
{premiumUsername && !usernameTaken
|
||||
? `Create Account for ${getPremiumPlanPriceValue()}`
|
||||
: t("create_account")}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
)}
|
||||
{!displayEmailForm && (
|
||||
<div className="mt-12">
|
||||
{/* Upper Row */}
|
||||
<div className="mt-6 flex flex-col gap-2 md:flex-row">
|
||||
{isGoogleLoginEnabled ? (
|
||||
<Button
|
||||
color="primary"
|
||||
loading={isGoogleLoading}
|
||||
CustomStartIcon={
|
||||
<img
|
||||
className={classNames(
|
||||
"text-subtle mr-2 h-4 w-4 dark:invert",
|
||||
premiumUsername && "opacity-50"
|
||||
)}
|
||||
src="/google-icon-colored.svg"
|
||||
alt=""
|
||||
/>
|
||||
}
|
||||
className={classNames("w-full justify-center rounded-md text-center")}
|
||||
data-testid="continue-with-google-button"
|
||||
onClick={async () => {
|
||||
setIsGoogleLoading(true);
|
||||
const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
|
||||
const GOOGLE_AUTH_URL = `${baseUrl}/auth/sso/google`;
|
||||
const searchQueryParams = new URLSearchParams();
|
||||
if (prepopulateFormValues?.username) {
|
||||
// If username is present we save it in query params to check for premium
|
||||
searchQueryParams.set("username", prepopulateFormValues.username);
|
||||
localStorage.setItem("username", prepopulateFormValues.username);
|
||||
}
|
||||
if (token) {
|
||||
searchQueryParams.set("email", prepopulateFormValues?.email);
|
||||
}
|
||||
const url = searchQueryParams.toString()
|
||||
? `${GOOGLE_AUTH_URL}?${searchQueryParams.toString()}`
|
||||
: GOOGLE_AUTH_URL;
|
||||
|
||||
router.push(url);
|
||||
}}>
|
||||
Continue with Google
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{displayMiddleDivider && (
|
||||
<div className="mt-6">
|
||||
<div className="relative flex items-center">
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
<span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
|
||||
{t("or").toLocaleLowerCase()}
|
||||
</span>
|
||||
<div className="border-subtle flex-grow border-t" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lower Row */}
|
||||
<div className="mt-6 flex flex-col gap-2 md:flex-row">
|
||||
<Button
|
||||
color="secondary"
|
||||
disabled={isGoogleLoading}
|
||||
className={classNames("w-full justify-center rounded-md text-center")}
|
||||
isGoogleLoading
|
||||
}
|
||||
className={classNames(
|
||||
"w-full justify-center rounded-md text-center",
|
||||
formMethods.formState.errors.username && formMethods.formState.errors.email
|
||||
? "opacity-50"
|
||||
: ""
|
||||
)}
|
||||
onClick={() => {
|
||||
setDisplayEmailForm(true);
|
||||
}}
|
||||
data-testid="continue-with-email-button">
|
||||
Continue with email
|
||||
</Button>
|
||||
{isSAMLLoginEnabled ? (
|
||||
<Button
|
||||
color="secondary"
|
||||
disabled={
|
||||
!!formMethods.formState.errors.username ||
|
||||
!!formMethods.formState.errors.email ||
|
||||
premiumUsername ||
|
||||
isSubmitting ||
|
||||
isGoogleLoading
|
||||
if (!formMethods.getValues("username")) {
|
||||
formMethods.trigger("username");
|
||||
}
|
||||
className={classNames(
|
||||
"w-full justify-center rounded-md text-center",
|
||||
formMethods.formState.errors.username && formMethods.formState.errors.email
|
||||
? "opacity-50"
|
||||
: ""
|
||||
)}
|
||||
onClick={() => {
|
||||
if (!formMethods.getValues("username")) {
|
||||
formMethods.trigger("username");
|
||||
}
|
||||
if (!formMethods.getValues("email")) {
|
||||
formMethods.trigger("email");
|
||||
if (!formMethods.getValues("email")) {
|
||||
formMethods.trigger("email");
|
||||
|
||||
return;
|
||||
}
|
||||
const username = formMethods.getValues("username");
|
||||
if (!username) {
|
||||
showToast("error", t("username_required"));
|
||||
return;
|
||||
}
|
||||
localStorage.setItem("username", username);
|
||||
const sp = new URLSearchParams();
|
||||
// @NOTE: don't remove username query param as it's required right now for stripe payment page
|
||||
sp.set("username", username);
|
||||
sp.set("email", formMethods.getValues("email"));
|
||||
router.push(
|
||||
`${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
|
||||
);
|
||||
}}>
|
||||
<Icon name="shield-check" className="mr-2 h-5 w-5" />
|
||||
{t("saml_sso")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
return;
|
||||
}
|
||||
const username = formMethods.getValues("username");
|
||||
if (!username) {
|
||||
showToast("error", t("username_required"));
|
||||
return;
|
||||
}
|
||||
localStorage.setItem("username", username);
|
||||
const sp = new URLSearchParams();
|
||||
// @NOTE: don't remove username query param as it's required right now for stripe payment page
|
||||
sp.set("username", username);
|
||||
sp.set("email", formMethods.getValues("email"));
|
||||
router.push(
|
||||
`${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
|
||||
);
|
||||
}}>
|
||||
<Icon name="shield-check" className="mr-2 h-5 w-5" />
|
||||
{t("saml_sso")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
{/* Already have an account & T&C */}
|
||||
<div className="mt-10 flex h-full flex-col justify-end pb-6 text-xs">
|
||||
<div className="flex flex-col text-sm">
|
||||
|
||||
@@ -297,8 +297,7 @@ test.describe("Organization", () => {
|
||||
await test.step("Signing up with the previous username of the migrated user - shouldn't be allowed", async () => {
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
await page.locator('input[name="username"]').fill(existingUser.username!);
|
||||
await page
|
||||
|
||||
@@ -10,27 +10,7 @@ import { expectInvitationEmailToBeReceived } from "./team/expects";
|
||||
|
||||
test.describe.configure({ mode: "parallel" });
|
||||
|
||||
test.describe("Signup Main Page Test", async () => {
|
||||
test.beforeEach(async ({ features }) => {
|
||||
features.reset();
|
||||
});
|
||||
|
||||
test("Continue with email button must exist / work", async ({ page }) => {
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
});
|
||||
|
||||
test("Continue with google button must exist / work", async ({ page }) => {
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator('[data-testid="continue-with-google-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-google-button"]').click();
|
||||
await page.waitForURL("/auth/sso/google");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Email Signup Flow Test", async () => {
|
||||
test.describe("Signup Flow Test", async () => {
|
||||
test.beforeEach(async ({ features }) => {
|
||||
features.reset(); // This resets to the inital state not an empt yarray
|
||||
});
|
||||
@@ -46,8 +26,6 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
const alertMessage = "Username or email is already taken";
|
||||
|
||||
@@ -74,9 +52,8 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
});
|
||||
|
||||
await page.goto("/signup");
|
||||
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
const alertMessage = "Username or email is already taken";
|
||||
|
||||
@@ -108,8 +85,6 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
// Signup with premium username name
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// Fill form
|
||||
await page.locator('input[name="username"]').fill("rock");
|
||||
@@ -138,8 +113,6 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// Fill form
|
||||
await page.locator('input[name="username"]').fill(userToCreate.username);
|
||||
@@ -159,8 +132,6 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
const signupUrlWithParams = "/signup?username=rick-jones&email=rick-jones%40example.com";
|
||||
await page.goto(signupUrlWithParams);
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// Fill form
|
||||
const usernameInput = page.locator('input[name="username"]');
|
||||
@@ -242,8 +213,6 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
|
||||
await page.goto("/signup");
|
||||
await expect(page.locator("text=Create your account")).toBeVisible();
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// Fill form
|
||||
await page.locator('input[name="username"]').fill(userToCreate.username);
|
||||
@@ -314,8 +283,7 @@ test.describe("Email Signup Flow Test", async () => {
|
||||
|
||||
const url = new URL(newPage.url());
|
||||
expect(url.pathname).toBe("/signup");
|
||||
await expect(page.locator('[data-testid="continue-with-email-button"]')).toBeVisible();
|
||||
await page.locator('[data-testid="continue-with-email-button"]').click();
|
||||
|
||||
// Check required fields
|
||||
await newPage.locator("input[name=password]").fill(`P4ssw0rd!`);
|
||||
await newPage.locator("button[type=submit]").click();
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
|
||||
<path fill="#FFC107"
|
||||
d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path>
|
||||
<path fill="#FF3D00"
|
||||
d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path>
|
||||
<path fill="#4CAF50"
|
||||
d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path>
|
||||
<path fill="#1976D2"
|
||||
d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -4,7 +4,7 @@ import { useFormContext } from "react-hook-form";
|
||||
import z from "zod";
|
||||
|
||||
import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
|
||||
import { useLastUsed } from "@calcom/lib/hooks/useLastUsed";
|
||||
import { LastUsed, useLastUsed } from "@calcom/lib/hooks/useLastUsed";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import { Button } from "@calcom/ui";
|
||||
@@ -36,9 +36,10 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
|
||||
|
||||
return (
|
||||
<Button
|
||||
color="minimal"
|
||||
StartIcon="lock"
|
||||
color="secondary"
|
||||
data-testid="saml"
|
||||
className="text-brand-500 h-auto p-0 font-medium"
|
||||
className="flex w-full justify-center"
|
||||
onClick={async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -64,7 +65,8 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
|
||||
email,
|
||||
});
|
||||
}}>
|
||||
<span>{t("saml_sso")}</span>
|
||||
<span>{t("signin_with_saml_oidc")}</span>
|
||||
{lastUsed === "saml" && <LastUsed />}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user