Andal.LND/frontend-app-authn
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign tpa hint (#288)

Browse Source 
- redesign tpa hint button accourding to new design

VAN-478
This commit is contained in:
Mubbshar Anwar
2021-05-20 18:41:21 +05:00
committed by Waheed Ahmed
parent 527c714d2b
commit a29360fb66
5 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/common-components/EnterpriseSSO.jsx
View File

@@ -32,21 +32,20 @@ const EnterpriseSSO = (props) => {
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<div className="mw-450">
<h3>Sign in</h3>
<Form className="m-0">
<p>{intl.formatMessage(messages['enterprisetpa.title.heading'], { providerName: tpaProvider.name })}</p>
<Button
id={tpaProvider.id}
key={tpaProvider.id}
type="submit"
variant="primary"
className="btn-tpa"
variant="link"
className={`btn-tpa btn-${tpaProvider.id}`}
onClick={(e) => handleSubmit(e, tpaProvider.loginUrl)}
>
{tpaProvider.iconImage ? (
<div aria-hidden="true">
<img className="icon-image" src={tpaProvider.iconImage} alt={`icon ${tpaProvider.name}`} />
<span className="pl-2" aria-hidden="true">{intl.formatMessage(messages['enterprisetpa.sso.button.title'], { providerName: tpaProvider.name })}</span>
<span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
</div>
)
: (
@@ -56,7 +55,7 @@ const EnterpriseSSO = (props) => {
icon={SUPPORTED_ICON_CLASSES.includes(tpaProvider.iconClass) ? ['fab', tpaProvider.iconClass] : faSignInAlt}
/>
</div>
<span className="pl-2" aria-hidden="true">{intl.formatMessage(messages['enterprisetpa.sso.button.title'], { providerName: tpaProvider.name })}</span>
<span className="pl-2" aria-hidden="true">{ tpaProvider.name }</span>
</>
)}
</Button>

22
src/common-components/Logistration.jsx
View File

@@ -6,23 +6,27 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from './messages';
import { LOGIN_PAGE, REGISTER_PAGE } from '../data/constants';
import { updatePathWithQueryParams } from '../data/utils';
import { updatePathWithQueryParams, getTpaHint } from '../data/utils';
import { LoginPage } from '../login';
import { RegistrationPage } from '../register';
const Logistration = (props) => {
const { intl, selectedPage } = props;
const tpa = getTpaHint();
return (
<div>
<span className="nav nav-tabs">
<Link className={`nav-item nav-link ${selectedPage === REGISTER_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(REGISTER_PAGE)}>
{intl.formatMessage(messages['logistration.register'])}
</Link>
<Link className={`nav-item nav-link ${selectedPage === LOGIN_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(LOGIN_PAGE)}>
{intl.formatMessage(messages['logistration.sign.in'])}
</Link>
</span>
{!tpa
&& (
<span className="nav nav-tabs">
<Link className={`nav-item nav-link ${selectedPage === REGISTER_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(REGISTER_PAGE)}>
{intl.formatMessage(messages['logistration.register'])}
</Link>
<Link className={`nav-item nav-link ${selectedPage === LOGIN_PAGE ? 'active' : ''}`} to={updatePathWithQueryParams(LOGIN_PAGE)}>
{intl.formatMessage(messages['logistration.sign.in'])}
</Link>
</span>
)}
<div id="main-content" className="main-content">
{selectedPage === LOGIN_PAGE ? <LoginPage /> : <RegistrationPage />}
</div>