diff --git a/packages/client/src/pages/Confirm/sub-components/activateUser.js b/packages/client/src/pages/Confirm/sub-components/activateUser.js index 1cba594cec..d5c17cc74e 100644 --- a/packages/client/src/pages/Confirm/sub-components/activateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/activateUser.js @@ -52,6 +52,7 @@ import { } from "./StyledCreateUser"; import PortalLogo from "@docspace/shared/components/portal-logo/PortalLogo"; import GreetingUserContainer from "./GreetingUserContainer"; +import { ALLOWED_PASSWORD_CHARACTERS } from "@docspace/shared/constants"; const ActivateUserForm = (props) => { const { t, settings, linkData, hashSettings, defaultPage, login } = props; diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js index 560928f164..99eb5e95f6 100644 --- a/packages/client/src/pages/Confirm/sub-components/createUser.js +++ b/packages/client/src/pages/Confirm/sub-components/createUser.js @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import SsoReactSvgUrl from "PUBLIC_DIR/images/sso.react.svg?url"; +import SsoReactSvg from "PUBLIC_DIR/images/sso.react.svg"; import React, { useEffect, useState, useCallback } from "react"; import { withTranslation, Trans } from "react-i18next"; @@ -469,7 +469,7 @@ const CreateUserForm = (props) => { ? { ssoUrl: capabilities?.ssoUrl, ssoLabel: capabilities?.ssoLabel, - ssoSVG: SsoReactSvgUrl, + ssoSVG: SsoReactSvg, } : {}; diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js index 7e2eb25aae..bccf0df8dd 100644 --- a/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js +++ b/packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js @@ -142,7 +142,7 @@ const SocialNetworks = (props) => { return (
- - +
diff --git a/packages/login/src/app/(root)/page.tsx b/packages/login/src/app/(root)/page.tsx index b47996bbda..1a5de16d06 100644 --- a/packages/login/src/app/(root)/page.tsx +++ b/packages/login/src/app/(root)/page.tsx @@ -24,7 +24,14 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { getSettings } from "@/utils/actions"; +import { PROVIDERS_DATA } from "@docspace/shared/constants"; + +import { + getCapabilities, + getSettings, + getSSO, + getThirdPartyProviders, +} from "@/utils/actions"; import Login from "@/components/Login"; import LoginForm from "@/components/LoginForm"; import ThirdParty from "@/components/ThirdParty"; @@ -32,7 +39,26 @@ import RecoverAccess from "@/components/RecoverAccess"; import Register from "@/components/Register"; async function Page() { - const settings = await getSettings(); + const [settings, thirdParty, capabilities, ssoSettings] = await Promise.all([ + getSettings(), + getThirdPartyProviders(), + getCapabilities(), + getSSO(), + ]); + + const ssoUrl = capabilities ? capabilities.ssoUrl : ""; + const hideAuthPage = ssoSettings ? ssoSettings.hideAuthPage : false; + const ssoExists = !!ssoUrl; + const oauthDataExists = + !capabilities?.oauthEnabled || !thirdParty || thirdParty.length === 0 + ? false + : thirdParty + .map((item) => { + if (!(item.provider in PROVIDERS_DATA)) return undefined; + + return item; + }) + .some((item) => !!item); return ( @@ -43,8 +69,17 @@ async function Page() { cookieSettingsEnabled={settings?.cookieSettingsEnabled} reCaptchaPublicKey={settings?.recaptchaPublicKey} reCaptchaType={settings?.recaptchaType} + ldapDomain={capabilities?.ldapDomain} + ldapEnabled={capabilities?.ldapEnabled} + /> + - {settings.enableAdmMess && } {settings.enabledJoin && ( {children} diff --git a/packages/login/src/components/GreetingContainer.tsx b/packages/login/src/components/GreetingContainer.tsx index 79a401e1e3..1d4e96cf8a 100644 --- a/packages/login/src/components/GreetingContainer.tsx +++ b/packages/login/src/components/GreetingContainer.tsx @@ -33,7 +33,6 @@ import { useSearchParams } from "next/navigation"; import { useTheme } from "styled-components"; import { Text } from "@docspace/shared/components/text"; - import { WhiteLabelLogoType } from "@docspace/shared/enums"; import { getLogoUrl } from "@docspace/shared/utils/common"; diff --git a/packages/login/src/components/LanguageCombobox/index.tsx b/packages/login/src/components/LanguageCombobox/index.tsx index 723bc795f1..ce924cff92 100644 --- a/packages/login/src/components/LanguageCombobox/index.tsx +++ b/packages/login/src/components/LanguageCombobox/index.tsx @@ -33,10 +33,10 @@ import { setLanguageForUnauthorized } from "@docspace/shared/utils/common"; import { LanguageCombobox } from "@docspace/shared/components/language-combobox"; import { DeviceType } from "@docspace/shared/enums"; import { Nullable } from "@docspace/shared/types"; +import { getPortalCultures } from "@docspace/shared/api/settings"; import { TPortalCultures } from "@docspace/shared/api/settings/types"; import useDeviceType from "@/hooks/useDeviceType"; -import { getPortalCultures } from "@/utils/actions"; const LanguageComboboxWrapper = () => { const { i18n } = useTranslation(["Login", "Common"]); diff --git a/packages/login/src/components/Login/Login.context.tsx b/packages/login/src/components/Login/Login.context.tsx index 09510f5ed2..7e478ab0d0 100644 --- a/packages/login/src/components/Login/Login.context.tsx +++ b/packages/login/src/components/Login/Login.context.tsx @@ -31,27 +31,20 @@ import React, { createContext, useState } from "react"; export const LoginValueContext = createContext({ isLoading: false, isModalOpen: false, - ldapDomain: "", }); export const LoginDispatchContext = createContext({ setIsLoading: (value: boolean) => {}, setIsModalOpen: (value: boolean) => {}, - setLdapDomain: (value: string) => {}, }); export const LoginContext = ({ children }: { children: React.ReactNode }) => { const [isLoading, setIsLoading] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); - const [ldapDomain, setLdapDomain] = useState(""); return ( - - + + {children} diff --git a/packages/login/src/components/LoginForm/index.tsx b/packages/login/src/components/LoginForm/index.tsx index e77a396e80..f0aba58529 100644 --- a/packages/login/src/components/LoginForm/index.tsx +++ b/packages/login/src/components/LoginForm/index.tsx @@ -38,6 +38,7 @@ import { useTranslation } from "react-i18next"; import ReCAPTCHA from "react-google-recaptcha"; import HCaptcha from "@hcaptcha/react-hcaptcha"; import { useTheme } from "styled-components"; +import { Id } from "react-toastify"; import { useSearchParams } from "next/navigation"; import { Text } from "@docspace/shared/components/text"; @@ -52,6 +53,7 @@ import { toastr } from "@docspace/shared/components/toast"; import { thirdPartyLogin, checkConfirmLink } from "@docspace/shared/api/user"; import { setWithCredentialsStatus } from "@docspace/shared/api/client"; import { TValidate } from "@docspace/shared/components/email-input/EmailInput.types"; +import { RecaptchaType } from "@docspace/shared/enums"; import { LoginFormProps } from "@/types"; import { getEmailFromInvitation, getConfirmDataFromInvitation } from "@/utils"; @@ -59,11 +61,11 @@ import { getEmailFromInvitation, getConfirmDataFromInvitation } from "@/utils"; import EmailContainer from "./sub-components/EmailContainer"; import PasswordContainer from "./sub-components/PasswordContainer"; import ForgotContainer from "./sub-components/ForgotContainer"; +import LDAPContainer from "./sub-components/LDAPContainer"; + +import { LoginDispatchContext, LoginValueContext } from "../Login"; import { StyledCaptcha } from "./LoginForm.styled"; -import { LoginDispatchContext, LoginValueContext } from "../Login"; -import LDAPContainer from "./sub-components/LDAPContainer"; -import { RecaptchaType } from "@docspace/shared/enums"; let showToastr = true; @@ -72,10 +74,12 @@ const LoginForm = ({ cookieSettingsEnabled, reCaptchaPublicKey, reCaptchaType, + ldapDomain, + ldapEnabled, }: LoginFormProps) => { - const { isLoading, isModalOpen, ldapDomain } = useContext(LoginValueContext); + const { isLoading, isModalOpen } = useContext(LoginValueContext); const { setIsLoading } = useContext(LoginDispatchContext); - const toastId = useRef(null); + const toastId = useRef(); const searchParams = useSearchParams(); @@ -417,7 +421,7 @@ const LoginForm = ({ onChangeCheckbox={onChangeCheckbox} /> - {ldapDomain && ( + {ldapDomain && ldapEnabled && ( void; onValidateEmail: (res: TValidate) => undefined; isLdapLogin: boolean; - ldapDomain: string; + ldapDomain?: string; } const EmailContainer = ({ diff --git a/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx b/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx index 34a268a3d9..0f0ef01906 100644 --- a/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx +++ b/packages/login/src/components/LoginForm/sub-components/ForgotPasswordModalDialog.tsx @@ -49,7 +49,7 @@ const ForgotPasswordModalDialog = ({ userEmail, onDialogClose, }: ForgotPasswordModalDialogProps) => { - const [email, setEmail] = useState(userEmail); + const [email, setEmail] = useState(userEmail ?? ""); const [emailError, setEmailError] = useState(false); const [isLoading, setIsLoading] = useState(false); const [errorText, setErrorText] = useState(""); diff --git a/packages/login/src/components/SimpleNav.tsx b/packages/login/src/components/SimpleNav.tsx index 80f81f287a..f780bdb2da 100644 --- a/packages/login/src/components/SimpleNav.tsx +++ b/packages/login/src/components/SimpleNav.tsx @@ -34,6 +34,7 @@ import { mobile } from "@docspace/shared/utils/device"; import { getLogoUrl } from "@docspace/shared/utils/common"; import { Base, Dark } from "@docspace/shared/themes"; import { ThemeKeys, WhiteLabelLogoType } from "@docspace/shared/enums"; + import LanguageComboboxWrapper from "./LanguageCombobox"; const StyledSimpleNav = styled.div` @@ -60,19 +61,19 @@ const StyledSimpleNav = styled.div` StyledSimpleNav.defaultProps = { theme: Base }; -interface SimpleNavProps { - systemTheme: ThemeKeys; -} +interface SimpleNavProps {} -const SimpleNav = ({ systemTheme }: SimpleNavProps) => { +const SimpleNav = ({}: SimpleNavProps) => { const theme = useTheme(); + const isDark = !theme.isBase; + const logoUrl = getLogoUrl(WhiteLabelLogoType.LightSmall, isDark); return ( logo-url - + {/* */} ); }; diff --git a/packages/login/src/components/ThirdParty.tsx b/packages/login/src/components/ThirdParty.tsx index 8a5f650c26..86cf6e6161 100644 --- a/packages/login/src/components/ThirdParty.tsx +++ b/packages/login/src/components/ThirdParty.tsx @@ -33,22 +33,13 @@ import styled from "styled-components"; import { SocialButtonsGroup } from "@docspace/shared/components/social-buttons-group"; import { Text } from "@docspace/shared/components/text"; -import { PROVIDERS_DATA } from "@docspace/shared/constants"; import { getOAuthToken, getLoginLink } from "@docspace/shared/utils/common"; import { TCapabilities, - TGetSsoSettings, TThirdPartyProvider, } from "@docspace/shared/api/settings/types"; -import { Nullable } from "@docspace/shared/types"; -import SSOIcon from "PUBLIC_DIR/images/sso.react.svg?url"; - -import { - getCapabilities, - getSSO, - getThirdPartyProviders, -} from "@/utils/actions"; +import SSOIcon from "PUBLIC_DIR/images/sso.react.svg"; import { LoginDispatchContext, LoginValueContext } from "./Login"; @@ -57,44 +48,31 @@ const StyledThirdParty = styled.div<{ isVisible: boolean }>` height: auto; `; -const ThirdParty = () => { +type ThirdPartyProps = { + thirdParty?: TThirdPartyProvider[]; + capabilities?: TCapabilities; + ssoUrl?: string; + ssoExists?: boolean; + oauthDataExists?: boolean; + hideAuthPage?: boolean; +}; + +const ThirdParty = ({ + thirdParty, + capabilities, + ssoUrl, + ssoExists, + oauthDataExists, + hideAuthPage, +}: ThirdPartyProps) => { const { isLoading } = useContext(LoginValueContext); - const { setIsModalOpen, setLdapDomain } = useContext(LoginDispatchContext); + const { setIsModalOpen } = useContext(LoginDispatchContext); const searchParams = useSearchParams(); const { t } = useTranslation(["Login", "Common"]); - const [capabilities, setCapabilities] = - React.useState>(null); - const [thirdPartyProvider, setThirdPartyProvider] = - React.useState>(null); - const [ssoSettings, setSsoSettings] = - React.useState>(null); - - const getData = useCallback(async () => { - const [thirdParty, capabilities, ssoSettings] = await Promise.all([ - getThirdPartyProviders(), - getCapabilities(), - getSSO(), - ]); - - if (thirdParty) setThirdPartyProvider(thirdParty); - if (capabilities) setCapabilities(capabilities); - if (ssoSettings) setSsoSettings(ssoSettings); - }, []); - useEffect(() => { - getData(); - }, [getData]); - - useEffect(() => { - const ssoUrl = capabilities ? capabilities.ssoUrl : ""; - const hideAuthPage = ssoSettings ? ssoSettings.hideAuthPage : false; - - if (capabilities?.ldapEnabled && capabilities.ldapDomain) - setLdapDomain(capabilities.ldapDomain); - if ( ssoUrl && hideAuthPage && @@ -102,25 +80,7 @@ const ThirdParty = () => { ) { window.location.replace(ssoUrl); } - }, [capabilities, searchParams, ssoSettings, setLdapDomain]); - - const ssoExists = () => { - if (capabilities?.ssoUrl) return true; - else return false; - }; - - const oauthDataExists = () => { - if (!capabilities?.oauthEnabled) return false; - - let existProviders = 0; - if (thirdPartyProvider && thirdPartyProvider.length > 0) - thirdPartyProvider?.map((item) => { - if (!(item.provider in PROVIDERS_DATA)) return; - existProviders++; - }); - - return !!existProviders; - }; + }, [capabilities, searchParams, ssoUrl, hideAuthPage]); const onSocialButtonClick = useCallback( (e: React.MouseEvent) => { @@ -171,7 +131,7 @@ const ThirdParty = () => { [], ); - const ssoProps = ssoExists() + const ssoProps = ssoExists ? { ssoUrl: capabilities?.ssoUrl, ssoLabel: capabilities?.ssoLabel, @@ -179,7 +139,7 @@ const ThirdParty = () => { } : {}; - const isVisible = oauthDataExists() || ssoExists(); + const isVisible = oauthDataExists || ssoExists; return ( isVisible && ( @@ -188,7 +148,7 @@ const ThirdParty = () => { {t("Common:orContinueWith")}
{ diff --git a/packages/login/src/providers/index.tsx b/packages/login/src/providers/index.tsx index f19d315b16..a96700de6e 100644 --- a/packages/login/src/providers/index.tsx +++ b/packages/login/src/providers/index.tsx @@ -33,20 +33,18 @@ import { ThemeProvider } from "@docspace/shared/components/theme-provider"; import { TFirebaseSettings } from "@docspace/shared/api/settings/types"; import FirebaseHelper from "@docspace/shared/utils/firebase"; import { TUser } from "@docspace/shared/api/people/types"; -import { ThemeKeys } from "@docspace/shared/enums"; -import { Base, Dark } from "@docspace/shared/themes"; import { TDataContext } from "@/types"; import useI18N from "@/hooks/useI18N"; import useTheme from "@/hooks/useTheme"; import pkgFile from "../../package.json"; + import ErrorBoundaryWrapper from "./ErrorBoundary"; export const Providers = ({ children, value, - timers, redirectURL, }: { children: React.ReactNode; @@ -61,10 +59,6 @@ export const Providers = ({ if (redirectURL) window.location.replace(redirectURL); }, [redirectURL]); - React.useEffect(() => { - console.log("Timers:", { ...timers }); - }, [timers]); - const { i18n } = useI18N({ settings: value.settings, }); diff --git a/packages/login/src/types/index.ts b/packages/login/src/types/index.ts index 852e9c537c..bb4e03db09 100644 --- a/packages/login/src/types/index.ts +++ b/packages/login/src/types/index.ts @@ -86,6 +86,8 @@ export type LoginFormProps = { reCaptchaPublicKey?: string; reCaptchaType?: RecaptchaType; cookieSettingsEnabled: boolean; + ldapDomain?: string; + ldapEnabled?: boolean; }; export type ForgotPasswordModalDialogProps = { diff --git a/packages/login/src/utils/actions.ts b/packages/login/src/utils/actions.ts index ac9d2de522..c339967a86 100644 --- a/packages/login/src/utils/actions.ts +++ b/packages/login/src/utils/actions.ts @@ -144,18 +144,3 @@ export async function getSSO() { return sso.response as TGetSsoSettings; } -export async function getPortalCultures() { - const [getPortalCultures] = createRequest( - [`/settings/cultures`], - [["", ""]], - "GET", - ); - - const res = await fetch(getPortalCultures); - - if (!res.ok) return; - - const cultures = await res.json(); - - return cultures.response as TPortalCultures; -} diff --git a/packages/shared/components/box/Box.tsx b/packages/shared/components/box/Box.tsx index 1a49eaeb92..96affd52cd 100644 --- a/packages/shared/components/box/Box.tsx +++ b/packages/shared/components/box/Box.tsx @@ -29,12 +29,15 @@ import { BoxProps } from "./Box.types"; import { StyledBox } from "./Box.styled"; function Box(props: BoxProps) { - const { as } = props; - return ; + const { as, displayProp = "block" } = props; + return ( + + ); } -Box.defaultProps = { - displayProp: "block", -}; - export { Box }; diff --git a/packages/shared/components/checkbox/Checkbox.styled.ts b/packages/shared/components/checkbox/Checkbox.styled.ts index 5f5ed1be5a..2e6fc2d0d6 100644 --- a/packages/shared/components/checkbox/Checkbox.styled.ts +++ b/packages/shared/components/checkbox/Checkbox.styled.ts @@ -37,6 +37,8 @@ const StyledLabel = styled.label<{ position: relative; margin: 0; + line-height: 16px; + user-select: none; -o-user-select: none; -moz-user-select: none; diff --git a/packages/shared/components/checkbox/Checkbox.tsx b/packages/shared/components/checkbox/Checkbox.tsx index 438c887953..3fe632568b 100644 --- a/packages/shared/components/checkbox/Checkbox.tsx +++ b/packages/shared/components/checkbox/Checkbox.tsx @@ -142,6 +142,7 @@ const CheckboxPure = ({ title={title} truncate={truncate} className="checkbox-text" + lineHeight="16px" > {label} diff --git a/packages/shared/components/combobox/sub-components/ComboButton.tsx b/packages/shared/components/combobox/sub-components/ComboButton.tsx index 18165de80a..0d184e479a 100644 --- a/packages/shared/components/combobox/sub-components/ComboButton.tsx +++ b/packages/shared/components/combobox/sub-components/ComboButton.tsx @@ -49,25 +49,29 @@ import type { ComboButtonProps } from "../Combobox.types"; const ComboButton = (props: ComboButtonProps) => { const { - noBorder, onClick, - isDisabled, + innerContainer, - innerContainerClassName = "innerContainer", + selectedOption, optionsLength = 0, - withOptions = true, - withAdvancedOptions = false, - isOpen, - scaled = false, - size, + comboIcon, fillIcon, - modernView = false, - tabIndex, - isLoading, + type, plusBadgeValue, + noBorder = false, + isDisabled = false, + withOptions = true, + withAdvancedOptions = false, + innerContainerClassName = "innerContainer", + isOpen = false, + size = ComboBoxSize.content, + scaled = false, + modernView = false, + tabIndex = -1, + isLoading = false, } = props; const defaultOption = selectedOption?.default; @@ -174,18 +178,4 @@ const ComboButton = (props: ComboButtonProps) => { ); }; -ComboButton.defaultProps = { - noBorder: false, - isDisabled: false, - withOptions: true, - withAdvancedOptions: false, - innerContainerClassName: "innerContainer", - isOpen: false, - size: ComboBoxSize.content, - scaled: false, - modernView: false, - tabIndex: -1, - isLoading: false, -}; - export { ComboButton }; diff --git a/packages/shared/components/drop-down-item/DropDownItem.tsx b/packages/shared/components/drop-down-item/DropDownItem.tsx index 75e208d6b5..c1424b9431 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.tsx +++ b/packages/shared/components/drop-down-item/DropDownItem.tsx @@ -46,21 +46,21 @@ import { DropDownItemProps } from "./DropDownItem.types"; const DropDownItem = (props: DropDownItemProps) => { const { - isSeparator, - isHeader, + isSeparator = false, + isHeader = false, withHeaderArrow, headerArrowAction, icon, children, - disabled, + disabled = false, className, fillIcon = true, - isSubMenu, - isActive, - withoutIcon, - noHover, + isSubMenu = false, + isActive = false, + withoutIcon = false, + noHover = false, isSelected, isActiveDescendant, @@ -72,8 +72,17 @@ const DropDownItem = (props: DropDownItemProps) => { const { t } = useTranslation(["Common"]); const theme = useTheme(); - const { withToggle, checked, onClick, onClickSelectedItem, label, ...rest } = - props; + const { + withToggle, + checked, + onClick, + onClickSelectedItem, + label = "", + tabIndex = -1, + textOverflow = false, + + ...rest + } = props; const onClickAction = ( e: React.MouseEvent | React.ChangeEvent, @@ -97,6 +106,8 @@ const DropDownItem = (props: DropDownItemProps) => { return ( { }; DropDownItem.defaultProps = { - isSeparator: false, - isHeader: false, - tabIndex: -1, - label: "", - disabled: false, - noHover: false, - textOverflow: false, - fillIcon: true, - isSubMenu: false, - isActive: false, - withoutIcon: false, height: 32, heightTablet: 36, }; diff --git a/packages/shared/components/drop-down-item/DropDownItem.types.tsx b/packages/shared/components/drop-down-item/DropDownItem.types.tsx index 616fec7787..d44347c040 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.types.tsx +++ b/packages/shared/components/drop-down-item/DropDownItem.types.tsx @@ -75,4 +75,6 @@ export interface DropDownItemProps { isBeta?: boolean; additionalElement?: React.ReactNode; setOpen?: (open: boolean) => void; + height?: number; + heightTablet?: number; } diff --git a/packages/shared/components/drop-down/index.tsx b/packages/shared/components/drop-down/index.tsx index af56e0ba2a..ce8dcb6e6b 100644 --- a/packages/shared/components/drop-down/index.tsx +++ b/packages/shared/components/drop-down/index.tsx @@ -45,6 +45,12 @@ const DropDown = (props: DropDownProps) => { eventTypes, forceCloseClickOutside, withoutBackground, + + showDisabledItems = false, + isDefaultMode = true, + fixedDirection = false, + offsetLeft = 0, + enableKeyboardEvents = true, } = props; const toggleDropDown = () => { @@ -72,17 +78,17 @@ const DropDown = (props: DropDownProps) => { withoutBackground={withoutBackground} /> ) : null} - + ); }; -DropDown.defaultProps = { - withBackdrop: true, - showDisabledItems: false, - isDefaultMode: true, - fixedDirection: false, - offsetLeft: 0, - enableKeyboardEvents: true, -}; export { DropDown }; diff --git a/packages/shared/components/email-input/EmailInput.tsx b/packages/shared/components/email-input/EmailInput.tsx index 9460f1f43a..42d5e51fb9 100644 --- a/packages/shared/components/email-input/EmailInput.tsx +++ b/packages/shared/components/email-input/EmailInput.tsx @@ -39,19 +39,33 @@ const TextInputWrapper = ({ emailSettings, customValidate, ...props -}: EmailInputProps & TextInputProps & { isValidEmail?: boolean }) => ( - -); +}: EmailInputProps & TextInputProps & { isValidEmail?: boolean }) => { + return ; +}; const EmailInput = ({ - value, onValidateInput, customValidate, - emailSettings, + onBlur, onChange, - hasError, + isAutoFocussed, + autoComplete = "email", + className = "", + hasError = undefined, + id = "", + isDisabled = false, + isReadOnly = false, + maxLength = 255, + name = "", + placeholder = "", + scale = false, + size = InputSize.base, + title = "", + withBorder = true, + value = "", + emailSettings, ...rest }: EmailInputProps) => { const [inputValue, setInputValue] = React.useState(value); @@ -65,7 +79,7 @@ const EmailInput = ({ return customValidate(v); } - const emailObj = parseAddress(v, emailSettings); + const emailObj = parseAddress(v, emailSettings ?? new EmailSettings()); const isValid = emailObj.isValid(); const parsedErrors = emailObj.parseErrors; const errors = parsedErrors @@ -124,6 +138,18 @@ const EmailInput = ({ return ( { const { id, - className, + className = "icon-button", iconName, - size, + size = 12, color, dataTip, getContent, @@ -65,7 +65,7 @@ const HelpButton = (props: HelpButtonProps) => { id={currentId} className={classNames([className], "help-icon") || "help-icon"} isClickable - iconName={iconName || InfoReactSvgUrl} + iconName={iconName ?? InfoReactSvgUrl} size={size} color={color} data-for={currentId} @@ -102,11 +102,4 @@ const HelpButton = (props: HelpButtonProps) => { ); }; -HelpButton.defaultProps = { - iconName: InfoReactSvgUrl, - // place: "top", - className: "icon-button", - size: 12, -}; - export { HelpButton }; diff --git a/packages/shared/components/language-combobox/LanguageCombobox.tsx b/packages/shared/components/language-combobox/LanguageCombobox.tsx index a658fd4848..27b2a2864a 100644 --- a/packages/shared/components/language-combobox/LanguageCombobox.tsx +++ b/packages/shared/components/language-combobox/LanguageCombobox.tsx @@ -23,8 +23,7 @@ // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import React from "react"; -import { useMemo } from "react"; +import React, { useMemo } from "react"; import { useTranslation } from "react-i18next"; import { mapCulturesToArray } from "../../utils/common"; @@ -58,7 +57,7 @@ const LanguageCombobox = (props: ComboboxProps) => { onSelectLanguage(culture); }; - if (!currentCulture) return <>; + if (!currentCulture) return null; return ( { return ( { const onCloseEvent = React.useCallback(() => { if (embedded) return; @@ -174,16 +179,6 @@ const ModalDialog = ({ ); }; -ModalDialog.defaultProps = { - zIndex: 310, - isLarge: false, - isLoading: false, - isCloseable: true, - withBodyScroll: false, - withFooterBorder: false, - containerVisible: false, -}; - ModalDialog.Header = Header; ModalDialog.Body = Body; ModalDialog.Footer = Footer; diff --git a/packages/shared/components/more-login-modal/index.tsx b/packages/shared/components/more-login-modal/index.tsx index ff0c204f64..889adbbdaf 100644 --- a/packages/shared/components/more-login-modal/index.tsx +++ b/packages/shared/components/more-login-modal/index.tsx @@ -89,9 +89,11 @@ const MoreLoginModal: React.FC = (props) => { const { icon, label } = PROVIDERS_DATA[item.provider as keyof ProvidersDataType]; + const IconComponent = icon; + return ( - + = 2 ? "" : getProviderLabel(label, t)} $iconOptions={iconOptions} data-url={url} data-providername={provider} + IconComponent={icon} onClick={onClick} className="social-button" /> @@ -97,7 +97,7 @@ export const SocialButtonsGroup = memo( {ssoUrl && ( (window.location.href = ssoUrl)} @@ -108,7 +108,7 @@ export const SocialButtonsGroup = memo( {elements} {length > 2 && ( diff --git a/packages/shared/constants/index.ts b/packages/shared/constants/index.ts index 92335a4d41..568f8437bf 100644 --- a/packages/shared/constants/index.ts +++ b/packages/shared/constants/index.ts @@ -24,13 +24,13 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import ShareAppleReactSvgUrl from "PUBLIC_DIR/images/share.apple.react.svg?url"; -import ShareGoogleReactSvgUrl from "PUBLIC_DIR/images/share.google.react.svg?url"; -import ShareFacebookReactSvgUrl from "PUBLIC_DIR/images/share.facebook.react.svg?url"; -import ShareTwitterReactSvgUrl from "PUBLIC_DIR/images/share.twitter.react.svg?url"; -import ShareLinkedinReactSvgUrl from "PUBLIC_DIR/images/share.linkedin.react.svg?url"; -import ShareMicrosoftReactSvgUrl from "PUBLIC_DIR/images/share.microsoft.react.svg?url"; -import ShareZoomReactSvgUrl from "PUBLIC_DIR/images/share.zoom.react.svg?url"; +import ShareAppleReactSvg from "PUBLIC_DIR/images/share.apple.react.svg"; +import ShareGoogleReactSvg from "PUBLIC_DIR/images/share.google.react.svg"; +import ShareFacebookReactSvg from "PUBLIC_DIR/images/share.facebook.react.svg"; +import ShareTwitterReactSvg from "PUBLIC_DIR/images/share.twitter.react.svg"; +import ShareLinkedinReactSvg from "PUBLIC_DIR/images/share.linkedin.react.svg"; +import ShareMicrosoftReactSvg from "PUBLIC_DIR/images/share.microsoft.react.svg"; +import ShareZoomReactSvg from "PUBLIC_DIR/images/share.zoom.react.svg"; export const LOADER_STYLE = Object.freeze({ title: "", @@ -100,37 +100,37 @@ export const FOLDER_NAMES = Object.freeze({ export const PROVIDERS_DATA = Object.freeze({ appleid: { label: "apple", - icon: ShareAppleReactSvgUrl, + icon: ShareAppleReactSvg, iconOptions: undefined, }, google: { label: "google", - icon: ShareGoogleReactSvgUrl, + icon: ShareGoogleReactSvg, iconOptions: undefined, }, facebook: { label: "facebook", - icon: ShareFacebookReactSvgUrl, + icon: ShareFacebookReactSvg, iconOptions: undefined, }, twitter: { label: "twitter", - icon: ShareTwitterReactSvgUrl, + icon: ShareTwitterReactSvg, iconOptions: { color: "#2AA3EF" }, }, linkedin: { label: "linkedin", - icon: ShareLinkedinReactSvgUrl, + icon: ShareLinkedinReactSvg, iconOptions: undefined, }, microsoft: { label: "microsoft", - icon: ShareMicrosoftReactSvgUrl, + icon: ShareMicrosoftReactSvg, iconOptions: undefined, }, zoom: { label: "zoom", - icon: ShareZoomReactSvgUrl, + icon: ShareZoomReactSvg, iconOptions: undefined, }, });