Skip to content

Commit c4e0d10

Browse files
cwadrupldijjitriongull
authored andcommitted
[PLEASE REVIEW] #17 Auto submit token (#21)
* fix(general): update code for eslint conformance changes: - .babelrc - fix quote types to make it conformant JSON - .eslintrc - update linter to not show errors where errors shouldn't be shown - .gitignore - begin ignoring the public directory--rely on built code - ComposeForm/* - beginnings of splitting up FormElements.jsx (will be addressed later) - PrefixedLink/index.jsx - add component to automatically prefix links in order to avoid having to do it manually - gatsby-node.js, ComposePage/index.jsx, Editor/index.jsx, FormElements.jsx, GitHubForm.jsx, gitHubHelper.js, localStorageHelper.js, ReadNext/index.jsx, SiteLinks/index.jsx, SiteNav/index.jsx, SitePage/index.jsx, SitePost/index.jsx, SiteSidebar/index.jsx - update files to eslint compliance - change repetetive field/element creation into data transformed the way you want - public/* - remove from git (built) issues addressed: - #14 no breaking changes--UI works exactly as originally implemented * feat(auth): add firebase auth to site changes: - firebaseHelper.js - add helper to manage auth - index.jsx - create module file to import and export necessary components - initializeFirebase.js - add file to create the firebase connection - gitHubHelpers.js - import auth into file to test if it wiill work issues addressed: - #15 no breaking changes; auth not yet fully integrated into the project * feat(login-button): require login on form changes: - firebaseHelper.js - assign token, user, and credential to auth object - add to local storage - add getAuthObj function to get and deserialize authObj - ComposePage/index.jsx - import newly created login button and add logic to change whether it shows the action form or if it shows the login button - ComposeFormElements/index.jsx - add new login button component to exports - login-button.css - add styles to make sure that it looks non-gaggy - LoginButton.jsx - create form where the login button will live and call submit function when login is successful - package.json - ensure that the browser opens to localhost (so firebase auth will work) issues addressed: - #16 no breaking changes--only adds annoyance to the form, not convenience so far * feat(github): remove token from fields and autofill changes: - add helper functions to deal with username - firebase auth helper uses authObj instead of exporting individual members - clean up slightly the form elements - add username prepopulation to the redux form (dosn't work at the moment) - automatically grab the token when submitting the form issues addressed: - #17 no breaking changes
1 parent f83ee18 commit c4e0d10

Some content is hidden

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

48 files changed

+1130
-1588
lines changed

.babelrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"presets": ['react', 'es2015', 'stage-0'],
3-
"plugins": ['add-module-exports']
2+
"presets": ["react", "es2015", "stage-0"],
3+
"plugins": ["add-module-exports"]
44
}

.eslintrc

+24-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,38 @@
11
{
22
"extends": "eslint-config-airbnb",
33
"rules": {
4-
"indent": [2, 2, {"SwitchCase": 1}],
4+
"indent": [1, 4, {"SwitchCase": 1}],
55
"no-console": [0],
66
"func-names": [0],
7-
"semi": [2, "never"],
8-
"no-extra-semi": [2],
9-
"space-before-function-paren": [2, "always"],
7+
"semi": [0],
8+
"no-extra-semi": [1],
9+
"space-before-function-paren": [0],
1010
"no-else-return": [0],
1111
"space-infix-ops": [0],
1212
"react/prefer-es6-class": [0],
1313
"react/prefer-stateless-function": [0],
1414
"import/no-unresolved": [0],
1515
"global-require": [0],
16+
"import/no-extraneous-dependencies": [0],
17+
"no-unused-vars": [1],
18+
"max-len": [1],
19+
"jsx-quotes": [1],
20+
"jsx-a11y/img-has-alt": [1],
21+
"jsx-a11y/img-redundant-alt": [1],
22+
"comma-dangle": [1],
23+
"react/jsx-closing-bracket-location": [0],
24+
"eqeqeq": [0],
25+
"react/jsx-indent": [1],
26+
"quotes": [1],
27+
"react/jsx-curly-spacing": [1],
28+
"no-use-before-define": [0]
1629
},
17-
"globals": {
18-
"__PREFIX_LINKS__": true,
30+
"parserOptions": {
31+
"ecmaFeatures": {
32+
"experimentalObjectRestSpread": true
33+
}
1934
},
35+
"globals": {
36+
"__PREFIX_LINKS__": true
37+
}
2038
}

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@ pages/.manifest
66
.idea
77
gatsby-starter-lumen.iml
88
.vscode/
9+
public
910

1011
npm-debug.log

.vscode/launch.json

-18
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,6 @@
44
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
55
"version": "0.2.0",
66
"configurations": [
7-
{
8-
"type": "node",
9-
"request": "launch",
10-
"name": "Develop",
11-
"program": "${workspaceRoot}/node_modules/gatsby/bin/gatsby.js",
12-
"cwd": "${workspaceRoot}",
13-
"args": ["develop"],
14-
"sourceMaps": true
15-
},
167
{
178
"type": "node",
189
"request": "launch",
@@ -22,15 +13,6 @@
2213
"args": ["build"],
2314
"sourceMaps": true
2415
},
25-
{
26-
"type": "node",
27-
"request": "launch",
28-
"name": "Serve Public",
29-
"program": "${workspaceRoot}/node_modules/gatsby/bin/gatsby.js",
30-
"cwd": "${workspaceRoot}",
31-
"args": ["serve-build"],
32-
"sourceMaps": true
33-
},
3416
{
3517
"type": "node",
3618
"request": "attach",

components/Auth/firebaseHelper.js

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import firebase from 'firebase';
2+
3+
const localStorageAuthKey = 'dashcommunityBlogAuth';
4+
5+
let provider;
6+
let authObj;
7+
8+
let strategy = 'popup';
9+
10+
function gitHubRedirectLogin() {
11+
firebase.auth()
12+
.getRedirectResult()
13+
.then(handleSigninSuccess)
14+
.catch(handleSignInErr);
15+
16+
provider = new firebase.auth.GithubAuthProvider();
17+
provider.addScope('repo');
18+
firebase.auth().signInWithRedirect(provider);
19+
}
20+
21+
function gitHubPopupLogin() {
22+
provider = new firebase.auth.GithubAuthProvider();
23+
provider.addScope('repo');
24+
return firebase.auth()
25+
.signInWithPopup(provider)
26+
.then(handleSigninSuccess)
27+
.catch(handleSignInErr);
28+
}
29+
30+
// function createUser(email, password) {
31+
// return firebase.auth().createUserWithEmailAndPassword(
32+
// email,
33+
// password
34+
// )
35+
// .then(result => {
36+
// user = result;
37+
// return user;
38+
// })
39+
// .catch(handleSignInErr);
40+
// }
41+
42+
// function emailLogin(email, password) {
43+
// credential = firebase.auth.EmailAuthProvider.credential(
44+
// email,
45+
// password
46+
// );
47+
// }
48+
49+
function getUser() {
50+
if (!authObj) {
51+
authObj = getAuthObj();
52+
}
53+
if (authObj && authObj.user) {
54+
return authObj.user;
55+
}
56+
57+
return false;
58+
}
59+
60+
function getToken() {
61+
if (!authObj) {
62+
authObj = getAuthObj();
63+
}
64+
if (authObj && authObj.token) {
65+
return authObj.token;
66+
}
67+
68+
return false;
69+
}
70+
71+
function setUsername(username) {
72+
if (!authObj) {
73+
authObj = getAuthObj();
74+
}
75+
if (authObj && authObj.user) {
76+
authObj.user.username = username;
77+
return authObj.user.username;
78+
}
79+
80+
return false;
81+
}
82+
83+
function getUsername() {
84+
if (!authObj) {
85+
authObj = getAuthObj();
86+
}
87+
if (authObj && authObj.user) {
88+
return authObj.user.username;
89+
}
90+
91+
return '';
92+
}
93+
94+
function handleSigninSuccess(result) {
95+
if (!authObj) {
96+
authObj = getAuthObj();
97+
}
98+
if (result.credential) {
99+
authObj.token = result.credential.accessToken;
100+
authObj.credential = result.credential;
101+
}
102+
103+
// fetch('github.com', )
104+
105+
authObj.user = result.user;
106+
authObj.provider = provider;
107+
108+
window.localStorage.setItem(localStorageAuthKey, JSON.stringify(authObj));
109+
return authObj;
110+
}
111+
112+
function handleSignInErr(err) {
113+
const errorCode = err.code;
114+
const errorMessage = err.message;
115+
const email = err.email;
116+
if (!authObj) {
117+
authObj = getAuthObj();
118+
}
119+
authObj.credential = err.credential;
120+
121+
if (errorCode == 'auth/account-exists-with-different-credentials') {
122+
console.warn('You already signed up with a different ' +
123+
'authentication provider for that email');
124+
}
125+
console.error(err);
126+
}
127+
128+
function changeLoginStrategy(newStrategy) {
129+
strategy = newStrategy;
130+
}
131+
132+
function getAuthObj() {
133+
if (authObj) {
134+
return authObj;
135+
}
136+
let obj;
137+
const authString = localStorage.getItem(localStorageAuthKey);
138+
if (authString) {
139+
obj = JSON.parse(authString);
140+
} else {
141+
obj = {};
142+
}
143+
return obj;
144+
}
145+
146+
function signOut() {
147+
localStorage.removeItem(localStorageAuthKey);
148+
}
149+
150+
function getLoginStrategy() {
151+
return strategy;
152+
}
153+
154+
export {
155+
gitHubRedirectLogin,
156+
gitHubPopupLogin,
157+
// emailLogin,
158+
getUser,
159+
getToken,
160+
getAuthObj,
161+
getLoginStrategy,
162+
setUsername,
163+
getUsername,
164+
};

components/Auth/index.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import './initializeFirebase.js';
2+
3+
import * as auth from './firebaseHelper';
4+
5+
export {
6+
auth,
7+
}

components/Auth/initializeFirebase.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import firebase from 'firebase';
2+
3+
const config = {
4+
apiKey: 'AIzaSyDayBqMwkiAQ76WHCfGWS7ZHqJYro_Ofw0',
5+
databaseURL: 'https://dashcommunity-blog.firebaseio.com',
6+
authDomain: 'dashcommunity-blog.firebaseapp.com',
7+
projectId: 'dashcommunity-blog',
8+
storageBucket: 'dashcommunity-blog.appspot.com',
9+
messagingSenderId: '451048266119',
10+
};
11+
12+
firebase.initializeApp(config);

components/ComposePage/index.jsx

+46-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,52 @@
1-
import React from 'react'
2-
import DocumentTitle from 'react-document-title'
3-
import { RouteHandler, Link } from 'react-router'
4-
import SiteSidebar from '../SiteSidebar'
5-
import { config } from 'config'
6-
import { rawDefaultEditorContent } from '../Editor/defaultEditorContent'
7-
import { ContentState, convertToRaw } from 'draft-js'
8-
import GitHubForm from '../Forms/GitHubForm'
9-
import MyEditor from '../Editor'
1+
import React from 'react';
2+
import SiteSidebar from '../SiteSidebar';
3+
import { rawDefaultEditorContent } from '../Editor/defaultEditorContent';
4+
import GitHubForm from '../Forms/GitHubForm';
5+
import MyEditor from '../Editor';
6+
import { LoginButton } from '../Forms/ComposeFormElements';
7+
import { auth } from '../Auth';
108

119
export default class ComposePage extends React.Component {
12-
constructor () {
13-
super()
14-
this.state = {editorContent: rawDefaultEditorContent};
15-
}
10+
constructor () {
11+
super();
12+
this.state = {
13+
editorContent: rawDefaultEditorContent,
14+
isLoggedIn: false,
15+
};
16+
}
1617

17-
render () {
18-
const passEditorContent = (editorContent) => {// https://www.youtube.com/watch?v=5Xew--ycx0o&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=4#t=165.980087
19-
console.log('editorContent in ComposePage:', editorContent)
20-
this.setState({editorContent: editorContent})
18+
componentDidMount() {
19+
this.setState({ isLoggedIn: !!auth.getUser() });
2120
}
22-
return (
23-
<div>
24-
<SiteSidebar {...this.props}/>
25-
<div className='content'>
26-
<div className='main'>
27-
<div className='main-inner'>
28-
<MyEditor editorContent={this.state.editorContent}/>
29-
<GitHubForm passContent={passEditorContent.bind(this)}/>
21+
22+
render () {
23+
const passEditorContent = (editorContent) => { // https://www.youtube.com/watch?v=5Xew--ycx0o&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=4#t=165.980087
24+
console.log('editorContent in ComposePage:', editorContent);
25+
this.setState({ editorContent });
26+
};
27+
const login = () => {
28+
this.setState({
29+
isLoggedIn: true,
30+
});
31+
};
32+
let form;
33+
if (this.state.isLoggedIn) {
34+
form = <GitHubForm passContent={passEditorContent} />
35+
} else {
36+
form = <LoginButton onSubmit={login} />
37+
}
38+
return (
39+
<div>
40+
<SiteSidebar {...this.props} />
41+
<div className="content">
42+
<div className="main">
43+
<div className="main-inner">
44+
<MyEditor editorContent={this.state.editorContent} />
45+
{ form }
46+
</div>
47+
</div>
3048
</div>
3149
</div>
32-
</div>
33-
</div>
34-
);
35-
}
36-
}
50+
);
51+
}
52+
}

0 commit comments

Comments
 (0)