diff --git a/.pa11yci-pr.conf.js b/.pa11yci-pr.conf.js index 7b459c84ab5..47540f4b6ef 100644 --- a/.pa11yci-pr.conf.js +++ b/.pa11yci-pr.conf.js @@ -74,7 +74,7 @@ var config = { "click element button[aria-label='Login button']", "wait for element [aria-label='Skip change password button'] to be visible", ], - threshold: 14, + threshold: 15, rootElement: '.main-view', }, { diff --git a/public/app/core/components/ForgottenPassword/ChangePassword.tsx b/public/app/core/components/ForgottenPassword/ChangePassword.tsx index f97de51947c..d24442a91e1 100644 --- a/public/app/core/components/ForgottenPassword/ChangePassword.tsx +++ b/public/app/core/components/ForgottenPassword/ChangePassword.tsx @@ -1,13 +1,14 @@ import React, { SyntheticEvent } from 'react'; import { selectors } from '@grafana/e2e-selectors'; -import { Tooltip, Form, Field, VerticalGroup, Button } from '@grafana/ui'; +import { Tooltip, Form, Field, VerticalGroup, Button, Alert } from '@grafana/ui'; import { submitButton } from '../Login/LoginForm'; import { PasswordField } from '../PasswordField/PasswordField'; interface Props { onSubmit: (pw: string) => void; onSkip?: (event?: SyntheticEvent) => void; + showDefaultPasswordWarning?: boolean; } interface PasswordDTO { @@ -15,7 +16,7 @@ interface PasswordDTO { confirmNew: string; } -export const ChangePassword = ({ onSubmit, onSkip }: Props) => { +export const ChangePassword = ({ onSubmit, onSkip, showDefaultPasswordWarning }: Props) => { const submit = (passwords: PasswordDTO) => { onSubmit(passwords.newPassword); }; @@ -23,6 +24,9 @@ export const ChangePassword = ({ onSubmit, onSkip }: Props) => {
{({ errors, register, getValues }) => ( <> + {showDefaultPasswordWarning && ( + + )} export const ChangePasswordPage = (props: Props) => { return ( - + {({ changePassword }) => } diff --git a/public/app/core/components/Login/LoginCtrl.tsx b/public/app/core/components/Login/LoginCtrl.tsx index 72a9d1aa8be..468353aac32 100644 --- a/public/app/core/components/Login/LoginCtrl.tsx +++ b/public/app/core/components/Login/LoginCtrl.tsx @@ -31,12 +31,14 @@ interface Props { isOauthEnabled: boolean; loginHint: string; passwordHint: string; + showDefaultPasswordWarning: boolean; }) => JSX.Element; } interface State { isLoggingIn: boolean; isChangingPassword: boolean; + showDefaultPasswordWarning: boolean; } export class LoginCtrl extends PureComponent { @@ -47,6 +49,7 @@ export class LoginCtrl extends PureComponent { this.state = { isLoggingIn: false, isChangingPassword: false, + showDefaultPasswordWarning: false, }; if (config.loginError) { @@ -96,7 +99,7 @@ export class LoginCtrl extends PureComponent { this.toGrafana(); return; } else { - this.changeView(); + this.changeView(formModel.password === 'admin'); } }) .catch(() => { @@ -106,9 +109,10 @@ export class LoginCtrl extends PureComponent { }); }; - changeView = () => { + changeView = (showDefaultPasswordWarning: boolean) => { this.setState({ isChangingPassword: true, + showDefaultPasswordWarning, }); }; @@ -127,7 +131,7 @@ export class LoginCtrl extends PureComponent { render() { const { children } = this.props; - const { isLoggingIn, isChangingPassword } = this.state; + const { isLoggingIn, isChangingPassword, showDefaultPasswordWarning } = this.state; const { login, toGrafana, changePassword } = this; const { loginHint, passwordHint, disableLoginForm, disableUserSignUp } = config; @@ -144,6 +148,7 @@ export class LoginCtrl extends PureComponent { changePassword, skipPasswordChange: toGrafana, isChangingPassword, + showDefaultPasswordWarning, })} ); diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx index b4ca25ce50c..96077284b99 100644 --- a/public/app/core/components/Login/LoginLayout.tsx +++ b/public/app/core/components/Login/LoginLayout.tsx @@ -19,9 +19,10 @@ export const InnerBox = ({ children, enterAnimation = true }: React.PropsWithChi export interface LoginLayoutProps { /** Custom branding settings that can be used e.g. for previewing the Login page changes */ branding?: BrandingSettings; + isChangingPassword?: boolean; } -export const LoginLayout = ({ children, branding }: React.PropsWithChildren) => { +export const LoginLayout = ({ children, branding, isChangingPassword }: React.PropsWithChildren) => { const loginStyles = useStyles2(getLoginStyles); const [startAnim, setStartAnim] = useState(false); const subTitle = branding?.loginSubtitle ?? Branding.GetLoginSubTitle(); @@ -39,8 +40,14 @@ export const LoginLayout = ({ children, branding }: React.PropsWithChildren
-

{loginTitle}

- {subTitle &&

{subTitle}

} + {isChangingPassword ? ( +

Update your password

+ ) : ( + <> +

{loginTitle}

+ {subTitle &&

{subTitle}

} + + )}
{children}
@@ -144,7 +151,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => { justify-content: center; `, loginInnerBox: css` - padding: ${theme.spacing(2)}; + padding: ${theme.spacing(0, 2, 2, 2)}; display: flex; flex-direction: column; diff --git a/public/app/core/components/Login/LoginPage.tsx b/public/app/core/components/Login/LoginPage.tsx index a5e91e704ba..58dd82b83fe 100644 --- a/public/app/core/components/Login/LoginPage.tsx +++ b/public/app/core/components/Login/LoginPage.tsx @@ -23,52 +23,50 @@ const forgottenPasswordStyles = css` export const LoginPage = () => { document.title = Branding.AppTitle; return ( - - - {({ - loginHint, - passwordHint, - disableLoginForm, - disableUserSignUp, - login, - isLoggingIn, - changePassword, - skipPasswordChange, - isChangingPassword, - }) => ( - <> - {!isChangingPassword && ( - - {!disableLoginForm && ( - - - - Forgot your password? - - - - )} - - {!disableUserSignUp && } - - )} - {isChangingPassword && ( - - skipPasswordChange()} /> - - )} - - )} - - + + {({ + loginHint, + passwordHint, + disableLoginForm, + disableUserSignUp, + login, + isLoggingIn, + changePassword, + skipPasswordChange, + isChangingPassword, + showDefaultPasswordWarning, + }) => ( + + {!isChangingPassword && ( + + {!disableLoginForm && ( + + + + Forgot your password? + + + + )} + + {!disableUserSignUp && } + + )} + {isChangingPassword && ( + + skipPasswordChange()} + /> + + )} + + )} + ); };