diff --git a/packages/webapp/src/containers/Authentication/AuthMetaBoot.tsx b/packages/webapp/src/containers/Authentication/AuthMetaBoot.tsx new file mode 100644 index 000000000..0c5ccc4e3 --- /dev/null +++ b/packages/webapp/src/containers/Authentication/AuthMetaBoot.tsx @@ -0,0 +1,36 @@ +// @ts-nocheck +import React, { createContext } from 'react'; +import { useAuthMetadata } from '@/hooks/query'; +import { Spinner } from '@blueprintjs/core'; +import styled from 'styled-components'; + +const AuthMetaBootContext = createContext(); + +/** + * Boots the authentication page metadata. + */ +function AuthMetaBootProvider({ ...props }) { + const { isLoading: isAuthMetaLoading, data: authMeta } = useAuthMetadata(); + + const state = { + isAuthMetaLoading, + signupDisabled: authMeta?.meta?.signup_disabled, + }; + + if (isAuthMetaLoading) { + return ( + + + + ); + } + return ; +} + +const useAuthMetaBoot = () => React.useContext(AuthMetaBootContext); + +export { AuthMetaBootContext, AuthMetaBootProvider, useAuthMetaBoot }; + +const SpinnerRoot = styled.div` + margin-top: 5rem; +`; diff --git a/packages/webapp/src/containers/Authentication/Authentication.tsx b/packages/webapp/src/containers/Authentication/Authentication.tsx index 1fc2515e9..8d2887849 100644 --- a/packages/webapp/src/containers/Authentication/Authentication.tsx +++ b/packages/webapp/src/containers/Authentication/Authentication.tsx @@ -10,12 +10,11 @@ import { Icon, FormattedMessage as T } from '@/components'; import { useIsAuthenticated } from '@/hooks/state'; import '@/style/pages/Authentication/Auth.scss'; +import { AuthMetaBootProvider } from './AuthMetaBoot'; export function Authentication() { const to = { pathname: '/' }; - const location = useLocation(); const isAuthenticated = useIsAuthenticated(); - const locationKey = location.pathname; if (isAuthenticated) { return ; @@ -28,30 +27,41 @@ export function Authentication() { - - - - {authenticationRoutes.map((route, index) => ( - - ))} - - - + + + ); } +function AuthenticationRoutes() { + const location = useLocation(); + const locationKey = location.pathname; + + return ( + + + + {authenticationRoutes.map((route, index) => ( + + ))} + + + + ); +} + const AuthPage = styled.div``; const AuthInsider = styled.div` width: 384px; diff --git a/packages/webapp/src/containers/Authentication/Login.tsx b/packages/webapp/src/containers/Authentication/Login.tsx index 4032f2e67..641e5e213 100644 --- a/packages/webapp/src/containers/Authentication/Login.tsx +++ b/packages/webapp/src/containers/Authentication/Login.tsx @@ -14,11 +14,12 @@ import { AuthFooterLink, AuthInsiderCard, } from './_components'; +import { useAuthMetaBoot } from './AuthMetaBoot'; const initialValues = { crediential: '', password: '', - keepLoggedIn: false + keepLoggedIn: false, }; /** @@ -64,12 +65,15 @@ export default function Login() { } function LoginFooterLinks() { + const { signupDisabled } = useAuthMetaBoot(); + return ( - - Don't have an account? Sign up - - + {!signupDisabled && ( + + Don't have an account? Sign up + + )} diff --git a/packages/webapp/src/containers/Authentication/Register.tsx b/packages/webapp/src/containers/Authentication/Register.tsx index aba50d734..4b4cc79f4 100644 --- a/packages/webapp/src/containers/Authentication/Register.tsx +++ b/packages/webapp/src/containers/Authentication/Register.tsx @@ -10,7 +10,7 @@ import AuthInsider from '@/containers/Authentication/AuthInsider'; import { useAuthLogin, useAuthRegister } from '@/hooks/query/authentication'; import RegisterForm from './RegisterForm'; -import { RegisterSchema, transformRegisterErrorsToForm } from './utils'; +import { RegisterSchema, transformRegisterErrorsToForm, transformRegisterToastMessages } from './utils'; import { AuthFooterLinks, AuthFooterLink, @@ -57,7 +57,11 @@ export default function RegisterUserForm() { }, }) => { const formErrors = transformRegisterErrorsToForm(errors); + const toastMessages = transformRegisterToastMessages(errors); + toastMessages.forEach((toastMessage) => { + AppToaster.show(toastMessage); + }); setErrors(formErrors); setSubmitting(false); }, diff --git a/packages/webapp/src/containers/Authentication/ResetPassword.tsx b/packages/webapp/src/containers/Authentication/ResetPassword.tsx index 8b3613c81..136d28174 100644 --- a/packages/webapp/src/containers/Authentication/ResetPassword.tsx +++ b/packages/webapp/src/containers/Authentication/ResetPassword.tsx @@ -16,6 +16,7 @@ import { } from './_components'; import ResetPasswordForm from './ResetPasswordForm'; import { ResetPasswordSchema } from './utils'; +import { useAuthMetaBoot } from './AuthMetaBoot'; const initialValues = { password: '', @@ -79,12 +80,15 @@ export default function ResetPassword() { } function ResetPasswordFooterLinks() { + const { signupDisabled } = useAuthMetaBoot(); + return ( - - Don't have an account? Sign up - - + {!signupDisabled && ( + + Don't have an account? Sign up + + )} Return to Sign In diff --git a/packages/webapp/src/containers/Authentication/SendResetPassword.tsx b/packages/webapp/src/containers/Authentication/SendResetPassword.tsx index 8bf07809f..c90f872c1 100644 --- a/packages/webapp/src/containers/Authentication/SendResetPassword.tsx +++ b/packages/webapp/src/containers/Authentication/SendResetPassword.tsx @@ -19,6 +19,7 @@ import { transformSendResetPassErrorsToToasts, } from './utils'; import AuthInsider from '@/containers/Authentication/AuthInsider'; +import { useAuthMetaBoot } from './AuthMetaBoot'; const initialValues = { crediential: '', @@ -27,7 +28,7 @@ const initialValues = { /** * Send reset password page. */ -export default function SendResetPassword({ requestSendResetPassword }) { +export default function SendResetPassword() { const history = useHistory(); const { mutateAsync: sendResetPasswordMutate } = useAuthSendResetPassword(); @@ -75,12 +76,15 @@ export default function SendResetPassword({ requestSendResetPassword }) { } function SendResetPasswordFooterLinks() { + const { signupDisabled } = useAuthMetaBoot(); + return ( - - Don't have an account? Sign up - - + {!signupDisabled && ( + + Don't have an account? Sign up + + )} Return to Sign In diff --git a/packages/webapp/src/containers/Authentication/utils.tsx b/packages/webapp/src/containers/Authentication/utils.tsx index 2d8edfafd..c4d5ff7e7 100644 --- a/packages/webapp/src/containers/Authentication/utils.tsx +++ b/packages/webapp/src/containers/Authentication/utils.tsx @@ -94,3 +94,29 @@ export const transformRegisterErrorsToForm = (errors) => { } return formErrors; }; + +export const transformRegisterToastMessages = (errors) => { + const toastErrors = []; + + if (errors.some((e) => e.type === 'SIGNUP_NOT_ALLOWED_EMAIL_DOMAIN')) { + toastErrors.push({ + message: + 'The sign-up is restricted, the given email domain is not allowed to sign-up.', + intent: Intent.DANGER, + }); + } else if ( + errors.some((e) => e.type === 'SIGNUP_NOT_ALLOWED_EMAIL_ADDRESS') + ) { + toastErrors.push({ + message: + 'The sign-up is restricted, the given email address is not allowed to sign-up.', + intent: Intent.DANGER, + }); + } else if (errors.find((e) => e.type === 'SIGNUP_RESTRICTED')) { + toastErrors.push({ + message: 'Sign-up is disabled, and no new accounts can be created.', + intent: Intent.DANGER, + }); + } + return toastErrors; +}; diff --git a/packages/webapp/src/hooks/query/authentication.tsx b/packages/webapp/src/hooks/query/authentication.tsx index e00dd02ae..a604ec322 100644 --- a/packages/webapp/src/hooks/query/authentication.tsx +++ b/packages/webapp/src/hooks/query/authentication.tsx @@ -2,6 +2,8 @@ import { useMutation } from 'react-query'; import useApiRequest from '../useRequest'; import { setCookie } from '../../utils'; +import { useRequestQuery } from '../useQueryRequest'; +import t from './types'; /** * Saves the response data to cookies. @@ -70,3 +72,21 @@ export const useAuthResetPassword = (props) => { props, ); }; + +/** + * Fetches the authentication page metadata. + */ +export const useAuthMetadata = (props) => { + return useRequestQuery( + [t.AUTH_METADATA_PAGE,], + { + method: 'get', + url: `auth/meta`, + }, + { + select: (res) => res.data, + defaultData: {}, + ...props, + }, + ); +} diff --git a/packages/webapp/src/hooks/query/types.tsx b/packages/webapp/src/hooks/query/types.tsx index 696aa68c9..511ddccb4 100644 --- a/packages/webapp/src/hooks/query/types.tsx +++ b/packages/webapp/src/hooks/query/types.tsx @@ -1,4 +1,8 @@ // @ts-nocheck +const Authentication = { + AUTH_METADATA_PAGE: 'AUTH_META_PAGE' +} + const ACCOUNTS = { ACCOUNT: 'ACCOUNT', ACCOUNT_TRANSACTION: 'ACCOUNT_TRANSACTION', @@ -217,6 +221,7 @@ const DASHBOARD = { }; export default { + ...Authentication, ...ACCOUNTS, ...BILLS, ...VENDORS,