External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-06 08:57:35 -02: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
3 changed files with 49 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.jsx
View File

@@ -9,8 +9,6 @@ import {
Route, Route,
} from 'react-router-dom'; } from 'react-router-dom';
import { import {
BackgroundImage,
BackgroundImageSrc,
Nav, Nav,
NavList, NavList,
Page, Page,
@@ -30,6 +28,7 @@ import { API_LOGOUT, API_CONFIG } from './endpoints';
import ja from '../build/locales/ja/messages'; import ja from '../build/locales/ja/messages';
import en from '../build/locales/en/messages'; import en from '../build/locales/en/messages';
import Login from './pages/Login'; import Login from './pages/Login';
import Background from './components/Background';
import HelpDropdown from './components/HelpDropdown'; import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton'; import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo'; import TowerLogo from './components/TowerLogo';
@@ -43,18 +42,6 @@ const language = (navigator.languages && navigator.languages[0])
|| navigator.userLanguage; || navigator.userLanguage;
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0]; 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 { class App extends React.Component {
constructor(props) { constructor(props) {
@@ -113,8 +100,7 @@ class App extends React.Component {
<Route path="/login" render={() => <Redirect to='/home' />} /> <Route path="/login" render={() => <Redirect to='/home' />} />
<Route exact path="/" render={() => <Redirect to='/home' />} /> <Route exact path="/" render={() => <Redirect to='/home' />} />
<Route render={() => ( <Route render={() => (
<Fragment> <Background>
<BackgroundImage src={backgroundConfig} />
<Page <Page
usecondensed="True" usecondensed="True"
header={( header={(
@@ -171,7 +157,7 @@ class App extends React.Component {
)) ))
} }
</Page> </Page>
</Fragment> </Background>
)} /> )} />
</Switch> </Switch>
</ConfigContext.Provider> </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 towerLogo from '../../images/tower-logo-header.svg';
import api from '../api'; import api from '../api';
import Background from '../components/Background';
class AtLogin extends Component { class AtLogin extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
@@ -64,23 +66,25 @@ class AtLogin extends Component {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<LoginPage <Background>
brandImgSrc={logoSrc} <LoginPage
brandImgAlt={alt || 'Ansible Tower'} brandImgSrc={logoSrc}
loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)} brandImgAlt={alt || 'Ansible Tower'}
> loginTitle={i18n._(t`Welcome to Ansible Tower! Please Sign In.`)}
<LoginForm >
usernameLabel={i18n._(t`Username`)} <LoginForm
usernameValue={username} usernameLabel={i18n._(t`Username`)}
onChangeUsername={this.handleUsernameChange} usernameValue={username}
passwordLabel={i18n._(t`Password`)} onChangeUsername={this.handleUsernameChange}
passwordValue={password} passwordLabel={i18n._(t`Password`)}
onChangePassword={this.handlePasswordChange} passwordValue={password}
isValidPassword={isValidPassword} onChangePassword={this.handlePasswordChange}
passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)} isValidPassword={isValidPassword}
onLoginButtonClick={this.handleSubmit} passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
/> onLoginButtonClick={this.handleSubmit}
</LoginPage> />
</LoginPage>
</Background>
)} )}
</I18n> </I18n>
); );