Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: change password alert when password based login is disabled (#3856)

Browse Source 
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)
This commit is contained in:
Nuno Góis 2023-05-24 12:14:14 +01:00 committed by GitHub
parent ea057c0473
commit 9f0de72e1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/component/user/Profile/PasswordTab/PasswordTab.tsx
View File

@ -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 (
<PageContent isLoading={loading} header="Change password">
<StyledForm>
<PasswordChecker
password={password}
callback={setValidPassword}
data-loading
/>
<PasswordField
data-loading
label="Password"
name="password"
value={password}
error={Boolean(error)}
helperText={error}
autoComplete="new-password"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setPassword(e.target.value)
}
/>
<PasswordField
data-loading
label="Confirm password"
name="confirmPassword"
value={confirmPassword}
autoComplete="new-password"
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
setConfirmPassword(e.target.value)
}
/>
<PasswordMatcher
data-loading
started={Boolean(password && confirmPassword)}
matchingPasswords={password === confirmPassword}
/>
<Button
data-loading
variant="contained"
color="primary"
type="submit"
onClick={submit}
>
Save
</Button>
</StyledForm>
<ConditionallyRender
condition={simpleAuthConfig.disabled}
show={
<Alert severity="error">
Password based login is currently disabled for your
Unleash instance.
</Alert>
}
elseShow={
<StyledForm>
<PasswordChecker
password={password}
callback={setValidPassword}
data-loading
/>
<PasswordField
data-loading
label="Password"
name="password"
value={password}
error={Boolean(error)}
helperText={error}
autoComplete="new-password"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => setPassword(e.target.value)}
/>
<PasswordField
data-loading
label="Confirm password"
name="confirmPassword"
value={confirmPassword}
autoComplete="new-password"
onChange={(
e: React.ChangeEvent<HTMLInputElement>
) => setConfirmPassword(e.target.value)}
/>
<PasswordMatcher
data-loading
started={Boolean(password && confirmPassword)}
matchingPasswords={password === confirmPassword}
/>
<Button
data-loading
variant="contained"
color="primary"
type="submit"
onClick={submit}
>
Save
</Button>
</StyledForm>
}
/>
</PageContent>
);
};