Skip to content

Commit

Permalink
Tno 2249 subscriber login page (#1491)
Browse files Browse the repository at this point in the history 
* TNO-2249 Browser login screen

* TNO-2249 Layout adjustments

* TNO-2249 - Layout Adjustments

* TNO-2249 Remove local mock

* TNO-2249 Mobile updates

* TNO-2249 Logo removal

* TNO-2249 Background update

* TNO-2249 Cleanup
  • Loading branch information
@fbarreta
fbarreta authored Feb 5, 2024
1 parent 939a1de commit 53e3a88
Show file tree
Hide file tree
Showing 9 changed files with 422 additions and 126 deletions.
Binary file added app/subscriber/public/assets/bceid_default_logo.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions app/subscriber/src/css/_variables.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,8 @@
// Subscriber
redHeadingColor: $red-heading-color;
beigeBackgroundColor: $beige-background-color;
primaryBackgroundColor: $primary-background-color;
secondaryBackgroundColor: $secondary-background-color;
darkHeaderColor: $dark-header-color;
itemActiveColor: $item-active-color;
menuItemColor: $menu-item-color;
Expand Down
2 changes: 2 additions & 0 deletions app/subscriber/src/css/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,8 @@ $input-required-border-color: #428bca;
// Subscriber defaults
$red-heading-color: #971d29;
$beige-background-color: #efebdf;
$primary-background-color: #f0eeee;
$secondary-background-color: #d9d9d9;
$dark-header-color: #363434;
$item-active-color: #24b6d4;
$menu-item-color: #43425d;
Expand Down
124 changes: 91 additions & 33 deletions app/subscriber/src/features/login/BrowserLogin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export const BrowserLogin: React.FC<IBrowserLoginProps> = ({ login }) => {
const [, api] = useSystemMessages();
const [systemMessage, setSystemMessage] = React.useState<ISystemMessageModel>();

const [showModal, setShowModal] = React.useState(false);

React.useEffect(() => {
api.findSystemMessage().then((data) => {
if (!!data) setSystemMessage(data);
Expand All @@ -41,60 +43,116 @@ export const BrowserLogin: React.FC<IBrowserLoginProps> = ({ login }) => {
Media Monitoring is a paid service offered through the BC Government that allows
subscribers to see British Columbia’s news at a glance.
</p>
<div className="containing-box">
<b>Key features: </b>
<ul>
<li>Aggregation of newspapers, radio shows, and online articles </li>
<li>Transcription services</li>
<li>BC’s top stories as they break</li>
<li>Articles related to major stories</li>
</ul>
<a href="www.google.ca">Learn more about obtaining a subscription... </a>
<div
className={
'containing-box' +
`${
!(!!systemMessage?.message && systemMessage.isEnabled)
? ' centered-login-box'
: ''
}`
}
>
<Col className="login-box">
<b>If you have a subscription, login here: </b>
<div className="login-content">
<b>Login to your MMI account with your BCeID or IDIR: </b>
<div>
<div className="buttons">
<Show visible={!isLocal}>
<Button className="red" onClick={() => login(isLocal ? 'gcpe-oidc' : 'idir')}>
<Button
className="white idir-logo"
onClick={() => login(isLocal ? 'gcpe-oidc' : 'idir')}
>
IDIR
</Button>
<Button
className="cyan"
className="white bceid-logo"
onClick={() => login(isLocal ? 'gcpe-oidc' : 'bceid-basic')}
>
BCeID
</Button>
></Button>
</Show>
<Show visible={isLocal}>
<Button className="red" onClick={() => login()}>
<Button className="white" onClick={() => login()}>
Local
</Button>
</Show>
</div>
<div onClick={() => login()} className="copyright">
<b>Copyright info:</b>
<p>
This account grants you access to copyrighted material for your own use. It
does not grant you permission to fix, copy, reproduce or archive any of the
material contained within. <br /> <br />
You cannot redistribute this information to anyone without violating your
copyright agreement.
</p>
<br />
<span
className="modalOpen"
onClick={() => {
setShowModal(true);
}}
>
Learn more about obtaining a subscription...
</span>
</div>
</div>
<div className="footer" onClick={() => login()}>
<b>Copyright info:</b>
<p>
This account grants you access to copyrighted material for your own use. It does
not grant you permission to fix, copy, reproduce or archive any of the material
contained within. <br /> <br />
You cannot redistribute this information to anyone without violating your
copyright agreement.
</p>
</div>
</Col>
</div>
</Col>
<Col className="system-message-box">
<div className="system-message-containing-box">
<Show visible={!!systemMessage?.message && systemMessage.isEnabled}>
<p>{parse(systemMessage?.message ?? '')}</p>
<Col className="system-message-box">
<div className="system-message-containing-box">
<p>{parse(systemMessage?.message ?? '')}</p>
</div>
</Col>
</Show>
</div>
</Col>
</Row>
</Col>

<Show visible={showModal}>
<div id="myModal" className="modal">
<div className="modal-content">
<span
className="close"
onClick={() => {
setShowModal(false);
}}
>
&times;
</span>
<div>
<p>
<b>Thank you for your interest in Media Monitoring Insights.</b>
</p>
<p>
<b>Key features:</b>
</p>
<ul>
<li>Aggregation of newspapers, radio shows, and online articles</li>
<li>Transcription services</li>
<li>BC’s top stories as they break</li>
<li>Articles related to major stories</li>
</ul>
<p>
Access to this service is limited to Government of British Columbia staff as per our
agreements with our media suppliers.
</p>
<br />
<p>
<b>
If you are eligible for access, email{' '}
<a href="mailto:Scott.Ryckman@gov.bc.ca">Scott.Ryckman@gov.bc.ca</a> to get set
up.
</b>
</p>
<br />
<p>
Note: <br />
There is a cost recovery charge in excess of $4,500 annually, please ensure that you
have authorization for this purchase prior to emailing.
</p>
</div>
</div>
</div>
</Show>
<img src="/assets/mm_logo.svg" alt="MM Logo" className="mm-logo" />
</styled.BrowserLogin>
);
Expand Down
85 changes: 43 additions & 42 deletions app/subscriber/src/features/login/MobileLogin.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { Button, Col, Row, Show, useKeycloakWrapper } from 'tno-core';

import * as styled from './styled';
Expand All @@ -17,50 +18,49 @@ export const MobileLogin: React.FC<IMobileLoginProps> = ({ login }) => {
const isLocal =
new URL(authority).host.startsWith('localhost') ||
new URL(authority).host.startsWith('host.docker.internal');

return (
<styled.MobileLogin>
<Col className="mobile-view">
<Row className="mobile-title">
<img alt="MMI Logo" src="/assets/MMinsights_logo_black.svg" />
</Row>
<Row>
<p className="top-bar-box">
Media Monitoring is a paid service offered through the BC Government that allows
subscribers to see British Columbia’s news at a glance.
</p>
<div className="app-logo"></div>
</Row>
<Row>
<div className="containing-box">
<b>Key feautres: </b>
<ul>
<li>Aggregation of newspapers, radio shows, and online articles </li>
<li>Transcription services</li>
<li>BC’s top stories as they break</li>
<li>Articles related to major stories</li>
</ul>
<a href="www.google.ca">Learn more about obtaining a subscription... </a>
<Col className="login-box">
<b>If you have a subscription, login here: </b>
<div className="login-content">
<div className="buttons">
<Show visible={!isLocal}>
<Button className="red" onClick={() => login(isLocal ? 'gcpe-oidc' : 'idir')}>
IDIR
</Button>
<Button
className="cyan"
onClick={() => login(isLocal ? 'gcpe-oidc' : 'bceid-basic')}
>
BCeID
</Button>
</Show>
<Show visible={isLocal}>
<Button className="red" onClick={() => login()}>
Local
</Button>
</Show>
<Row className="containing-row">
<Col className="main-box">
<p className="top-bar-box">
Media Monitoring is a paid service offered through the BC Government that allows
subscribers to see British Columbia’s news at a glance.
</p>
<div className="containing-box centered-login-box">
<Col className="login-box">
<b>Login to your MMI account with your BCeID or IDIR: </b>
<div>
<div className="buttons">
<Show visible={!isLocal}>
<Button
className="white idir-logo"
onClick={() => login(isLocal ? 'gcpe-oidc' : 'idir')}
>
IDIR
</Button>
<Button
className="white bceid-logo"
onClick={() => login(isLocal ? 'gcpe-oidc' : 'bceid-basic')}
></Button>
</Show>
<Show visible={isLocal}>
<Button className="white" onClick={() => login()}>
Local
</Button>
</Show>
<br />
<p>
Learn more about obtaining a subscription contacting{' '}
<a href="mailto:Scott.Ryckman@gov.bc.ca">Scott.Ryckman@gov.bc.ca</a>
</p>
</div>
</div>
<Row className="copyright">
<div className="footer" onClick={() => login()}>
<b>Copyright info:</b>
<p>
This account grants you access to copyrighted material for your own use. It does
Expand All @@ -69,12 +69,13 @@ export const MobileLogin: React.FC<IMobileLoginProps> = ({ login }) => {
You cannot redistribute this information to anyone without violating your
copyright agreement.
</p>
</Row>
</div>
</Col>
</div>
</div>
</Col>
</div>
</Col>
</Row>
</Col>
<img src="/assets/mm_logo.svg" alt="MM Logo" className="mm-logo" />
</styled.MobileLogin>
);
};
22 changes: 20 additions & 2 deletions app/subscriber/src/features/login/UnauthenticatedHome.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { useKeycloakWrapper } from 'tno-core';

import { BrowserLogin } from '.';
import { BrowserLogin, MobileLogin } from '.';
import * as styled from './styled';

export interface IUnauthenticatedHomeProps {
Expand Down Expand Up @@ -38,6 +39,8 @@ export interface IUnauthenticatedHomeProps {
export const UnauthenticatedHome: React.FC<IUnauthenticatedHomeProps> = (props) => {
const keycloak = useKeycloakWrapper();

const [isMobile, setIsMobile] = React.useState(false);

const login = (hint?: string) => {
const params = new URLSearchParams(window.location.search);
const redirectTo = params.get('redirectTo');
Expand All @@ -52,9 +55,24 @@ export const UnauthenticatedHome: React.FC<IUnauthenticatedHomeProps> = (props)
keycloak.instance.login({ idpHint: hint, redirectUri: redirect, scope: 'openid' });
};

React.useEffect(() => {
const mobileMediaQuery = window.matchMedia('(max-width: 767px)'); // Adjust the breakpoint as needed

const handleMobileChange = (event: any) => {
setIsMobile(event.matches);
};

mobileMediaQuery.addEventListener('change', handleMobileChange);
setIsMobile(mobileMediaQuery.matches);

return () => {
mobileMediaQuery.removeEventListener('change', handleMobileChange);
};
}, []);

return (
<styled.UnauthenticatedHome>
<BrowserLogin login={login} />
{isMobile ? <MobileLogin login={login} /> : <BrowserLogin login={login} />}
</styled.UnauthenticatedHome>
);
};
Loading

0 comments on commit 53e3a88

Please sign in to comment.