External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 03:10:42 -03:30
Code Issues Packages Projects Releases Wiki Activity

add background component

Browse Source
This commit is contained in:
Jake McDermott 2019-01-02 01:23:12 -05:00
parent a2601d5f67
commit f975f9fa75
No known key found for this signature in database
GPG Key ID: 9A6F084352C3A0B7
3 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.jsx
View File

@ -9,8 +9,6 @@ import {
Route,
} from 'react-router-dom';
import {
BackgroundImage,
BackgroundImageSrc,
Nav,
NavList,
Page,
@ -30,6 +28,7 @@ import { API_LOGOUT, API_CONFIG } from './endpoints';
import ja from '../build/locales/ja/messages';
import en from '../build/locales/en/messages';
import Login from './pages/Login';
import Background from './components/Background';
import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo';
@ -43,18 +42,6 @@ const language = (navigator.languages && navigator.languages[0])
|| navigator.userLanguage;
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
// define background src image config
const backgroundConfig = {
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg'
};
class App extends React.Component {
constructor(props) {
@ -113,8 +100,7 @@ class App extends React.Component {
<Route path="/login" render={() => <Redirect to='/home' />} />
<Route exact path="/" render={() => <Redirect to='/home' />} />
<Route render={() => (
<Fragment>
<BackgroundImage src={backgroundConfig} />
<Background>
<Page
usecondensed="True"
header={(
@ -171,7 +157,7 @@ class App extends React.Component {
))
}
</Page>
</Fragment>
</Background>
)} />
</Switch>
</ConfigContext.Provider>

25
src/components/Background.jsx Normal file
View File

@ -0,0 +1,25 @@
import React, { Fragment } from 'react';
import {
BackgroundImage,
BackgroundImageSrc,
} from '@patternfly/react-core';
const backgroundImageConfig = {
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg',
};
export default ({ children }) => (
<Fragment>
<BackgroundImage src={backgroundImageConfig} />
{ children }
</Fragment>
);

38
src/pages/Login.jsx
View File

@ -10,6 +10,8 @@ import {
import towerLogo from '../../images/tower-logo-header.svg';
import api from '../api';
import Background from '../components/Background';
class AtLogin extends Component {
constructor (props) {
super(props);
@ -64,23 +66,25 @@ class AtLogin extends Component {
return (
<I18n>
{({ i18n }) => (
<LoginPage
brandImgSrc={logoSrc}
brandImgAlt={alt || 'Ansible Tower'}
loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
>
<LoginForm
usernameLabel={i18n._(t`Username`)}
usernameValue={username}
onChangeUsername={this.handleUsernameChange}
passwordLabel={i18n._(t`Password`)}
passwordValue={password}
onChangePassword={this.handlePasswordChange}
isValidPassword={isValidPassword}
passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
onLoginButtonClick={this.handleSubmit}
/>
</LoginPage>
<Background>
<LoginPage
brandImgSrc={logoSrc}
brandImgAlt={alt || 'Ansible Tower'}
loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
>
<LoginForm
usernameLabel={i18n._(t`Username`)}
usernameValue={username}
onChangeUsername={this.handleUsernameChange}
passwordLabel={i18n._(t`Password`)}
passwordValue={password}
onChangePassword={this.handlePasswordChange}
isValidPassword={isValidPassword}
passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
onLoginButtonClick={this.handleSubmit}
/>
</LoginPage>
</Background>
)}
</I18n>
);