fix(#728): transfer auth
Rakov
2 years ago
parent
0c5a1aac4f
commit
e4cbf54419
@ -1,64 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { facr as platformFacr } from 'config/clients/facr' |
|
||||||
|
|
||||||
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-color: #00257A; |
|
||||||
` |
|
||||||
|
|
||||||
export const facr: ClientConfig = { |
|
||||||
...platformFacr, |
|
||||||
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: #00257A; |
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/facr_auth_logo.png); |
|
||||||
height: 163px; |
|
||||||
width: 213px; |
|
||||||
margin-bottom: 1.82rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 20px; |
|
||||||
width: 130px; |
|
||||||
height: 100px; |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
popupApplyButton: css` |
|
||||||
background-color: #00257A; |
|
||||||
color: ${({ theme }) => theme.colors.white}; |
|
||||||
`,
|
|
||||||
submitButton: css` |
|
||||||
background-color: ${({ theme }) => theme.colors.white}; |
|
||||||
color: #00257A; |
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,67 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { fqtv as platformFqtv } from 'config/clients/fqtv' |
|
||||||
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(0, 13, 47, 0.8), rgba(0, 13, 47, 0.8)),
|
|
||||||
linear-gradient(0deg, #0061DC, #0061DC),
|
|
||||||
no-repeat center center url(/images/fqtv-background.png); |
|
||||||
background-size: 130% 105%; |
|
||||||
background-blend-mode: normal, hard-light, normal;
|
|
||||||
` |
|
||||||
|
|
||||||
export const fqtv: ClientConfig = { |
|
||||||
...platformFqtv, |
|
||||||
background: Background, |
|
||||||
styles: { |
|
||||||
centerBlock: css` |
|
||||||
margin-top: 9.15rem; |
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-top: 107px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
forgotPasswordInput: css` |
|
||||||
border: none; |
|
||||||
`,
|
|
||||||
input: css` |
|
||||||
background-color: transparent; |
|
||||||
:not(:last-of-type) { |
|
||||||
border-color: ${({ theme }) => theme.colors.white}; |
|
||||||
} |
|
||||||
`,
|
|
||||||
inputGroup: css` |
|
||||||
border: 1px solid ${({ theme }) => theme.colors.white}; |
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/fqtv-auth-logo.svg); |
|
||||||
background-position: center; |
|
||||||
height: 142px; |
|
||||||
width: 378px; |
|
||||||
margin-bottom: 1.82rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 15px; |
|
||||||
width: 200px; |
|
||||||
height: 74px; |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
submitButton: css` |
|
||||||
:disabled { |
|
||||||
background: #FFFFFF; |
|
||||||
color: #00244F; |
|
||||||
} |
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
import { ClientIds } from 'config/clients/types' |
|
||||||
|
|
||||||
import { facr } from './facr' |
|
||||||
import { insports } from './insports' |
|
||||||
import { instat } from './instat' |
|
||||||
import { lff } from './lff' |
|
||||||
import { india } from './india' |
|
||||||
import { tunisia } from './tunisia' |
|
||||||
import { fqtv } from './fqtv' |
|
||||||
|
|
||||||
export const clients = { |
|
||||||
[ClientIds.Facr]: facr, |
|
||||||
[ClientIds.Fqtv]: fqtv, |
|
||||||
[ClientIds.Instat]: instat, |
|
||||||
[ClientIds.Lff]: lff, |
|
||||||
[ClientIds.Insports]: insports, |
|
||||||
[ClientIds.India]: india, |
|
||||||
[ClientIds.Tunisia]: tunisia, |
|
||||||
} |
|
||||||
|
|
||||||
const params = new URLSearchParams(window.location.search) |
|
||||||
const clientId = params.get('client_id') as ClientIds |
|
||||||
|
|
||||||
export const client = clients[clientId] || insports |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
import { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { india as platformIndia } from 'config/clients/india' |
|
||||||
import { isMobileDevice } from 'config' |
|
||||||
|
|
||||||
import { Background } from 'features/Background' |
|
||||||
|
|
||||||
import type { ClientConfig } from './types' |
|
||||||
|
|
||||||
export const india: ClientConfig = { |
|
||||||
...platformIndia, |
|
||||||
background: Background, |
|
||||||
styles: { |
|
||||||
centerBlock: css` |
|
||||||
margin-top: 9.15rem; |
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-top: 107px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/insports-logo.svg); |
|
||||||
background-position: center; |
|
||||||
height: 85px; |
|
||||||
width: 275px; |
|
||||||
margin-bottom: 1.82rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 15px; |
|
||||||
width: 165px; |
|
||||||
height: 50px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
width: 92px; |
|
||||||
height: 22px; |
|
||||||
} |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
import { css } from 'styled-components' |
|
||||||
|
|
||||||
import { insports as platformInsports } from 'config/clients/insports' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { Background } from 'features/Background' |
|
||||||
|
|
||||||
import type { ClientConfig } from './types' |
|
||||||
|
|
||||||
export const insports: ClientConfig = { |
|
||||||
...platformInsports, |
|
||||||
background: Background, |
|
||||||
styles: { |
|
||||||
centerBlock: css` |
|
||||||
margin-top: 9.15rem; |
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-top: 107px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/insports-logo.svg); |
|
||||||
background-position: center; |
|
||||||
height: 85px; |
|
||||||
width: 275px; |
|
||||||
margin-bottom: 1.82rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 15px; |
|
||||||
width: 165px; |
|
||||||
height: 50px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
width: 92px; |
|
||||||
height: 22px; |
|
||||||
} |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
import { css } from 'styled-components' |
|
||||||
|
|
||||||
import { instat as platformInstat } from 'config/clients/instat' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { Background } from 'features/Background' |
|
||||||
|
|
||||||
import type { ClientConfig } from './types' |
|
||||||
|
|
||||||
export const instat: ClientConfig = { |
|
||||||
...platformInstat, |
|
||||||
background: Background, |
|
||||||
styles: { |
|
||||||
centerBlock: css` |
|
||||||
margin-top: 9.15rem; |
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-top: 107px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/logo.svg); |
|
||||||
height: 54px; |
|
||||||
width: 234px; |
|
||||||
margin-bottom: 1.82rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 78px; |
|
||||||
width: 207px; |
|
||||||
height: 48px; |
|
||||||
@media screen and (orientation: landscape){ |
|
||||||
width: 92px; |
|
||||||
height: 22px; |
|
||||||
} |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { lff as platformLff } from 'config/clients/lff' |
|
||||||
|
|
||||||
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(18.42deg, #242321 8.36%, #242321 42.61%, #DB1C49 86.2%); |
|
||||||
` |
|
||||||
|
|
||||||
export const lff: ClientConfig = { |
|
||||||
...platformLff, |
|
||||||
background: Background, |
|
||||||
styles: { |
|
||||||
centerBlock: css` |
|
||||||
margin-top: 6.15rem; |
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-top: 60px; |
|
||||||
@media screen and (orientation: landscape) { |
|
||||||
width: 290px; |
|
||||||
margin-top: 5px; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
input: css` |
|
||||||
background-color: transparent; |
|
||||||
:not(:last-of-type) { |
|
||||||
border-color: ${({ theme }) => theme.colors.white50}; |
|
||||||
} |
|
||||||
`,
|
|
||||||
inputGroup: css` |
|
||||||
border: 1px solid ${({ theme }) => theme.colors.white}; |
|
||||||
`,
|
|
||||||
logo: css` |
|
||||||
background-image: url(/images/lff_auth_logo.svg); |
|
||||||
height: 220px; |
|
||||||
width: 220px; |
|
||||||
margin-bottom: 1rem; |
|
||||||
|
|
||||||
${isMobileDevice ? css` |
|
||||||
margin-bottom: 15px; |
|
||||||
width: 74px; |
|
||||||
height: 74px; |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
submitButton: css` |
|
||||||
background-color: #DF1C4A; |
|
||||||
color: white; |
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,70 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { tunisia as platformTunis } from 'config/clients/tunisia' |
|
||||||
|
|
||||||
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 tunisia: 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; |
|
||||||
} |
|
||||||
` : ''};
|
|
||||||
`,
|
|
||||||
forgotPasswordInput: css` |
|
||||||
border: none; |
|
||||||
`,
|
|
||||||
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` |
|
||||||
background-image: url(/images/tunis_auth_logo_mobile.svg); |
|
||||||
margin-bottom: 20px; |
|
||||||
width: 102px; |
|
||||||
height: 75px; |
|
||||||
` : ''}
|
|
||||||
`,
|
|
||||||
popupApplyButton: css` |
|
||||||
background-color: #0E8F84; |
|
||||||
color: ${({ theme }) => theme.colors.white}; |
|
||||||
`,
|
|
||||||
submitButton: css` |
|
||||||
background-color: ${({ theme }) => theme.colors.white}; |
|
||||||
color: #0B2E4D; |
|
||||||
`,
|
|
||||||
}, |
|
||||||
} |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
import type { ReactNode, FC } from 'react' |
|
||||||
import { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { ClientIds, ClientNames } from 'config/clients/types' |
|
||||||
|
|
||||||
type StyledCss = ReturnType<typeof css> |
|
||||||
|
|
||||||
export type ClientConfig = { |
|
||||||
auth: { |
|
||||||
clientId: ClientIds, |
|
||||||
}, |
|
||||||
background: FC<{ children: ReactNode }>, |
|
||||||
defaultLanguage: string, |
|
||||||
description: string, |
|
||||||
host?: string, |
|
||||||
isHideSelectLanguages?: boolean, |
|
||||||
name: ClientNames, |
|
||||||
privacyLink: string, |
|
||||||
styles: { |
|
||||||
centerBlock?: StyledCss, |
|
||||||
forgotPasswordInput?: StyledCss, |
|
||||||
input?: StyledCss, |
|
||||||
inputGroup?: StyledCss, |
|
||||||
loader?: StyledCss, |
|
||||||
logo: StyledCss, |
|
||||||
popupApplyButton?: StyledCss, |
|
||||||
submitButton?: StyledCss, |
|
||||||
}, |
|
||||||
termsLink: string, |
|
||||||
title: string, |
|
||||||
} |
|
||||||
@ -1,6 +0,0 @@ |
|||||||
export const PAGES = { |
|
||||||
change_password: '/change_password', |
|
||||||
login: '/authorize', |
|
||||||
oauth: '/oauth', |
|
||||||
registration: '/registration', |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import { ENV, isProduction } from 'config/env' |
|
||||||
|
|
||||||
import { readSelectedApi } from 'helpers/selectedApi' |
|
||||||
|
|
||||||
const APIS = { |
|
||||||
preproduction: 'https://api.auth.insports.tv', |
|
||||||
production: 'https://api.auth.insports.tv', |
|
||||||
staging: 'https://api.auth.test.insports.tv', |
|
||||||
} |
|
||||||
|
|
||||||
const env = isProduction ? ENV : readSelectedApi() ?? ENV |
|
||||||
|
|
||||||
export const API_ROOT = APIS[env] |
|
||||||
|
|
||||||
export const getApiUrl = (path: string) => ( |
|
||||||
`${API_ROOT}${path}${window.location.search}` |
|
||||||
) |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
import { BrowserRouter } from 'react-router-dom' |
|
||||||
|
|
||||||
import { getLanguageUrlParam } from 'helpers/languageUrlParam' |
|
||||||
import { |
|
||||||
setClientTitleAndDescription, |
|
||||||
setClientIcons, |
|
||||||
} from 'helpers/setClientHeads' |
|
||||||
|
|
||||||
import { GlobalStyles } from 'features/GlobalStyles' |
|
||||||
import { LexicsStore } from 'features/LexicsStore' |
|
||||||
import { Theme } from 'features/Theme' |
|
||||||
|
|
||||||
import { App } from './components/App' |
|
||||||
import { client } from './config/clients' |
|
||||||
|
|
||||||
setClientTitleAndDescription(client.title, client.description) |
|
||||||
setClientIcons(client.name) |
|
||||||
|
|
||||||
const Background = client.background |
|
||||||
const initialLanguage = getLanguageUrlParam() |
|
||||||
|
|
||||||
const AuthServiceApp = () => ( |
|
||||||
<BrowserRouter> |
|
||||||
<Theme> |
|
||||||
<GlobalStyles /> |
|
||||||
<LexicsStore initialLanguage={initialLanguage}> |
|
||||||
<Background> |
|
||||||
<App /> |
|
||||||
</Background> |
|
||||||
</LexicsStore> |
|
||||||
</Theme> |
|
||||||
</BrowserRouter> |
|
||||||
) |
|
||||||
|
|
||||||
export default AuthServiceApp |
|
||||||
@ -1,15 +1,28 @@ |
|||||||
import { ReactNode } from 'react' |
import { ReactNode } from 'react' |
||||||
|
|
||||||
|
import { useAuthStore } from 'features/AuthStore' |
||||||
|
|
||||||
|
import { client } from 'config' |
||||||
import { GradientBackground, ImageBackground } from './styled' |
import { GradientBackground, ImageBackground } from './styled' |
||||||
|
|
||||||
type Props = { |
type Props = { |
||||||
children: ReactNode, |
children: ReactNode, |
||||||
} |
} |
||||||
|
const ClientBackground = client.background |
||||||
|
|
||||||
|
export const Background = ({ children }: Props) => { |
||||||
|
const { isAuthPage } = useAuthStore() |
||||||
|
|
||||||
export const Background = ({ children }: Props) => ( |
return isAuthPage && ClientBackground |
||||||
<ImageBackground> |
? ( |
||||||
<GradientBackground> |
<ClientBackground> |
||||||
{children} |
{children} |
||||||
</GradientBackground> |
</ClientBackground> |
||||||
</ImageBackground> |
) : ( |
||||||
) |
<ImageBackground> |
||||||
|
<GradientBackground> |
||||||
|
{children} |
||||||
|
</GradientBackground> |
||||||
|
</ImageBackground> |
||||||
|
) |
||||||
|
} |
||||||
|
|||||||
Loading…
Reference in new issue