Compare commits
6 Commits
| Author | SHA1 | Date |
|---|---|---|
Rakov
|
8896df9f1f | 2 years ago |
|
Rakov
|
10bca448dc | 2 years ago |
|
Rakov
|
7a2423568a | 2 years ago |
|
Rakov
|
ccb265cb2e | 2 years ago |
|
Rakov
|
3152372c39 | 2 years ago |
|
Rakov
|
4e43b9aea8 | 2 years ago |
@ -0,0 +1,64 @@ |
|||||||
|
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; |
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
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; |
||||||
|
} |
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
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 |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
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; |
||||||
|
} |
||||||
|
` : ''}
|
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
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; |
||||||
|
} |
||||||
|
` : ''}
|
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
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; |
||||||
|
} |
||||||
|
` : ''}
|
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
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; |
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
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; |
||||||
|
`,
|
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
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, |
||||||
|
} |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
export const PAGES = { |
||||||
|
change_password: '/change_password', |
||||||
|
login: '/authorize', |
||||||
|
oauth: '/oauth', |
||||||
|
registration: '/registration', |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
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}` |
||||||
|
) |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
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,28 +1,15 @@ |
|||||||
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() |
|
||||||
|
|
||||||
return isAuthPage && ClientBackground |
export const Background = ({ children }: Props) => ( |
||||||
? ( |
<ImageBackground> |
||||||
<ClientBackground> |
<GradientBackground> |
||||||
{children} |
{children} |
||||||
</ClientBackground> |
</GradientBackground> |
||||||
) : ( |
</ImageBackground> |
||||||
<ImageBackground> |
) |
||||||
<GradientBackground> |
|
||||||
{children} |
|
||||||
</GradientBackground> |
|
||||||
</ImageBackground> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|||||||
@ -1,51 +0,0 @@ |
|||||||
import { AUTH_SERVICE } from 'config' |
|
||||||
import { ClientIds } from 'config/clients/types' |
|
||||||
|
|
||||||
export type TokenFailedResponse = { |
|
||||||
error?: { |
|
||||||
code: number, |
|
||||||
message: string, |
|
||||||
}, |
|
||||||
ok: false, |
|
||||||
} |
|
||||||
|
|
||||||
type TokenResponse = { |
|
||||||
access_token: string, |
|
||||||
id_token: string, |
|
||||||
refresh_token: string, |
|
||||||
} |
|
||||||
|
|
||||||
type TokenProps = { |
|
||||||
client_id: ClientIds, |
|
||||||
email?: 'string', |
|
||||||
grant_type?: 'password' | 'refresh_token', |
|
||||||
id_token?: 'string', |
|
||||||
password?: 'string', |
|
||||||
refresh_token: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const getCredentials = async ({ |
|
||||||
client_id, |
|
||||||
grant_type = 'refresh_token', |
|
||||||
refresh_token, |
|
||||||
}: TokenProps): Promise<TokenResponse> => { |
|
||||||
const url = new URL(`${AUTH_SERVICE}/token`) |
|
||||||
|
|
||||||
const credetials = await fetch(url, { |
|
||||||
body: JSON.stringify({ |
|
||||||
client_id, |
|
||||||
grant_type, |
|
||||||
refresh_token, |
|
||||||
}), |
|
||||||
headers: { |
|
||||||
'Content-Type': 'application/json', |
|
||||||
}, |
|
||||||
method: 'POST', |
|
||||||
}) |
|
||||||
|
|
||||||
const body: TokenResponse | TokenFailedResponse = await credetials.json() |
|
||||||
|
|
||||||
if ('ok' in body) return Promise.reject(body.error) |
|
||||||
|
|
||||||
return Promise.resolve(body) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue