Skip to content

Commit a893536

Browse files
pmhuapmhua
authored
Merge pull request #172 from oslabs-beta/master
ReacType 8.0 Launch Ready
2 parents 499898b + 5b7a602 commit a893536

32 files changed

+1235
-412
lines changed

‎app/electron/main.js

+149-149
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ app.on('ready', createWindow);
204204

205205
// Quit when all windows are closed.
206206
app.on('window-all-closed', () => {
207+
win.webContents.executeJavaScript('window.localStorage.clear();');
207208
app.quit();
208209
});
209210

@@ -256,8 +257,8 @@ app.on('web-contents-created', (event, contents) => {
256257
'https://www.facebook.com',
257258
'https://www.smashingmagazine.com',
258259
'https://www.html5rocks.com',
260+
'app://rse/'
259261
];
260-
261262
// Log and prevent the app from redirecting to a new page
262263
if (
263264
!validOrigins.includes(parsedUrl.origin)
@@ -360,153 +361,152 @@ if (isDev) {
360361
}
361362

362363
// // for github oauth login in production, since cookies are not accessible through document.cookie on local filesystem, we need electron to grab the cookie that is set from oauth, this listens for an set cookie event from the renderer process then sends back the cookie
363-
// ipcMain.on('set_cookie', event => {
364-
// session.defaultSession.cookies
365-
// .get({ url: serverUrl })
366-
// .then(cookie => {
367-
// // this if statement is necessary or the setInterval on main app will constantly run and will emit this event.reply, causing a memory leak
368-
// // checking for a cookie inside array will only emit reply when a cookie exists
369-
// if (cookie[0]) {
370-
// //console.log(cookie);
371-
// event.reply('give_cookie', cookie);
372-
// }
373-
// })
374-
// .catch(error => {
375-
// console.log('Error giving cookies in set_cookie:', error);
376-
// });
377-
// });
378-
379-
// // again for production, document.cookie is not accessible so we need this listener on main to delete the cookie on logout
380-
// ipcMain.on('delete_cookie', event => {
381-
// session.defaultSession.cookies
382-
// .remove(serverUrl, 'ssid')
383-
// // .then(removed => {
384-
// // console.log('Cookies deleted', removed);
385-
// // })
386-
// .catch(err => console.log('Error deleting cookie:', err));
387-
// });
388-
389-
// // opens new window for github oauth when button on sign in page is clicked
390-
// ipcMain.on('github', event => {
391-
// // your applications credentials
392-
// const githubUrl = 'https://github.com/login/oauth/authorize?';
393-
// const options = {
394-
// client_id: process.env.GITHUB_ID,
395-
// client_secret: process.env.GITHUB_SECRET,
396-
// scopes: ['user:email', 'notifications']
397-
// };
398-
// // create new browser window object with size, title, security options
399-
// const github = new BrowserWindow({
400-
// width: 800,
401-
// height: 600,
402-
// title: 'Github Oauth',
403-
// webPreferences: {
404-
// nodeIntegration: false,
405-
// nodeIntegrationInWorker: false,
406-
// nodeIntegrationInSubFrames: false,
407-
// contextIsolation: true,
408-
// enableRemoteModule: false,
409-
// zoomFactor: 1.0
410-
// }
411-
// });
412-
// const authUrl = `${githubUrl}client_id=${process.env.GITHUB_ID}`;
413-
// github.loadURL(authUrl);
414-
// github.show();
415-
// const handleCallback = url => {
416-
// const raw_code = /code=([^&]\*)/.exec(url) || null;
417-
// const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
418-
// const error = /\?error=(.+)\$/.exec(url);
419-
420-
// if (code || error) {
421-
// // Close the browser if code found or error
422-
// authWindow.destroy();
423-
// }
424-
425-
// // If there is a code, proceed to get token from github
426-
// if (code) {
427-
// self.requestGithubToken(options, code);
428-
// } else if (error) {
429-
// alert(
430-
// "Oops! Something went wrong and we couldn't" +
431-
// 'log you in using Github. Please try again.'
432-
// );
433-
// }
434-
// };
435-
436-
// github.webContents.on('will-navigate', (e, url) => handleCallback(url));
437-
438-
// github.webContents.on('did-finish-load', (e, url, a, b) => {
439-
// github.webContents.selectAll();
440-
// });
441-
442-
// github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) =>
443-
// handleCallback(newUrl)
444-
// );
445-
446-
// // Reset the authWindow on close
447-
// github.on('close', () => (authWindow = null), false);
448-
449-
// // if final callback is reached and we get a redirect from server back to our app, close oauth window
450-
// github.webContents.on('will-redirect', (e, callbackUrl) => {
451-
// const matches = callbackUrl.match(/(?<=\?=).*/);
452-
// const ssid = matches ? matches[0] : '';
453-
// callbackUrl = callbackUrl.replace(/\?=.*/, '');
454-
// let redirectUrl = 'app://rse/';
455-
// if (isDev) {
456-
// redirectUrl = 'http://localhost:8080/';
457-
// }
458-
// if (callbackUrl === redirectUrl) {
459-
// dialog.showMessageBox({
460-
// type: 'info',
461-
// title: 'ReacType',
462-
// icon: resolve('app/src/public/icons/png/256x256.png'),
463-
// message: 'Github Oauth Successful!'
464-
// });
465-
// github.close();
466-
// win.webContents
467-
// .executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
468-
// .then(result => win.loadURL(selfHost))
469-
// .catch(err => console.log(err));
470-
// }
471-
// });
472-
// });
473-
474-
// ipcMain.on('tutorial', event => {
475-
// // create new browser window object with size, title, security options
476-
// const tutorial = new BrowserWindow({
477-
// width: 800,
478-
// height: 600,
479-
// minWidth: 661,
480-
// title: 'Tutorial',
481-
// webPreferences: {
482-
// nodeIntegration: false,
483-
// nodeIntegrationInWorker: false,
484-
// nodeIntegrationInSubFrames: false,
485-
// contextIsolation: true,
486-
// enableRemoteModule: false,
487-
// zoomFactor: 1.0
488-
// }
489-
// });
490-
// // redirects to relevant server endpoint
491-
// //github.loadURL(`${serverUrl}/github`);
492-
// // show window
493-
// tutorial.show();
494-
// // if final callback is reached and we get a redirect from server back to our app, close oauth window
495-
// // github.webContents.on('will-redirect', (e, callbackUrl) => {
496-
// // let redirectUrl = 'app://rse/';
497-
// // if (isDev) {
498-
// // redirectUrl = 'http://localhost:8080/';
499-
// // }
500-
// // if (callbackUrl === redirectUrl) {
501-
// // dialog.showMessageBox({
502-
// // type: 'info',
503-
// // title: 'ReacType',
504-
// // icon: resolve('app/src/public/icons/png/256x256.png'),
505-
// // message: 'Github Oauth Successful!'
506-
// // });
507-
// // github.close();
508-
// // }
509-
// // });
510-
// });
364+
ipcMain.on('set_cookie', event => {
365+
session.defaultSession.cookies
366+
.get({ url: serverUrl })
367+
.then(cookie => {
368+
// this if statement is necessary or the setInterval on main app will constantly run and will emit this event.reply, causing a memory leak
369+
// checking for a cookie inside array will only emit reply when a cookie exists
370+
if (cookie[0]) {
371+
event.reply('give_cookie', cookie);
372+
}
373+
})
374+
.catch(error => {
375+
console.log('Error giving cookies in set_cookie:', error);
376+
});
377+
});
378+
379+
// again for production, document.cookie is not accessible so we need this listener on main to delete the cookie on logout
380+
ipcMain.on('delete_cookie', event => {
381+
session.defaultSession.cookies
382+
.remove(serverUrl, 'ssid')
383+
// .then(removed => {
384+
// console.log('Cookies deleted', removed);
385+
// })
386+
.catch(err => console.log('Error deleting cookie:', err));
387+
});
388+
389+
// opens new window for github oauth when button on sign in page is clicked
390+
ipcMain.on('github', event => {
391+
// your applications credentials
392+
const githubUrl = 'https://github.com/login/oauth/authorize?';
393+
const options = {
394+
client_id: process.env.GITHUB_ID,
395+
client_secret: process.env.GITHUB_SECRET,
396+
scopes: ['user:email', 'notifications']
397+
};
398+
// create new browser window object with size, title, security options
399+
const github = new BrowserWindow({
400+
width: 800,
401+
height: 600,
402+
title: 'Github Oauth',
403+
webPreferences: {
404+
nodeIntegration: false,
405+
nodeIntegrationInWorker: false,
406+
nodeIntegrationInSubFrames: false,
407+
contextIsolation: true,
408+
enableRemoteModule: false,
409+
zoomFactor: 1.0
410+
}
411+
});
412+
const authUrl = `${githubUrl}client_id=${process.env.GITHUB_ID}`;
413+
github.loadURL(authUrl);
414+
github.show();
415+
const handleCallback = url => {
416+
const raw_code = /code=([^&]\*)/.exec(url) || null;
417+
const code = raw_code && raw_code.length > 1 ? raw_code[1] : null;
418+
const error = /\?error=(.+)\$/.exec(url);
419+
420+
if (code || error) {
421+
// Close the browser if code found or error
422+
authWindow.destroy();
423+
}
424+
425+
// If there is a code, proceed to get token from github
426+
if (code) {
427+
self.requestGithubToken(options, code);
428+
} else if (error) {
429+
alert(
430+
"Oops! Something went wrong and we couldn't" +
431+
'log you in using Github. Please try again.'
432+
);
433+
}
434+
};
435+
436+
github.webContents.on('will-navigate', (e, url) => handleCallback(url));
437+
438+
github.webContents.on('did-finish-load', (e, url, a, b) => {
439+
github.webContents.selectAll();
440+
});
441+
442+
github.webContents.on('did-get-redirect-request', (e, oldUrl, newUrl) =>
443+
handleCallback(newUrl)
444+
);
445+
446+
// Reset the authWindow on close
447+
github.on('close', () => (authWindow = null), false);
448+
449+
// if final callback is reached and we get a redirect from server back to our app, close oauth window
450+
github.webContents.on('will-redirect', (e, callbackUrl) => {
451+
const matches = callbackUrl.match(/(?<=\?=).*/);
452+
const ssid = matches ? matches[0] : '';
453+
callbackUrl = callbackUrl.replace(/\?=.*/, '');
454+
let redirectUrl = 'app://rse/';
455+
if (isDev) {
456+
redirectUrl = 'http://localhost:8080/';
457+
}
458+
if (callbackUrl === redirectUrl) {
459+
dialog.showMessageBox({
460+
type: 'info',
461+
title: 'ReacType',
462+
icon: resolve('app/src/public/icons/png/256x256.png'),
463+
message: 'Github Oauth Successful!'
464+
});
465+
github.close();
466+
win.webContents
467+
.executeJavaScript(`window.localStorage.setItem('ssid', '${ssid}')`)
468+
.then(result => win.loadURL(`${redirectUrl}`))
469+
.catch(err => console.log(err));
470+
}
471+
});
472+
});
473+
474+
ipcMain.on('tutorial', event => {
475+
// create new browser window object with size, title, security options
476+
const tutorial = new BrowserWindow({
477+
width: 800,
478+
height: 600,
479+
minWidth: 661,
480+
title: 'Tutorial',
481+
webPreferences: {
482+
nodeIntegration: false,
483+
nodeIntegrationInWorker: false,
484+
nodeIntegrationInSubFrames: false,
485+
contextIsolation: true,
486+
enableRemoteModule: false,
487+
zoomFactor: 1.0
488+
}
489+
});
490+
// redirects to relevant server endpoint
491+
github.loadURL(`${serverUrl}/github`);
492+
// show window
493+
tutorial.show();
494+
// if final callback is reached and we get a redirect from server back to our app, close oauth window
495+
github.webContents.on('will-redirect', (e, callbackUrl) => {
496+
let redirectUrl = 'app://rse/';
497+
if (isDev) {
498+
redirectUrl = 'http://localhost:8080/';
499+
}
500+
if (callbackUrl === redirectUrl) {
501+
dialog.showMessageBox({
502+
type: 'info',
503+
title: 'ReacType',
504+
icon: resolve('app/src/public/icons/png/256x256.png'),
505+
message: 'Github Oauth Successful!'
506+
});
507+
github.close();
508+
}
509+
});
510+
});
511511

512512
module.exports = dialog;

‎app/src/Dashboard/ProjectContainer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {
22
useState, useContext, useEffect, createContext,
33
} from 'react';
44
import {
5-
createMuiTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
5+
createTheme, MuiThemeProvider, makeStyles, Theme, useTheme,
66
} from '@material-ui/core/styles';
77
import { useQuery } from '@apollo/client';
88

‎app/src/components/bottom/BottomTabs.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const BottomTabs = (props): JSX.Element => {
4646
Arrow.renderArrow(state.canvasFocus.childId);
4747

4848
return (
49-
<div className={classes.root} style={style}>
49+
<div className={`${classes.root} ${classes.rootLight}`} style={style}>
5050
<Box display="flex" justifyContent="space-between" alignItems="center" paddingBottom="10px" paddingRight="10px">
5151
<Tabs
5252
value={tab}
@@ -111,12 +111,14 @@ const BottomTabs = (props): JSX.Element => {
111111
const useStyles = makeStyles(theme => ({
112112
root: {
113113
flexGrow: 1,
114-
backgroundColor: '#003366',
115114
height: '100%',
116115
color: '#E8E8E8',
117116
boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
118117

119118
},
119+
rootLight: {
120+
backgroundColor: '#003366'
121+
},
120122
bottomHeader: {
121123
flex: 1,
122124
flexDirection: 'row',

‎app/src/components/bottom/CreationPanel.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React, { useContext } from 'react';
22
import ComponentPanel from '../right/ComponentPanel'
33
import StatePropsPanel from '../right/StatePropsPanel'
44
import HTMLPanel from '../left/HTMLPanel'
5+
import { styleContext } from '../../containers/AppContainer';
56

67
// Creation panel holds all of the creation functionality of the application. ComponentPanel, HTMLPanel, and StatePropsPanel are all hanged here.
78
// This allows users to create all aspects of this application in one place.
89
const CreationPanel = (props): JSX.Element => {
10+
const {style} = useContext(styleContext);
911
return (
10-
<div className="creation-panel" >
12+
<div className="creation-panel" style={style}>
1113
<ComponentPanel isThemeLight={props.isThemeLight}/>
1214
<HTMLPanel isThemeLight={props.isThemeLight}/>
1315
<StatePropsPanel isThemeLight={props.isThemeLight}/>

0 commit comments

Comments
 (0)