diff --git a/signup-ui/src/app/AppRouter.tsx b/signup-ui/src/app/AppRouter.tsx index 97d171d7..47c0ef6c 100644 --- a/signup-ui/src/app/AppRouter.tsx +++ b/signup-ui/src/app/AppRouter.tsx @@ -16,6 +16,7 @@ import { UNDER_CONSTRUCTION, } from "~constants/routes"; import { lazyRetry } from "~utils/lazyRetry"; +import { setupResponseInterceptor } from "~services/api.service"; const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage"))); const ResetPasswordPage = lazy(() => diff --git a/signup-ui/src/assets/png/info-38-2.png b/signup-ui/src/assets/png/info-38-2.png new file mode 100644 index 00000000..0f42d938 Binary files /dev/null and b/signup-ui/src/assets/png/info-38-2.png differ diff --git a/signup-ui/src/components/icon-label-popover.tsx b/signup-ui/src/components/icon-label-popover.tsx new file mode 100644 index 00000000..d61cbb51 --- /dev/null +++ b/signup-ui/src/components/icon-label-popover.tsx @@ -0,0 +1,36 @@ +import { + Popover, + PopoverArrow, + PopoverContent, + PopoverTrigger, +} from "./ui/popover"; + +interface IconLabelPopoverProps { + icon: React.ReactNode; + children: React.ReactNode; +} + +export const IconLabelPopover = ({ icon, children }: IconLabelPopoverProps) => { + return ( + <> +
+ + {icon} + + {children} + + + +
+
+ + {icon} + + {children} + + + +
+ + ); +}; diff --git a/signup-ui/src/components/ui/icons.tsx b/signup-ui/src/components/ui/icons.tsx index ac7672d8..16da8b61 100644 --- a/signup-ui/src/components/ui/icons.tsx +++ b/signup-ui/src/components/ui/icons.tsx @@ -1,12 +1,12 @@ import * as React from "react"; +import InfoPng from "~assets/png/info-38-2.png"; import { ReactComponent as ArrowLeft } from "~assets/svg/arrow-left.svg"; import { ReactComponent as Check } from "~assets/svg/check.svg"; import { ReactComponent as ChevronDown } from "~assets/svg/chevron-down.svg"; import { ReactComponent as ChevronUp } from "~assets/svg/chevron-up.svg"; import { ReactComponent as EyeOff } from "~assets/svg/eye-off.svg"; import { ReactComponent as Eye } from "~assets/svg/eye.svg"; -import { ReactComponent as Info } from "~assets/svg/info.svg"; import { ReactComponent as Loader } from "~assets/svg/loader.svg"; import { ReactComponent as X } from "~assets/svg/x.svg"; @@ -18,7 +18,12 @@ export const Icons = { close: X, eye: Eye, eyeOff: EyeOff, - info: Info, + info: React.forwardRef< + HTMLImageElement, + React.ImgHTMLAttributes + >(({ alt, ...props }, ref) => ( + {alt} + )), loader: Loader, arrow: React.forwardRef>( (props, ref) => ( diff --git a/signup-ui/src/components/ui/popover.tsx b/signup-ui/src/components/ui/popover.tsx index 78852ca3..9b4daa37 100644 --- a/signup-ui/src/components/ui/popover.tsx +++ b/signup-ui/src/components/ui/popover.tsx @@ -5,6 +5,8 @@ import { cn } from "~utils/cn"; const Popover = PopoverPrimitive.Root; +const PopoverAnchor = PopoverPrimitive.Anchor; + const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef< @@ -17,7 +19,7 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={cn( - "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-50 w-[175px] rounded-md border bg-popover px-3 py-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 md:w-[220px] sm:w-[200px]", className )} {...props} @@ -37,4 +39,4 @@ const PopoverArrow = React.forwardRef< /> )); -export { Popover, PopoverTrigger, PopoverArrow, PopoverContent }; +export { Popover, PopoverAnchor, PopoverTrigger, PopoverArrow, PopoverContent }; diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 81ece7ce..3abb1f60 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -3,6 +3,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form"; import { Trans, useTranslation } from "react-i18next"; import { useLocation } from "react-router-dom"; +import { IconLabelPopover } from "~components/icon-label-popover"; import { ActionMessage } from "~components/ui/action-message"; import { Button } from "~components/ui/button"; import { @@ -14,12 +15,6 @@ import { } from "~components/ui/form"; import { Icons } from "~components/ui/icons"; import { Input } from "~components/ui/input"; -import { - Popover, - PopoverArrow, - PopoverContent, - PopoverTrigger, -} from "~components/ui/popover"; import { Step, StepAlert, @@ -172,21 +167,22 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => {
{t("new_password")} - - - - - - , - li:
  • , - }} + - - - + } + > + , + li:
  • , + }} + /> +
    • { const { registerMutation } = useRegister(); const [openTermConditionModal, setOpenTermConditionModal] = useState(false); - const [modalData, setModalData] = useState({title: "", content: ""}); + const [modalData, setModalData] = useState({ title: "", content: "" }); const disabledContinue = !isValid || @@ -121,20 +120,26 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { const onModalToggle = () => { setOpenTermConditionModal(false); - setModalData({title: "", content: ""}); - } + setModalData({ title: "", content: "" }); + }; const onOpenTerm = (e: any) => { e.preventDefault(); - setModalData({title: t("terms_and_conditions_title"), content: t("terms_and_conditions_content")}); + setModalData({ + title: t("terms_and_conditions_title"), + content: t("terms_and_conditions_content"), + }); setOpenTermConditionModal(true); - } + }; const onOpenPrivacy = (e: any) => { e.preventDefault(); - setModalData({title: t("privacy_and_policy_title"), content: t("privacy_and_policy_content")}); + setModalData({ + title: t("privacy_and_policy_title"), + content: t("privacy_and_policy_content"), + }); setOpenTermConditionModal(true); - } + }; const handleFullNameInput = (event: KeyboardEvent) => handleInputFilter( @@ -183,15 +188,16 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
    {t("full_name")} - - - - - - {t("full_name_tooltip")} - - - + + } + > + {t("full_name_tooltip")} +
    {
    {t("password")} - - - - - - , - li:
  • , - }} + - - - + } + > + , + li:
  • , + }} + /> +