style(#188): add tunis config to auth

keep-around/44e70269ba4e4c3ea8c912424bbb3a0e479f07f4
Andrei Dekterev 3 years ago committed by Gitea
parent 998b7176de
commit 2d445cbc02
  1. 1
      package.json
  2. 29
      public/images/tunis-logo.svg
  3. 36
      public/images/tunis_auth_logo.svg
  4. 3
      src/config/clients/index.tsx
  5. 57
      src/config/clients/tunis.tsx
  6. 2
      src/config/clients/types.tsx
  7. 3
      src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx
  8. 8
      src/features/AuthServiceApp/components/RegisterPopup/index.tsx
  9. 23
      src/features/AuthServiceApp/components/RegisterPopup/styled.tsx
  10. 2
      src/features/AuthServiceApp/config/clients/index.tsx
  11. 67
      src/features/AuthServiceApp/config/clients/tunis.tsx
  12. 1
      src/features/AuthServiceApp/config/clients/types.tsx
  13. 3
      src/features/AuthStore/helpers.tsx
  14. 2
      src/features/CompanyInfo/index.tsx
  15. 2
      src/react-app-env.d.ts

@ -17,6 +17,7 @@
"facr": "REACT_APP_CLIENT=facr react-scripts start", "facr": "REACT_APP_CLIENT=facr react-scripts start",
"lff": "REACT_APP_CLIENT=lff react-scripts start", "lff": "REACT_APP_CLIENT=lff react-scripts start",
"india": "REACT_APP_CLIENT=india react-scripts start", "india": "REACT_APP_CLIENT=india react-scripts start",
"tunis": "REACT_APP_CLIENT=tunis react-scripts start",
"insports": "REACT_APP_CLIENT=insports react-scripts start" "insports": "REACT_APP_CLIENT=insports react-scripts start"
}, },
"dependencies": { "dependencies": {

@ -0,0 +1,29 @@
<svg width="144" height="31" viewBox="0 0 144 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5_10489)">
<path d="M134.436 0.0644531H61.5517C56.2735 0.0644531 51.9946 4.3433 51.9946 9.62152V21.1889C51.9946 26.4671 56.2735 30.7459 61.5517 30.7459H134.436C139.715 30.7459 143.994 26.4671 143.994 21.1889V9.62152C143.994 4.3433 139.715 0.0644531 134.436 0.0644531Z" fill="#0B2E4D"/>
<path d="M65.5072 0H9.84982C4.40992 0 0 4.40992 0 9.84982V20.8967C0 26.3366 4.40992 30.7465 9.84982 30.7465H65.5072C70.9471 30.7465 75.357 26.3366 75.357 20.8967V9.84982C75.357 4.40992 70.9471 0 65.5072 0Z" fill="url(#paint0_linear_5_10489)"/>
<path d="M90.2752 16.9092C90.2752 20.8777 88.4145 22.8685 84.6932 22.8685C81.2711 22.8685 79.5601 21.1185 79.5601 17.6118C79.5601 16.675 79.6967 15.6926 79.9699 14.6582L83.5026 14.0271C83.1513 15.1656 82.9756 16.2521 82.9756 17.2865C82.9756 19.2318 83.6197 20.2011 84.9144 20.2011C85.604 20.2011 86.0919 19.9864 86.3847 19.5506C86.6904 19.0886 86.8401 18.2884 86.8401 17.1434V10.2667H90.2687V16.9092H90.2752ZM83.3855 12.7715C83.0667 12.4527 82.9106 12.0689 82.9106 11.62C82.9106 11.171 83.0667 10.7872 83.3855 10.4684C83.6978 10.1561 84.0751 10 84.5305 10C84.9859 10 85.3633 10.1561 85.682 10.4684C86.0008 10.7872 86.157 11.171 86.157 11.62C86.157 12.0689 86.0008 12.4527 85.682 12.7715C85.3633 13.0838 84.9794 13.2399 84.5305 13.2399C84.0816 13.2399 83.6978 13.0838 83.3855 12.7715Z" fill="white"/>
<path d="M92.5195 6.03809H95.9351V18.7245H92.5195V6.03809Z" fill="white"/>
<path d="M97.939 23.0445L98.1146 20.3186C98.9409 20.4747 99.8452 20.5528 100.828 20.5528C102.578 20.5528 103.456 19.9477 103.456 18.7311V18.7116H102.63C99.3442 18.7116 97.6982 17.3389 97.6982 14.5934C97.6982 13.2858 98.0886 12.2188 98.8758 11.3926C99.7736 10.4557 101.075 9.9873 102.779 9.9873C104.347 9.9873 105.681 10.1955 106.767 10.6119V16.0507H108.205V18.7116H106.748C106.657 20.1364 106.104 21.2294 105.095 21.9971C104.041 22.8038 102.532 23.2071 100.561 23.2071C99.6955 23.2071 98.8172 23.1486 97.9325 23.0315L97.939 23.0445ZM103.456 12.8694C103.189 12.7263 102.857 12.6612 102.454 12.6612C102.018 12.6612 101.68 12.8238 101.426 13.1556C101.198 13.4614 101.081 13.8388 101.081 14.3007C101.081 15.4782 101.699 16.0637 102.935 16.0637H103.456V12.8759V12.8694Z" fill="white"/>
<path d="M107.938 16.0635H111.699V18.7244H107.938V16.0635Z" fill="white"/>
<path d="M111.334 16.0635H115.095V18.7244H111.334V16.0635Z" fill="white"/>
<path d="M114.737 16.0635H118.497V18.7244H114.737V16.0635Z" fill="white"/>
<path d="M118.133 16.0635H121.894V18.7244H118.133V16.0635Z" fill="white"/>
<path d="M121.536 16.0633H124.593V10.2666H128.009V18.7242H121.536V16.0633ZM124.171 22.5561C123.871 22.8684 123.5 23.0245 123.065 23.0245C122.629 23.0245 122.271 22.8684 121.978 22.5561C121.685 22.2438 121.536 21.8665 121.536 21.4241C121.536 20.9817 121.679 20.6174 121.978 20.3116C122.277 19.9993 122.642 19.8432 123.065 19.8432C123.487 19.8432 123.871 19.9993 124.171 20.3116C124.463 20.6239 124.613 20.9947 124.613 21.4241C124.613 21.8535 124.463 22.2438 124.171 22.5561ZM127.625 22.5561C127.332 22.8684 126.968 23.0245 126.539 23.0245C126.109 23.0245 125.738 22.8684 125.439 22.5561C125.14 22.2438 124.99 21.8665 124.99 21.4241C124.99 20.9817 125.14 20.6174 125.439 20.3116C125.738 19.9993 126.103 19.8432 126.539 19.8432C126.975 19.8432 127.332 19.9993 127.625 20.3116C127.918 20.6239 128.068 20.9947 128.068 21.4241C128.068 21.8535 127.918 22.2438 127.625 22.5561Z" fill="white"/>
<path d="M129.674 16.0636H134.372C134.28 15.1592 133.91 14.4046 133.266 13.7865C132.589 13.1359 131.678 12.7196 130.553 12.5309L131.346 9.71387C135.595 10.5661 137.716 13.0318 137.716 17.111V18.7244H129.674V16.0636Z" fill="white"/>
<path d="M15.3145 22.2177C14.0849 23.2717 12.53 23.7986 10.6433 23.7986C9.11443 23.7986 7.81326 23.662 6.72679 23.3953L7.10413 19.2445C8.28819 19.7455 9.49827 19.9992 10.7344 19.9992C11.7493 19.9992 12.2567 19.6284 12.2567 18.8802C12.2567 18.3858 11.951 17.9824 11.3329 17.6766C11.1247 17.5725 10.8124 17.4359 10.3961 17.2733C9.8626 17.0846 9.49827 16.948 9.3096 16.8634C7.33834 16.0307 6.35596 14.5864 6.35596 12.524C6.35596 10.9366 6.93498 9.68098 8.08651 8.75715C9.26406 7.82682 10.8775 7.3584 12.9399 7.3584C13.9743 7.3584 14.9437 7.46249 15.848 7.66417L15.4836 11.431C14.5923 11.1188 13.688 10.9626 12.7837 10.9626C11.6322 10.9626 11.0532 11.3204 11.0532 12.0296C11.0532 12.4525 11.372 12.8168 12.003 13.1421C12.2112 13.2397 12.53 13.3828 12.9724 13.565L14.0914 14.0204C16.1212 14.9442 17.1361 16.369 17.1361 18.3012C17.1361 19.8756 16.5311 21.1768 15.3145 22.2177Z" fill="white"/>
<path d="M28.4238 17.0324C27.2267 18.2229 25.5482 18.815 23.3883 18.815C23.1671 18.815 22.9719 18.8085 22.8028 18.7889V23.4796H18.4438V7.67049C20.0052 7.58591 21.7033 7.54688 23.5249 7.54688C27.8903 7.54688 30.0698 9.29694 30.0698 12.7971C30.0698 14.5276 29.5233 15.9394 28.4238 17.0324ZM23.4143 11.1186C23.2451 11.1186 23.0435 11.1251 22.8093 11.1446V15.1522C23.0305 15.1977 23.2907 15.2238 23.59 15.2238C24.9171 15.2238 25.5807 14.5341 25.5807 13.1614C25.5807 11.7887 24.8586 11.1251 23.4208 11.1251L23.4143 11.1186Z" fill="white"/>
<path d="M43.8817 21.4829C42.3659 23.0378 40.4662 23.8185 38.1956 23.8185C35.7559 23.8185 33.9018 23.1158 32.6331 21.7041C31.4035 20.3378 30.792 18.3991 30.792 15.8944C30.792 13.3896 31.5792 11.2817 33.1471 9.66828C34.663 8.1199 36.5562 7.3457 38.8202 7.3457C41.2599 7.3457 43.1205 8.04833 44.3957 9.4601C45.6253 10.8198 46.2368 12.752 46.2368 15.2633C46.2368 17.7745 45.4496 19.8889 43.8817 21.4894V21.4829ZM38.5469 11.3208C37.5841 11.3208 36.8294 11.6786 36.2699 12.3942C35.7104 13.1294 35.4372 14.1508 35.4372 15.4715C35.4372 18.3536 36.4521 19.7979 38.4819 19.7979C39.4447 19.7979 40.1994 19.4465 40.7459 18.7439C41.3119 18.0218 41.5917 17.0004 41.5917 15.6797C41.5917 12.7716 40.5768 11.3208 38.5469 11.3208Z" fill="white"/>
<path d="M55.1305 23.4862L52.2028 17.722H51.9946V23.4862H47.6357V7.67049C48.8653 7.58591 50.6675 7.54688 53.0486 7.54688C57.2383 7.54688 59.3332 9.19285 59.3332 12.4913C59.3332 13.4542 59.0795 14.3325 58.5785 15.1262C58.0581 15.9394 57.3685 16.5119 56.4967 16.8307C56.9651 17.5333 57.3424 18.1449 57.6417 18.6588L60.4327 23.4862H55.137H55.1305ZM52.8209 11.1381C52.4631 11.1381 52.1898 11.1511 51.9946 11.1836V14.5797C52.2158 14.6122 52.4566 14.6252 52.7168 14.6252C54.07 14.6252 54.7401 14.0202 54.7401 12.8166C54.7401 11.6976 54.1025 11.1316 52.8209 11.1316V11.1381Z" fill="white"/>
<path d="M67.719 11.4186V23.4869H63.3601V11.4186H59.938V7.67773H71.141V11.4186H67.719Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_5_10489" x1="0" y1="15.3733" x2="75.357" y2="15.3733" gradientUnits="userSpaceOnUse">
<stop stop-color="#005D6B"/>
<stop offset="1" stop-color="#1DB9AB"/>
</linearGradient>
<clipPath id="clip0_5_10489">
<rect width="144" height="30.7465" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB

@ -5,6 +5,7 @@ import { instat } from './instat'
import { lff } from './lff' import { lff } from './lff'
import { insports } from './insports' import { insports } from './insports'
import { india } from './india' import { india } from './india'
import { tunis } from './tunis'
export const currentClient = process.env.REACT_APP_CLIENT || 'insports' export const currentClient = process.env.REACT_APP_CLIENT || 'insports'
@ -13,6 +14,7 @@ export const isInSportsClient = currentClient === 'insports'
export const isInstatClient = currentClient === 'instat' export const isInstatClient = currentClient === 'instat'
export const isFacrClient = currentClient === 'facr' export const isFacrClient = currentClient === 'facr'
export const isIndiaClient = currentClient === 'india' export const isIndiaClient = currentClient === 'india'
export const isTunisClient = currentClient === 'tunis'
const clients = { const clients = {
facr, facr,
@ -20,6 +22,7 @@ const clients = {
insports, insports,
instat, instat,
lff, lff,
tunis,
} }
export const client: ClientConfig = clients[currentClient] export const client: ClientConfig = clients[currentClient]

@ -0,0 +1,57 @@
import { css } from 'styled-components/macro'
import {
ClientConfig,
ClientIds,
ClientNames,
} from './types'
const randomHash = () => (
(Math.random() ** Math.random()) * 9999999999999999
)
export const tunis: ClientConfig = {
auth: {
clientId: ClientIds.Tunis,
metaDataUrlParams: `?hash=${randomHash()}`,
},
defaultLanguage: 'fr',
description: 'Live sports streaming platform. All matches playing under the auspices of Czech Republic FA. Access to full matches, various player playlists, and highlights. Free access in the Czech Republic. Available across all devices',
disabledPreferences: false,
name: ClientNames.Tunis,
privacyLink: '/privacy-policy-and-statement',
showSearch: false,
styles: {
background: '',
homePageHeader: css`
background: radial-gradient(
160.34% 257.27% at -7.45% 162.22%,
#2AB7AA 3.27%,
#02505C 43.69%, #0B2E4D 100%);
`,
logo: 'tunis-logo.svg',
logoHeight: 6.3,
logoLeft: 1.1,
logoTop: 1.74,
logoWidth: 8.25,
matchLogoHeight: 3.4,
matchLogoTopMargin: 0.9,
matchLogoWidth: 4.5,
matchPageMobileHeaderLogo: css`
width: 35px;
height: 25px;
top: 2px;
`,
mobileHeaderLogo: css`
width: 48px;
height: 37px;
`,
userAccountLogo: css`
width: 4.56rem;
height: 3.488rem;
`,
},
termsLink: '/terms-and-conditions?client_id=facr-ott-web',
title: 'FACR.TV - The home of Czech football streaming',
userAccountLinksDisabled: true,
}

@ -10,6 +10,7 @@ export enum ClientIds {
Insports = 'insports-ott-web', Insports = 'insports-ott-web',
Instat = 'ott-web', Instat = 'ott-web',
Lff = 'lff-ott-web', Lff = 'lff-ott-web',
Tunis = 'tunis-ott-web',
} }
export enum ClientNames { export enum ClientNames {
@ -18,6 +19,7 @@ export enum ClientNames {
Insports = 'insports', Insports = 'insports',
Instat = 'instat', Instat = 'instat',
Lff = 'lff', Lff = 'lff',
Tunis = 'tunis',
} }
export type ClientConfig = { export type ClientConfig = {

@ -11,6 +11,8 @@ import {
HeaderTitle, HeaderTitle,
} from 'features/AuthServiceApp/components/RegisterPopup/styled' } from 'features/AuthServiceApp/components/RegisterPopup/styled'
import { client } from '../../config/clients/index'
export const Modal = styled(BaseModal)` export const Modal = styled(BaseModal)`
${ModalWindow} { ${ModalWindow} {
min-height: 220px; min-height: 220px;
@ -59,6 +61,7 @@ export const ScApplyButton = styled(ApplyButton)`
font-size: 14px; font-size: 14px;
` `
: ''}; : ''};
${client.styles.popupApplyButton}
` `
export const ScLink = styled.a` export const ScLink = styled.a`

@ -25,11 +25,6 @@ export const RegisterPopup = (props: Props) => {
isModalOpen, isModalOpen,
} = props } = props
// const handleNewConfirmation = () => {
// // TODO дописать логику для отправки доп. письма, может понадобится, когда допишут бэк
// // console.log('send new confirmation')
// }
return ( return (
<Modal isOpen={isModalOpen} withCloseButton={false}> <Modal isOpen={isModalOpen} withCloseButton={false}>
<Wrapper> <Wrapper>
@ -53,9 +48,6 @@ export const RegisterPopup = (props: Props) => {
</Body> </Body>
<Footer> <Footer>
<ApplyButton onClick={() => handleModalClose()}>Ok</ApplyButton> <ApplyButton onClick={() => handleModalClose()}>Ok</ApplyButton>
{/* <SendConfirmationButton onClick={handleNewConfirmation}>
<T9n t='send_new_email' />
</SendConfirmationButton> */}
</Footer> </Footer>
</Wrapper> </Wrapper>
</Modal> </Modal>

@ -7,7 +7,9 @@ import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal' import { Modal as BaseModal } from 'features/Modal'
import { Header as BaseHeader } from 'features/PopupComponents' import { Header as BaseHeader } from 'features/PopupComponents'
import { ButtonSolid, ButtonOutline } from 'features/Common' import { ButtonSolid } from 'features/Common'
import { client } from '../../config/clients'
export const Modal = styled(BaseModal)` export const Modal = styled(BaseModal)`
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
@ -139,26 +141,9 @@ export const ApplyButton = styled(ButtonSolid)`
} }
` `
: ''}; : ''};
${client.styles.popupApplyButton}
` `
export const SendConfirmationButton = styled(ButtonOutline)`
width: 100%;
height: 50px;
border-radius: 5px;
font-weight: 500;
font-size: 20px;
${isMobileDevice
? css`
@media ${devices.mobile}{
width: 100%;
}
@media (orientation: landscape){
width: 290px;
}
`
: ''};
`
export const Text = styled.span` export const Text = styled.span`
margin-bottom: 20px; margin-bottom: 20px;
` `

@ -5,6 +5,7 @@ import { insports } from './insports'
import { instat } from './instat' import { instat } from './instat'
import { lff } from './lff' import { lff } from './lff'
import { india } from './india' import { india } from './india'
import { tunis } from './tunis'
const clients = { const clients = {
[ClientIds.Facr]: facr, [ClientIds.Facr]: facr,
@ -12,6 +13,7 @@ const clients = {
[ClientIds.Lff]: lff, [ClientIds.Lff]: lff,
[ClientIds.Insports]: insports, [ClientIds.Insports]: insports,
[ClientIds.India]: india, [ClientIds.India]: india,
[ClientIds.Tunis]: tunis,
} }
const params = new URLSearchParams(window.location.search) const params = new URLSearchParams(window.location.search)

@ -0,0 +1,67 @@
import styled, { css } from 'styled-components/macro'
import { tunis as platformTunis } from 'config/clients/tunis'
import { isMobileDevice } from 'config/userAgent'
import type { ClientConfig } from './types'
const Background = styled.div`
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background: linear-gradient(0deg, rgba(2, 46, 48, 0.3),
rgba(2, 46, 48, 0.3)),
radial-gradient(152.89% 271.81% at 0% 96.71%, #2AB7AA 3.27%, #02505C 43.69%, #0B2E4D 100%);
`
export const tunis: ClientConfig = {
...platformTunis,
background: Background,
styles: {
centerBlock: css`
margin-top: 9.15rem;
${isMobileDevice ? css`
margin-top: 107px;
@media screen and (orientation: landscape) {
width: 290px;
margin: auto;
}
` : ''};
`,
input: css`
background-color: transparent;
:not(:last-of-type) {
border-color: ${({ theme }) => theme.colors.white};
}
`,
inputGroup: css`
border: 1px solid ${({ theme }) => theme.colors.white};
`,
loader: css`
color: #0B2E4D;
`,
logo: css`
background-image: url(/images/tunis_auth_logo.svg);
width: 200px;
height: 178px;
margin-bottom: 1.82rem;
${isMobileDevice ? css`
margin-bottom: 20px;
width: 130px;
height: 100px;
` : ''}
`,
popupApplyButton: css`
background-color: #0E8F84;
color: ${({ theme }) => theme.colors.white};
`,
popupLoader: '#FFFFFF',
submitButton: css`
background-color: ${({ theme }) => theme.colors.white};
color: #0B2E4D;
`,
},
}

@ -12,6 +12,7 @@ export type ClientConfig = {
background: FC<{ children: ReactNode }>, background: FC<{ children: ReactNode }>,
defaultLanguage: string, defaultLanguage: string,
description: string, description: string,
isHideSelectLanguages?: boolean,
name: ClientNames, name: ClientNames,
privacyLink: string, privacyLink: string,
styles: { styles: {

@ -25,6 +25,8 @@ export const getClientNameByRedirectUri = () => {
return 'lff.instat' return 'lff.instat'
case ClientNames.India: case ClientNames.India:
return 'india.insports' return 'india.insports'
case ClientNames.Tunis:
return ClientNames.Tunis
case ClientNames.Facr: case ClientNames.Facr:
return ClientNames.Facr return ClientNames.Facr
case ClientNames.Instat: case ClientNames.Instat:
@ -42,6 +44,7 @@ const redirectUrl = () => {
|| client.name === 'lff' || client.name === 'lff'
|| client.name === 'facr' || client.name === 'facr'
|| client.name === 'india' || client.name === 'india'
|| client.name === 'tunis'
): ):
return `${window.origin}/redirect` return `${window.origin}/redirect`
case (ENV === 'staging' || ENV === 'preproduction'): case (ENV === 'staging' || ENV === 'preproduction'):

@ -39,6 +39,8 @@ export const CompanyInfo = ({
</CompanyInfoText> </CompanyInfoText>
</Fragment> </Fragment>
) )
case ClientNames.Tunis:
return ''
case ClientNames.Lff: case ClientNames.Lff:
return ( return (
<Fragment> <Fragment>

@ -3,7 +3,7 @@
declare namespace NodeJS { declare namespace NodeJS {
export interface ProcessEnv { export interface ProcessEnv {
REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india', REACT_APP_CLIENT: 'instat' | 'facr' | 'lff' | 'insports' | 'india' | 'tunis',
REACT_APP_ENV: 'production' | 'preproduction' | 'staging', REACT_APP_ENV: 'production' | 'preproduction' | 'staging',
REACT_APP_STAGE: 'staging' | 'test-a' | 'test-b' | 'test-c' | 'test-d' | 'test-e' | 'test-f' | 'test-g' | 'test-h' | 'test-i' | 'test-j' | 'test', REACT_APP_STAGE: 'staging' | 'test-a' | 'test-b' | 'test-c' | 'test-d' | 'test-e' | 'test-f' | 'test-g' | 'test-h' | 'test-i' | 'test-j' | 'test',
REACT_APP_TYPE: 'auth-service' | 'ott', REACT_APP_TYPE: 'auth-service' | 'ott',

Loading…
Cancel
Save