Skip to content

Commit e67e93b

Browse files
authored
Added example (#18)
Added example
2 parents 89696db + 18bf4ba commit e67e93b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+876
-2
lines changed

README.md

Lines changed: 4 additions & 2 deletions
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Lines changed: 14 additions & 0 deletions
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module '*.svg';
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "react-netlify-identity-example",
3+
"version": "1.0.0",
4+
"author": "Lewis Llobera <[email protected]>",
5+
"license": "MIT",
6+
"dependencies": {
7+
"react": "^16.10.1",
8+
"react-dom": "^16.10.1",
9+
"react-netlify-identity": "^0.1.9",
10+
"react-router-dom": "^5.1.2"
11+
},
12+
"devDependencies": {
13+
"@types/react": "^16.9.4",
14+
"@types/react-dom": "^16.9.1",
15+
"@types/react-router-dom": "^5.1.0",
16+
"styled-components": "^4.4.0",
17+
"typescript": "^3.6.2"
18+
}
19+
}
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
3+
import {
4+
IdentityContextProvider,
5+
useIdentityContext,
6+
} from 'react-netlify-identity';
7+
8+
import { GlobalStyles } from './components';
9+
import { CreateAccount, Home, LogIn, Welcome } from './views';
10+
11+
interface Props {
12+
component: React.FunctionComponent;
13+
exact?: boolean;
14+
path: string;
15+
}
16+
17+
const PublicRoute: React.FunctionComponent<Props> = (props: Props) => {
18+
const { isLoggedIn } = useIdentityContext();
19+
return isLoggedIn ? <Redirect to="/home" /> : <Route {...props} />;
20+
};
21+
22+
const PrivateRoute: React.FunctionComponent<Props> = (props: Props) => {
23+
const { isLoggedIn } = useIdentityContext();
24+
return isLoggedIn ? <Route {...props} /> : <Redirect to="/welcome" />;
25+
};
26+
27+
export const App: React.FunctionComponent = () => {
28+
const url = 'https://react-netlify-identity-example.netlify.com';
29+
30+
return (
31+
<>
32+
<GlobalStyles />
33+
<IdentityContextProvider url={url}>
34+
<BrowserRouter>
35+
<Switch>
36+
<PublicRoute exact path="/" component={Welcome} />
37+
<PublicRoute path="/welcome" component={Welcome} />
38+
<PublicRoute path="/createaccount" component={CreateAccount} />
39+
<PublicRoute path="/login" component={LogIn} />
40+
<PrivateRoute path="/home" component={Home} />
41+
</Switch>
42+
</BrowserRouter>
43+
</IdentityContextProvider>
44+
</>
45+
);
46+
};
Lines changed: 50 additions & 0 deletions
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import googleLogo from './googleLogo.svg';
2+
3+
export { googleLogo };
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styled from 'styled-components';
2+
3+
export const AuthOption = styled.div`
4+
align-items: center;
5+
display: flex;
6+
flex-direction: column;
7+
margin: 0 auto 10vh auto;
8+
width: 100%;
9+
`;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { AuthOption } from './AuthOption.styles';
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import styled from 'styled-components';
2+
3+
export const AuthText = styled.p`
4+
border-bottom: 1px solid lightgray;
5+
display: block;
6+
font-weight: 700;
7+
line-height: 1.4;
8+
margin-bottom: 3vh;
9+
text-align: center;
10+
width: 100%;
11+
`;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { AuthText } from './AuthText.styles';
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import styled, { keyframes } from 'styled-components';
2+
3+
import { BREAKPOINT } from '../../constants/constants';
4+
5+
const animation = keyframes`
6+
from {
7+
transform: scale(1);
8+
}
9+
to {
10+
transform: scale(0.9);
11+
}
12+
`;
13+
14+
interface Props {
15+
secondary?: boolean;
16+
}
17+
18+
export const Button = styled.button`
19+
align-items: center;
20+
background-color: ${(props: Props): string =>
21+
props.secondary ? 'transparent' : 'var(--color-accent)'};
22+
border-radius: var(--radius-l);
23+
color: var(--color-dark);
24+
display: flex;
25+
font-weight: 700;
26+
height: 52px;
27+
justify-content: center;
28+
margin: 0 auto;
29+
transition: 0.5s;
30+
width: 300px;
31+
32+
&:disabled {
33+
cursor: not-allowed;
34+
opacity: 0.5;
35+
}
36+
37+
:active {
38+
animation: ${animation} 0.3s cubic-bezier(0.19, 1, 0.22, 1);
39+
}
40+
41+
@media (max-width: ${BREAKPOINT}px) {
42+
width: 280px;
43+
}
44+
`;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Button } from './Button.styles';
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styled from 'styled-components';
2+
3+
import { Button } from '../../components';
4+
5+
export const Logo = styled.img`
6+
margin-right: 24px;
7+
`;
8+
9+
export const StyledButton = styled(Button)`
10+
background-color: #4285f4;
11+
background-image: none;
12+
color: #ffffff;
13+
`;
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { useIdentityContext } from 'react-netlify-identity';
3+
4+
import { Logo, StyledButton } from './ButtonGoogle.styles';
5+
import { googleLogo } from '../../assets';
6+
7+
interface Props {
8+
children: string;
9+
}
10+
11+
export const ButtonGoogle: React.FunctionComponent<Props> = (props: Props) => {
12+
const { loginProvider } = useIdentityContext();
13+
14+
const logInWithGoogle = (): void => {
15+
loginProvider('google');
16+
};
17+
18+
return (
19+
<StyledButton onClick={logInWithGoogle}>
20+
<Logo src={googleLogo} />
21+
{props.children}
22+
</StyledButton>
23+
);
24+
};
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { ButtonGoogle } from './ButtonGoogle';
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import styled from 'styled-components';
2+
3+
import { PAGE_WIDTH } from '../../constants/constants';
4+
5+
interface Props {
6+
between?: boolean;
7+
paddingBottom?: string;
8+
partial?: boolean;
9+
row?: boolean;
10+
}
11+
12+
export const Container = styled.div`
13+
align-items: center;
14+
display: flex;
15+
flex-direction: ${(props: Props): string => (props.row ? 'row' : 'column')};
16+
justify-content: ${(props: Props): string =>
17+
props.between ? 'space-between' : 'center'};
18+
height: ${(props: Props): string => (props.partial ? '80vh' : '100%')};
19+
margin-left: auto;
20+
margin-right: auto;
21+
max-width: ${PAGE_WIDTH}px;
22+
padding-bottom: ${(props: Props): string => {
23+
switch (props.paddingBottom) {
24+
case 'large':
25+
return '200px';
26+
case 'medium':
27+
return '120px';
28+
default:
29+
return 'auto';
30+
}
31+
}};
32+
padding-left: var(--padding);
33+
padding-right: var(--padding);
34+
width: 100%;
35+
`;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Container } from './Container.styles';
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styled from 'styled-components';
2+
3+
import { BREAKPOINT } from '../../constants/constants';
4+
5+
interface Props {
6+
narrow?: boolean;
7+
}
8+
9+
export const Form = styled.form`
10+
backdrop-filter: blur(2px);
11+
background-color: var(--color-background-translucent);
12+
display: flex;
13+
flex-direction: column;
14+
justify-content: center;
15+
width: ${(props: Props): string => (props.narrow ? '60%' : '100%')};
16+
17+
@media (max-width: ${BREAKPOINT}px) {
18+
width: 100%;
19+
}
20+
`;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Form } from './Form.styles';

0 commit comments

Comments
 (0)