Skip to content

Commit

Permalink
Change: Adjust login page for new UI
Browse files Browse the repository at this point in the history 
Use new form components for updated UI at the login page.
  • Loading branch information
@bjoernricks
bjoernricks committed Jun 6, 2024
1 parent f26958b commit 82ef032
Showing 1 changed file with 38 additions and 102 deletions.
140 changes: 38 additions & 102 deletions src/web/pages/login/loginform.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,80 +19,28 @@ import React from 'react';

import styled from 'styled-components';

import _ from 'gmp/locale';

import {KeyCode} from 'gmp/utils/event';
import {isDefined} from 'gmp/utils/identity';

import useTranslation from 'web/hooks/useTranslation';

import Button from 'web/components/form/button';
import FormGroup from 'web/components/form/formgroup';
import TextField from 'web/components/form/textfield';
import PasswordField from 'web/components/form/passwordfield';
import ErrorContainer from 'web/components/error/errorcontainer';
import useFormValues from 'web/components/form/useFormValues';

import ProductImage from 'web/components/img/product';
import GreenboneLoginLogo from 'web/components/img/greenboneloginlogo';

import ErrorContainer from 'web/components/error/errorcontainer';

import Divider from 'web/components/layout/divider';
import Layout from 'web/components/layout/layout';

import PropTypes from 'web/utils/proptypes';
import Theme from 'web/utils/theme';

const Button = styled.button`
box-sizing: border-box;
color: ${Theme.white};
background-color: ${Theme.loginButtonGray};
border: none;
border-radius: 3px;
font-size: 1rem;
font-weight: normal;
min-height: 2.25rem;
margin: 0;
padding-right: 1.25rem;
padding-left: 1.25rem;
&:hover {
cursor: pointer;
background-color: ${Theme.loginButtonHover};
}
& + & {
margin-left: 1.25rem;
}
`;

const StyledFormGroup = styled(FormGroup)`
display: flex;
flex-grow: 1;
margin: 0;
font-family: 'DroidSans', Arial, sans-serif;
width: 100%;
margin-bottom: 1rem;
`;

const fieldStyles = () => `
font-family: 'DroidSans', Arial, sans-serif;
width: 100%;
font-size: 12pt;
margin-top: 16px;
margin-bottom: 8px;
border: none;
border-bottom: 1px solid ${Theme.mediumDarkGray};
transition: border-bottom-color 0.2s ease-in-out;
&:hover {
border-bottom: 2px solid ${Theme.darkGray};
}
&:focus {
outline: none;
border-bottom: 2px solid ${Theme.darkGray};
}
`;

const StyledTextField = styled(TextField)`
${fieldStyles()}
`;

const StyledPasswordField = styled(PasswordField)`
${fieldStyles()}
margin-bottom: 4px;
`;

const Paper = styled(Layout)`
background: ${Theme.white};
box-shadow: 0px 14px 22px ${Theme.mediumGray};
Expand All @@ -110,11 +58,6 @@ const Panel = styled.div`
margin-bottom: 10px;
`;

const StyledLayout = styled(Layout)`
min-height: 12rem;
justify-content: space-evenly;
`;

const Error = styled.p`
color: ${Theme.warningRed};
font-weight: bold;
Expand All @@ -128,10 +71,6 @@ const StyledErrorContainer = styled(ErrorContainer)`
border-radius: 4px;
`;

const StyledButton = styled(Button)`
width: 100%;
`;

const StyledPanel = styled(Panel)`
margin-top: 20px;
`;
Expand All @@ -154,6 +93,7 @@ const LoginForm = ({
onGuestLoginClick,
onSubmit,
}) => {
const [_] = useTranslation();
const [{username, password}, handleValueChange] = useFormValues({
username: '',
password: '',
Expand All @@ -174,11 +114,11 @@ const LoginForm = ({
return (
<Paper>
<Divider flex="column" margin="10px" grow="1">
<Layout align={'center'}>
<Layout align="center">
<GreenboneLoginLogo width="300px" />
</Layout>

<Layout flex={'column'}>
<Layout flex="column">
{showProtocolInsecure && (
<StyledPanel data-testid="protocol-insecure">
<Error>{_('Warning: Connection unencrypted')}</Error>
Expand Down Expand Up @@ -219,47 +159,43 @@ const LoginForm = ({
)}

{showLogin && !isIE11 && (
<StyledLayout flex={'column'}>
<FormGroup>
<H1>{_('Sign in to your account')}</H1>
<StyledFormGroup size="12" paddingLeft="2px">
<StyledTextField
autoComplete="username"
name="username"
grow="1"
placeholder={_('Username')}
value={username}
autoFocus={true}
tabIndex="1"
onChange={handleValueChange}
/>
</StyledFormGroup>
<StyledFormGroup size="12" paddingLeft="2px">
<StyledPasswordField
autoComplete="current-password"
name="password"
grow="1"
placeholder={_('Password')}
value={password}
onKeyDown={handleKeyDown}
onChange={handleValueChange}
/>
</StyledFormGroup>
<StyledButton data-testid="login-button" onClick={handleSubmit}>
<TextField
autoComplete="username"
name="username"
placeholder={_('Username')}
value={username}
autoFocus={true}
tabIndex="1"
title={_('Username')}
onChange={handleValueChange}
/>
<PasswordField
autoComplete="current-password"
name="password"
placeholder={_('Password')}
title={_('Password')}
value={password}
onKeyDown={handleKeyDown}
onChange={handleValueChange}
/>
<Button data-testid="login-button" onClick={handleSubmit}>
{_('Sign In')}
</StyledButton>
</StyledLayout>
</Button>
</FormGroup>
)}
</>

{showGuestLogin && (
<div data-testid="guest-login">
<StyledButton
<FormGroup data-testid="guest-login">
<Button
data-testid="guest-login-button"
onClick={onGuestLoginClick}
>
{_('Sign In as Guest')}
</StyledButton>
</div>
</Button>
</FormGroup>
)}

<ProductImageContainer align={'center'}>
Expand Down

0 comments on commit 82ef032

Please sign in to comment.