Skip to content

Commit f97e123

Browse files
pmhuapmhua
authored
Merge pull request #1 from oslabs-beta/Darkmode
Darkmode
2 parents 499898b + f722890 commit f97e123

22 files changed

+492
-339
lines changed

‎app/electron/main.js

Lines changed: 149 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,7 @@ app.on('web-contents-created', (event, contents) => {
256256
'https://www.facebook.com',
257257
'https://www.smashingmagazine.com',
258258
'https://www.html5rocks.com',
259+
'app://rse/'
259260
];
260261

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

512513
module.exports = dialog;

‎app/src/Dashboard/ProjectContainer.tsx

Lines changed: 1 addition & 1 deletion
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

Lines changed: 4 additions & 2 deletions
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: isThemeLight => ({
120+
backgroundColor: isThemeLight ? 'blue': 'red'
121+
}),
120122
bottomHeader: {
121123
flex: 1,
122124
flexDirection: 'row',

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

Lines changed: 3 additions & 1 deletion
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)