Skip to content

Commit ff66d03

Browse files
alexjs-devalexjs-dev
committed
add socials, fix heroku
1 parent bc68e0b commit ff66d03

File tree

15 files changed

+159
-68
lines changed

15 files changed

+159
-68
lines changed

‎components/AuthForm/AuthForm.js

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -122,31 +122,23 @@ const AuthForm = ({ type }) => {
122122
}
123123
}
124124

125-
const Content = () => {
126-
return (
127-
<>
128-
<h4>{t(title[type])}</h4>
129-
<Fields />
130-
</>
131-
)
132-
}
133125
switch (type) {
134126
case types.SIGNIN:
135127
return (
136-
<SignInForm onSubmit={onSubmit}>
137-
<Content />
128+
<SignInForm onSubmit={onSubmit} title={t(title[type])}>
129+
<Fields />
138130
</SignInForm>
139131
)
140132
case types.SIGNUP:
141133
return (
142-
<SignupForm onSubmit={onSubmit}>
143-
<Content />
134+
<SignupForm onSubmit={onSubmit} title={t(title[type])}>
135+
<Fields />
144136
</SignupForm>
145137
)
146138
case types.FORGOT:
147139
return (
148-
<ForgotForm onSubmit={onSubmit}>
149-
<Content />
140+
<ForgotForm onSubmit={onSubmit} title={t(title[type])}>
141+
<Fields />
150142
</ForgotForm>
151143
)
152144
default:

‎components/AuthForm/AuthForm.module.scss

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,6 @@
3434
margin: spacing(2) 0;
3535
}
3636

37-
.google {
37+
.social {
3838
margin: spacing(2) 0;
39-
span {
40-
color: $color-white;
41-
font-size: $font-size-p;
42-
line-height: $line-height-p;
43-
font-family: $font-family;
44-
}
4539
}

‎components/AuthForm/parts/ForgotForm.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { Button, Spacer } from '~components'
77

88
const formName = 'forgotPasswordForm'
99

10-
const Component = ({ children, onSubmit, handleSubmit }) => {
10+
const Component = ({ children, onSubmit, handleSubmit, title }) => {
1111
const { t } = useTranslation()
1212

1313
return (
1414
<form className={styles.container}>
15+
{title && <h4>{title}</h4>}
1516
{children}
1617
<Button fluid baseType="submit" onClick={handleSubmit(onSubmit)}>
1718
{t('button.reset')}

‎components/AuthForm/parts/SignInForm.js

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
11
import React from 'react'
22
import { reduxForm } from 'redux-form'
3-
import GoogleButton from 'react-google-button'
43
import { useSelector } from 'react-redux'
54
import { useTranslation } from 'react-i18next'
65
import PropTypes from 'prop-types'
76
import { authLoadingSelector } from '~store/auth/selectors'
7+
import { FcGoogle } from 'react-icons/fc'
88
import styles from '../AuthForm.module.scss'
9-
import { BaseButton, Button, Spacer } from '~components'
9+
import {
10+
BaseButton,
11+
Button,
12+
Spacer,
13+
GoogleButton,
14+
FacebookButton,
15+
} from '~components'
1016

1117
const formName = 'signInForm'
1218

13-
const Component = ({ handleSubmit, onSubmit, children }) => {
19+
const Component = ({ handleSubmit, onSubmit, children, title }) => {
1420
const { t } = useTranslation()
1521
const loading = useSelector(authLoadingSelector)
1622
return (
1723
<form className={styles.container}>
24+
{title && <h4>{title}</h4>}
25+
<div className={styles.social}>
26+
<GoogleButton title="Sign in with Google" href="google" />
27+
</div>
28+
<div className={styles.social}>
29+
<FacebookButton title="Sign in with Facebook" href="facebook" />
30+
</div>
1831
{children}
1932
<BaseButton
2033
className={styles.link}
@@ -31,14 +44,6 @@ const Component = ({ handleSubmit, onSubmit, children }) => {
3144
>
3245
{t('button.signIn')}
3346
</Button>
34-
<div className={styles.google}>
35-
<GoogleButton
36-
type="dark"
37-
onClick={() => {
38-
console.log('Google button clicked')
39-
}}
40-
/>
41-
</div>
4247
<Spacer className={styles.spacer} />
4348
<Button
4449
fluid

‎components/AuthForm/parts/SignUpForm.js

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
import React from 'react'
22
import { reduxForm } from 'redux-form'
3-
import GoogleButton from 'react-google-button'
43
import { useTranslation } from 'react-i18next'
54
import PropTypes from 'prop-types'
65
import styles from '../AuthForm.module.scss'
7-
import { Button, Spacer } from '~components'
6+
import { Button, Spacer, GoogleButton, FacebookButton } from '~components'
87

98
const formName = 'signUpForm'
109

11-
const Component = ({ onSubmit, children, handleSubmit }) => {
10+
const Component = ({ onSubmit, children, handleSubmit, title }) => {
1211
const { t } = useTranslation()
1312

1413
return (
1514
<form className={styles.container}>
16-
{children}
15+
{title && <h4>{title}</h4>}
16+
{/* {children}
1717
<Button fluid baseType="submit" onClick={handleSubmit(onSubmit)}>
1818
{t('button.signUp')}
19-
</Button>
20-
<div className={styles.google}>
19+
</Button> */}
20+
<div className={styles.social}>
2121
<GoogleButton
22-
type="dark"
23-
label="Sign up with Google"
24-
onClick={() => {
25-
console.log('Google button clicked')
26-
}}
22+
title="Sign up with Google"
23+
href="https://forautobackend.herokuapp.com/oauth/google"
24+
/>
25+
</div>
26+
27+
<div className={styles.social}>
28+
<FacebookButton
29+
title="Sign up with Facebook"
30+
href="https://forautobackend.herokuapp.com/oauth/facebook"
2731
/>
2832
</div>
2933
<Spacer className={styles.spacer} />

‎components/Social/FacebookButton.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import { FaFacebookF } from 'react-icons/fa'
3+
import styles from './Social.module.scss'
4+
import { BaseButton } from '../'
5+
6+
type Props = {
7+
title: string
8+
href: string
9+
}
10+
11+
const FacebookButton: React.FunctionComponent<Props> = ({ title, href }) => {
12+
return (
13+
/* @ts-ignore */
14+
<BaseButton className={styles.facebookButton} isInternalLink href={href}>
15+
<FaFacebookF fontSize={24} color="white" />
16+
<span>{title}</span>
17+
</BaseButton>
18+
)
19+
}
20+
21+
export default FacebookButton

‎components/Social/GoogleButton.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import { FcGoogle } from 'react-icons/fc'
3+
import styles from './Social.module.scss'
4+
import { BaseButton } from '../'
5+
6+
type Props = {
7+
title: string
8+
href: string
9+
}
10+
11+
const GoogleButton: React.FunctionComponent<Props> = ({ title, href }) => {
12+
return (
13+
/* @ts-ignore */
14+
<BaseButton className={styles.googleButton} isInternalLink href={href}>
15+
<FcGoogle fontSize={24} />
16+
<span>{title}</span>
17+
</BaseButton>
18+
)
19+
}
20+
21+
export default GoogleButton

‎components/Social/Social.module.scss

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import 'vars.scss';
2+
3+
.googleButton {
4+
background: rgb(66, 133, 244);
5+
width: 100%;
6+
height: 50px;
7+
border: none;
8+
border-radius: $border-radius-small;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
position: relative;
13+
padding: spacing(0.5) 0 spacing(0.5) spacing(6);
14+
&::after {
15+
position: absolute;
16+
left: 1px;
17+
top: 1px;
18+
z-index: 1;
19+
width: 48px;
20+
height: 48px;
21+
content: '';
22+
background: $color-white;
23+
}
24+
span {
25+
color: $color-white;
26+
}
27+
svg {
28+
position: absolute;
29+
left: 0;
30+
top: 0;
31+
transform: translate(14px, 50%);
32+
z-index: 2;
33+
}
34+
}
35+
36+
.facebookButton {
37+
background: #3b5998;
38+
width: 100%;
39+
height: 50px;
40+
border: none;
41+
border-radius: $border-radius-small;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
position: relative;
46+
padding: spacing(0.5) 0 spacing(0.5) spacing(6);
47+
span {
48+
color: $color-white;
49+
}
50+
svg {
51+
position: absolute;
52+
left: 0;
53+
top: 0;
54+
transform: translate(14px, 50%);
55+
z-index: 2;
56+
}
57+
}

‎components/Social/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as GoogleButton } from './GoogleButton'
2+
export { default as FacebookButton } from './FacebookButton'

‎components/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
InfiniteBullets,
2424
InfinitePagination,
2525
} from './Pagination'
26+
import { GoogleButton, FacebookButton } from './Social'
2627
import { BaseButton, Button, ExpandButton } from './Button'
2728
import { VehicleDetail, VehicleAdvDetails } from './Vehicle'
2829
import {
@@ -40,6 +41,8 @@ export {
4041
Modal,
4142
Avatar,
4243
VehicleCard,
44+
GoogleButton,
45+
FacebookButton,
4346
AdBanner,
4447
ItemDropDown,
4548
ImageUpload,

0 commit comments

Comments
 (0)