From 9f0de72e1a575a1c1aaf5465e640ccadf6da3ae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Wed, 24 May 2023 12:14:14 +0100 Subject: [PATCH] fix: change password alert when password based login is disabled (#3856) Accessing `/profile/change-password` directly would still allow you to change your password on the UI when "password based login" is disabled. This PR makes it so we show an alert in that scenario explaining why you're not allowed to change your password. We still allow users to change their password on the API level, but I think that's fine. The UI should be consistent though. ![image](https://github.com/Unleash/unleash/assets/14320932/0406c773-7bc3-4519-83f8-9eddeb627e28) --- .../user/Profile/PasswordTab/PasswordTab.tsx | 106 ++++++++++-------- 1 file changed, 62 insertions(+), 44 deletions(-) diff --git a/frontend/src/component/user/Profile/PasswordTab/PasswordTab.tsx b/frontend/src/component/user/Profile/PasswordTab/PasswordTab.tsx index 76ddcc0dd7..3725f92544 100644 --- a/frontend/src/component/user/Profile/PasswordTab/PasswordTab.tsx +++ b/frontend/src/component/user/Profile/PasswordTab/PasswordTab.tsx @@ -1,4 +1,5 @@ -import { Button, styled } from '@mui/material'; +import { Alert, Button, styled } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PageContent } from 'component/common/PageContent/PageContent'; import PasswordField from 'component/common/PasswordField/PasswordField'; import PasswordChecker, { @@ -6,6 +7,7 @@ import PasswordChecker, { } from 'component/user/common/ResetPasswordForm/PasswordChecker'; import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher'; import { usePasswordApi } from 'hooks/api/actions/usePasswordApi/usePasswordApi'; +import useAuthSettings from 'hooks/api/getters/useAuthSettings/useAuthSettings'; import useToast from 'hooks/useToast'; import { SyntheticEvent, useState } from 'react'; import { formatUnknownError } from 'utils/formatUnknownError'; @@ -18,6 +20,9 @@ const StyledForm = styled('form')(({ theme }) => ({ })); export const PasswordTab = () => { + const { config: simpleAuthConfig, loading: authSettingsLoading } = + useAuthSettings('simple'); + const [loading, setLoading] = useState(false); const { setToastData, setToastApiError } = useToast(); const [validPassword, setValidPassword] = useState(false); @@ -55,51 +60,64 @@ export const PasswordTab = () => { setLoading(false); }; + if (authSettingsLoading) return null; + return ( - - - ) => - setPassword(e.target.value) - } - /> - ) => - setConfirmPassword(e.target.value) - } - /> - - - + + Password based login is currently disabled for your + Unleash instance. + + } + elseShow={ + + + + ) => setPassword(e.target.value)} + /> + + ) => setConfirmPassword(e.target.value)} + /> + + + + } + /> ); };