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 { useAuthStore } from 'features/AuthStore' |
||||
|
||||
import { client } from 'config' |
||||
import { GradientBackground, ImageBackground } from './styled' |
||||
|
||||
type Props = { |
||||
children: ReactNode, |
||||
} |
||||
const ClientBackground = client.background |
||||
|
||||
export const Background = ({ children }: Props) => { |
||||
const { isAuthPage } = useAuthStore() |
||||
|
||||
export const Background = ({ children }: Props) => ( |
||||
return isAuthPage && ClientBackground |
||||
? ( |
||||
<ClientBackground> |
||||
{children} |
||||
</ClientBackground> |
||||
) : ( |
||||
<ImageBackground> |
||||
<GradientBackground> |
||||
{children} |
||||
</GradientBackground> |
||||
</ImageBackground> |
||||
) |
||||
) |
||||
} |
||||
|
||||
Loading…
Reference in new issue