Fleet UI: Update login tab order (#22930)

This commit is contained in:
RachelElysia 2024-10-16 11:24:27 -04:00 committed by GitHub
parent 346ebe0d0a
commit dc6c1383e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 11 deletions

View file

@ -141,18 +141,23 @@ const LoginForm = ({
value={formData.password}
onChange={onInputChange("password")}
/>
<div className={`${baseClass}__forgot-wrap`}>
<Link
className={`${baseClass}__forgot-link`}
to={paths.FORGOT_PASSWORD}
>
Forgot password?
</Link>
{/* Actions displayed using CSS column-reverse to preserve tab order */}
<div className={`${baseClass}__actions`}>
<div className={`${baseClass}__login-actions`}>
<Button className={`login-btn button button--brand`} type="submit">
Login
</Button>
{ssoEnabled && renderSingleSignOnButton()}
</div>
<div className={`${baseClass}__forgot-wrap`}>
<Link
className={`${baseClass}__forgot-link`}
to={paths.FORGOT_PASSWORD}
>
Forgot password?
</Link>
</div>
</div>
<Button className={`login-btn button button--brand`} type="submit">
Login
</Button>
{ssoEnabled && renderSingleSignOnButton()}
</form>
);
};

View file

@ -39,4 +39,17 @@
&__sso-legend {
vertical-align: middle;
}
&__actions {
display: flex;
flex-direction: column-reverse;
gap: $pad-large;
}
&__login-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: $pad-large;
}
}