s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

keycloak login theme

Browse Source
This commit is contained in:
mattyl006 2022-12-02 13:54:07 +01:00
parent ed6aa86f85
commit b490104ef0
10 changed files with 46 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

@ -6,10 +6,6 @@ import {BrowserRouter, Route, Routes} from 'react-router-dom';
import NavBar from './components/navigation/NavBar'; import NavBar from './components/navigation/NavBar';
import {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals'; import {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals';
import Challenge from './pages/Challenge'; import Challenge from './pages/Challenge';
import Register from './pages/auth/Register';
import Login from './pages/auth/Login';
import LoginWithEmail from './pages/auth/LoginWithEmail';
import RegisterWithEmail from './pages/auth/RegisterWithEmail';
import KeyCloakService from './services/KeyCloakService'; import KeyCloakService from './services/KeyCloakService';
import React from 'react'; import React from 'react';
import LoggedBar from './components/navigation/LoggedBar'; import LoggedBar from './components/navigation/LoggedBar';
@ -80,10 +76,6 @@ const App = () => {
loggedBarHoverFalse={loggedBarHoverFalse} loggedBarHoverFalse={loggedBarHoverFalse}
username={KeyCloakService.getUsername()}/> : ''} username={KeyCloakService.getUsername()}/> : ''}
<Routes> <Routes>
<Route path='/register-email' element={<RegisterWithEmail/>}/>
<Route path='/login-email' element={<LoginWithEmail/>}/>
<Route path='/login' element={<Login/>}/>
<Route path='/register' element={<Register/>}/>
<Route path={`${CHALLENGE_PAGE}/:challengeId`} <Route path={`${CHALLENGE_PAGE}/:challengeId`}
element={<Challenge popUpMessageHandler={popUpMessageHandler}/>}/> element={<Challenge popUpMessageHandler={popUpMessageHandler}/>}/>
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/> <Route path={CHALLENGES_PAGE} element={<Challenges/>}/>

45
src/keycloak-themes/login-styles.css Normal file
View File

@ -0,0 +1,45 @@
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&family=Ubuntu:wght@300;400;500&display=swap');
body {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #343434;
background: #1B998B none;
}
#kc-login {
background-color: #1B998B;
}
#kc-header-wrapper {
display: none;
}
#kc-page-title {
font-family: 'Kanit', sans-serif;
}
#kc-login {
border-radius: 4px;
}
.login-pf body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #1B998B none;
}
.card-pf {
width: 100%;
max-width: 600px;
background-color: #FCFCFC;
}
.login-pf-page {
display: flex;
justify-content: center;
}

1
src/keycloak-themes/register-styles.css Normal file
View File

@ -0,0 +1 @@
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Roboto:wght@300;400;500&family=Ubuntu:wght@300;400;500&display=swap');

50
src/pages/auth/Login.js
View File

@ -1,50 +0,0 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import AuthHeader from '../../components/auth/AuthHeader';
import {Body, Medium} from '../../utils/fonts';
import {Link} from 'react-router-dom';
import AuthOption from '../../components/auth/AuthOption';
import githubIco from '../../assets/github_ico.svg';
import emailIco from '../../assets/email_ico.svg';
import googleIco from '../../assets/google_ico.svg';
import MainContainerStyle from './styles/MainContainerStyle';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import LinkStyle from './styles/LinkStyle';
const Login = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={false}/>
<OptionsContainerStyle>
<FlexColumn gap='24px'>
<AuthOption icon={googleIco}>
Sign in with&nbsp;
<Medium>
Google
</Medium>
</AuthOption>
<AuthOption icon={githubIco}>
Sign in with&nbsp;
<Medium>
Github
</Medium>
</AuthOption>
<AuthOption to='/login-email' icon={emailIco}>
Sign in with&nbsp;
<Medium>
Email
</Medium>
</AuthOption>
</FlexColumn>
<Body>
No account?&nbsp;
<LinkStyle as={Link} to='/register'>
Create one.
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default Login;

47
src/pages/auth/LoginWithEmail.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import AuthHeader from '../../components/auth/AuthHeader';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import MainContainerStyle from './styles/MainContainerStyle';
import AuthInput from '../../components/auth/AuthInput';
import Button from '../../components/generic/Button';
import {FlexRow} from '../../utils/containers';
import LinkStyle from './styles/LinkStyle';
import {Link} from 'react-router-dom';
import {Body} from '../../utils/fonts';
import theme from '../../utils/theme';
import Media from 'react-media';
const LoginWithEmail = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={false}/>
<OptionsContainerStyle>
<AuthInput label='Email / Username'/>
<AuthInput label='Password'/>
<Media query={theme.mobile}>
<FlexRow width='100%' alignmentX='flex-end'>
<Button>
Sign in
</Button>
</FlexRow>
</Media>
<Media query={theme.desktop}>
<Button width='112px' height='36px'>
Sign in
</Button>
</Media>
</OptionsContainerStyle>
<Body margin='32px 0 0 0'>
Forgot&nbsp;
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
Username
</LinkStyle>&nbsp;/&nbsp;
<LinkStyle as={Link} to='#' color={theme.colors.dark}>
Password
</LinkStyle>?
</Body>
</MainContainerStyle>
);
};
export default LoginWithEmail;

50
src/pages/auth/Register.js
View File

@ -1,50 +0,0 @@
import React from 'react';
import {FlexColumn} from '../../utils/containers';
import AuthHeader from '../../components/auth/AuthHeader';
import {Body, Medium} from '../../utils/fonts';
import {Link} from 'react-router-dom';
import AuthOption from '../../components/auth/AuthOption';
import githubIco from '../../assets/github_ico.svg';
import emailIco from '../../assets/email_ico.svg';
import googleIco from '../../assets/google_ico.svg';
import MainContainerStyle from './styles/MainContainerStyle';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import LinkStyle from './styles/LinkStyle';
const Register = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={true}/>
<OptionsContainerStyle>
<FlexColumn gap='24px'>
<AuthOption icon={googleIco}>
Register with&nbsp;
<Medium>
Google
</Medium>
</AuthOption>
<AuthOption icon={githubIco}>
Register with&nbsp;
<Medium>
Github
</Medium>
</AuthOption>
<AuthOption to='/register-email' icon={emailIco}>
Register with&nbsp;
<Medium>
Email
</Medium>
</AuthOption>
</FlexColumn>
<Body>
Have an account?&nbsp;
<LinkStyle as={Link} to='/login'>
Sign in.
</LinkStyle>
</Body>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default Register;

37
src/pages/auth/RegisterWithEmail.js
View File

@ -1,37 +0,0 @@
import React from 'react';
import AuthHeader from '../../components/auth/AuthHeader';
import OptionsContainerStyle from './styles/OptionsContainerStyle';
import AuthInput from '../../components/auth/AuthInput';
import Media from 'react-media';
import theme from '../../utils/theme';
import {FlexRow} from '../../utils/containers';
import Button from '../../components/generic/Button';
import MainContainerStyle from './styles/MainContainerStyle';
const RegisterWithEmail = () => {
return (
<MainContainerStyle as='main'>
<AuthHeader register={true}/>
<OptionsContainerStyle>
<AuthInput label='Email address'/>
<AuthInput label='Username'/>
<AuthInput label='Type password'/>
<AuthInput label='Repeat password'/>
<Media query={theme.mobile}>
<FlexRow width='100%' alignmentX='flex-end'>
<Button>
Register
</Button>
</FlexRow>
</Media>
<Media query={theme.desktop}>
<Button width='112px' height='36px'>
Register
</Button>
</Media>
</OptionsContainerStyle>
</MainContainerStyle>
);
};
export default RegisterWithEmail;

18
src/pages/auth/styles/LinkStyle.js
View File

@ -1,18 +0,0 @@
import styled from 'styled-components';
import {Medium} from '../../../utils/fonts';
const LinkStyle = styled(Medium)`
cursor: pointer;
color: ${({theme, color}) => color ? color : theme.colors.green};
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
color: ${({theme}) => theme.colors.dark};
}
`;
export default LinkStyle;

13
src/pages/auth/styles/MainContainerStyle.js
View File

@ -1,13 +0,0 @@
import styled from 'styled-components';
import {FlexColumn} from '../../../utils/containers';
const MainContainerStyle = styled(FlexColumn)`
width: 100%;
min-height: calc(100vh - 48px);
@media (min-width: ${({theme}) => theme.overMobile}) {
min-height: calc(100vh - 72px);
}
`;
export default MainContainerStyle;

18
src/pages/auth/styles/OptionsContainerStyle.js
View File

@ -1,18 +0,0 @@
import styled from 'styled-components';
import {FlexColumn} from '../../../utils/containers';
const OptionsContainerStyle = styled(FlexColumn)`
width: 260px;
border: 1px solid ${({theme}) => theme.colors.dark03};
gap: 32px;
padding: 32px;
box-shadow: ${({theme}) => theme.shadow};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 400px;
min-height: 382px;
padding: 48px;
}
`;
export default OptionsContainerStyle;