Skip to content

Commit 6961137

Browse files
sunhonghaoparissunhonghaoparis
committed
oauth done
1 parent 02a25a2 commit 6961137

File tree

7 files changed

+187
-31
lines changed

7 files changed

+187
-31
lines changed

‎src/assets/github.png

31.1 KB
Loading

‎src/assets/google.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 126 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ export default {
255255
256256
if (componentName === "App") {
257257
str += `<div id="app">\n\t\t<div id="nav">\n`;
258+
258259
for (let route in routes) {
259260
if (route === "HomeView") {
260261
str += `\t\t\t<router-link to="/" class = "componentLinks">${route}</router-link>\n`;
@@ -277,6 +278,7 @@ export default {
277278
let childNameClassFullStr = (childNameClass === "") ? "" : ` class = '${childNameClass}'`;
278279
routeStr += `<${childName}${childNameClassFullStr}></${childName}>\n`
279280
});
281+
280282
return `<template>\n <div id = "${componentName}">\n${templateTagStr}${routeStr}\t</div>\n</template>`;
281283
}
282284
@@ -287,19 +289,29 @@ export default {
287289
let compClass = (this.routes.hasOwnProperty(componentName)) ? componentName : this.componentMap[componentName].htmlAttributes.class;
288290
289291
if (compClass !== "" && compID !== "") {
292+
293+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
294+
return `<template>\n <div id = "${compID}" class = "${compClass}">\n${templateTagStr}${routeStr} </div>\n<Oauth/>\n</template>`;
295+
}
290296
return `<template>\n <div id = "${compID}" class = "${compClass}">\n${templateTagStr}${routeStr} </div>\n</template>`;
291297
}
292298
else if (compClass !== "" && compID === "") {
299+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
300+
return `<template>\n <div class = "${compClass}">\n${templateTagStr}${routeStr} </div>\n<Oauth/>\n</template>`;
301+
}
293302
return `<template>\n <div class = "${compClass}">\n${templateTagStr}${routeStr} </div>\n</template>`;
294303
}
295304
else if (compClass === "" && compID !== "") {
305+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){return `<template>\n <div id = "${compID}">\n${templateTagStr}${routeStr} </div>\n<Oauth/>\n</template>`;}
296306
return `<template>\n <div id = "${compID}">\n${templateTagStr}${routeStr} </div>\n</template>`;
297307
}
298308
else {
309+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){return `<template>\n <div>\n\t${str}${templateTagStr}${routeStr} </div>\n<Oauth/>\n</template>`;}
299310
return `<template>\n <div>\n\t${str}${templateTagStr}${routeStr} </div>\n</template>`;
300311
}
301312
}
302313
else {
314+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){return `<template>\n\t${str}${templateTagStr}${routeStr}</div>\n<Oauth/>\n</template>`}
303315
return `<template>\n\t${str}${templateTagStr}${routeStr}</div>\n</template>`
304316
}
305317
},
@@ -378,12 +390,22 @@ export default {
378390
let output;
379391
if (this.exportAsTypescript === "on") {
380392
output = "\n\n<script lang='ts'>\n";
393+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
394+
output+=`import Oauth from '../components/oauth.vue';`
395+
}
381396
output += imports + "\nexport default defineComponent ({\n name: '" + componentName + "'";
382397
} else {
383398
output = "\n\n<script>\n";
399+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
400+
output+=`import Oauth from '../components/oauth.vue';`
401+
}
384402
output += imports + "\nexport default {\n name: '" + componentName + "'";
403+
385404
}
386405
output += ",\n components: {\n";
406+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
407+
output+=`Oauth,`
408+
}
387409
output += childrenComponentNames + " },\n";
388410
output += data;
389411
output += computed;
@@ -431,17 +453,12 @@ export default {
431453
return str
432454
}
433455
},
434-
/**
435-
* @description writes the <style> in vue component for all components in Canvas
436-
* Do not update code styling. Lack of styling is intentional to properly export the styling string.
437-
*/
438-
/* UPDATE THIS TO GRAB INFORMATION FROM this.componentMap NOT this.routes*/
439-
/* this.componentMap does not have x-y positioning stored */
440456
writeStyle(componentName) {
441457
let htmlArray = this.componentMap[componentName].htmlList;
442458
let styleString = "";
443459
console.log(componentName);
444460
// Add grid css property to view component div
461+
if (this.routes)
445462
// adds view component id grid style and adds child component css styling
446463
if (this.routes.hasOwnProperty(componentName)) {
447464
styleString += `#${componentName} {\n\tdisplay: grid; \n\tgrid-template-columns: repeat(${this.gridLayout[0]}, 1fr);\n\tgrid-template-rows: repeat(${this.gridLayout[1]}, 1fr);\n\tgrid-column-gap: 0px;\n\tgrid-row-gap: 0px;\n}\n`;
@@ -469,14 +486,112 @@ export default {
469486
.router-view {
470487
margin:auto;
471488
background-color: gray;
472-
height: 720px;
473-
width: 1280px;
474489
}
475490
</style >`
476491
} else return `\n\n<style scoped>\n${styleString}</style >`;
477492
},
493+
createFirebaseConfigFile(location) {
494+
if(this.$store.state.exportOauth ==='on'){
495+
let str = `import { initializeApp } from 'firebase/app';`;
496+
str += `\n\tconst firebaseConfig = {`;
497+
str += `\n\tapiKey: "AIzaSyBR4o9xj4LtDaZ37-mC-FqRQWaz67_9Fq0",`;
498+
str += `\n\tauthDomain: "oauth-74279.firebaseapp.com",`;
499+
str += `\n\tprojectId: "oauth-74279",`;
500+
str += `\n\tstorageBucket: "oauth-74279.appspot.com",`;
501+
str += `\n\tmessagingSenderId: "91801023441",`;
502+
str += `\n\tappId: "1:91801023441:web:4d923f26f5ce9c7384e6f0",`;
503+
str += `\n\tmeasurementId: "G-ZZQMS6RRWR"`;
504+
str += `\n};`;
505+
str += `\nconst firebaseApp = initializeApp(firebaseConfig);`;
506+
str += `\nexport default firebaseApp`;
478507
479-
// creates index html
508+
fs.writeFileSync(path.join(location, "firebaseConfig.js"), str);
509+
}
510+
},
511+
createOauthFile(location){
512+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
513+
let str = `<template>`;
514+
str += `\n\t<!-- you can see the username when you log in -->`;
515+
str += `\n\t<h1 v-if="user">Username: {{ user }}</h1>`;
516+
str += `\n\t<div id="logout" v-if="isSignedIn">`;
517+
str += `\n\t\t<button @click="handleSignOut">logout</button>`;
518+
str += `\n\t</div>`;
519+
if(this.$store.state.exportOauth ==='on'){
520+
str += `\n\t<div id="GoogleSignIn" v-if="!isSignedIn">`;
521+
str += `\n\t\t<h3>Google Signin</h3>`;
522+
str += `\n\t\t<button @click="handleSignInGoogle">login</button>`;
523+
str += `\n\t</div>`;
524+
}
525+
526+
if(this.$store.state.exportOauthGithub ==='on'){
527+
str += `\n\t<div id="GitHubSignIn" v-if="!isSignedIn">`;
528+
str += `\n\t\t<h3>GitHub Signin</h3>`;
529+
str += `\n\t\t<button @click="handleSignInGitHub">login</button>`;
530+
str += `\n\t</div>`;
531+
}
532+
533+
str += `\n</template>`;
534+
str += `\n\n<script>`;
535+
str += `\nimport firebaseConfig from '../../firebaseConfig';`;
536+
str += `\nimport { getAuth, signInWithPopup, signOut, GoogleAuthProvider, TwitterAuthProvider, GithubAuthProvider } from "firebase/auth";`;
537+
str += `\nfirebaseConfig`;
538+
if(this.$store.state.exportOauth ==='on'){
539+
str += `\nconst provider = new GoogleAuthProvider();`;
540+
}
541+
if(this.$store.state.exportOauthGithub ==='on'){
542+
str += `\nconst providerGithub = new GithubAuthProvider();`;
543+
}
544+
str += `\nconst auth = getAuth();`;
545+
str += `\n\nexport default {`;
546+
str += `\n\tname: 'OauthComponent',`;
547+
str += `\n\tprops: {`;
548+
str += `\n\t},`;
549+
str += `\n\tdata() {`;
550+
str += `\n\t\treturn {`;
551+
str += `\n\t\t\tuser: '',`;
552+
str += `\n\t\t\tisSignedIn: false,`;
553+
str += `\n\t\t}`;
554+
str += `\n\t },`;
555+
str += `\n\tmethods: {`;
556+
if(this.$store.state.exportOauth ==='on'){
557+
str += `\n\t\thandleSignInGoogle() {`;
558+
str += `\n\t\t\tsignInWithPopup(auth, provider)`;
559+
str += `\n\t\t\t\t.then((result) => { `;
560+
str += `\n\t\t\t\t\tthis.user = result.user.displayName;`;
561+
str += `\n\t\t\t\t\tthis.isSignedIn = true;`;
562+
str += `\n\t\t\t\t}).catch((error) => {`;
563+
str += `\n\t\t\t\t\tconsole.log(error);`;
564+
str += `\n\t\t\t\t});`;
565+
str += `\n\t\t},`;
566+
}
567+
if(this.$store.state.exportOauthGithub ==='on'){
568+
str += `\n\t\thandleSignInGitHub() {`;
569+
str += `\n\t\t\tsignInWithPopup(auth, providerGithub)`;
570+
str += `\n\t\t\t\t.then((result) => { `;
571+
str += `\n\t\t\t\t\tthis.user = result.user.displayName;`;
572+
str += `\n\t\t\t\t\tthis.isSignedIn = true;`;
573+
str += `\n\t\t\t\t}).catch((error) => {`;
574+
str += `\n\t\t\t\t\tconsole.log(error);`;
575+
str += `\n\t\t\t\t});`;
576+
str += `\n\t\t},`;
577+
}
578+
579+
str += `\n\t\thandleSignOut() {`;
580+
str += `\n\t\t\tsignOut(auth).then(() => {`;
581+
str += `\n\t\t\t\t\tthis.user = ''; `;
582+
str += `\n\t\t\t\t\tthis.isSignedIn = false;`;
583+
str += `\n\t\t\t\t}).catch((error) => {`;
584+
str += `\n\t\t\t\t\tconsole.log(error);`;
585+
str += `\n\t\t\t\t});`;
586+
str += `\n\t\t}`;
587+
str += `\n\t}`;
588+
str += `\n}`;
589+
str += `\n<\/script>`;
590+
str += `\n<style scoped>`;
591+
str += `\n</style>`;
592+
fs.writeFileSync(path.join(location,"src","components","oauth.vue"), str);
593+
}
594+
},
480595
createIndexFile(location) {
481596
let str = `<!DOCTYPE html>\n<html lang="en">\n\n<head>`;
482597
str += `\n\t<meta charset="utf-8">`;
@@ -500,22 +615,6 @@ export default {
500615
str += `</html>\n`;
501616
fs.writeFileSync(path.join(location, "index.html"), str);
502617
},
503-
createFirebaseConfigFile(location) {
504-
let str = `import { initializeApp } from 'firebase/app';`;
505-
str += `\n\tconst firebaseConfig = {`;
506-
str += `\n\tapiKey: "AIzaSyBR4o9xj4LtDaZ37-mC-FqRQWaz67_9Fq0",`;
507-
str += `\n\tauthDomain: "oauth-74279.firebaseapp.com",`;
508-
str += `\n\tprojectId: "oauth-74279",`;
509-
str += `\n\tstorageBucket: "oauth-74279.appspot.com",`;
510-
str += `\n\tmessagingSenderId: "91801023441",`;
511-
str += `\n\tappId: "1:91801023441:web:4d923f26f5ce9c7384e6f0",`;
512-
str += `\n\tmeasurementId: "G-ZZQMS6RRWR"`;
513-
str += `\n};`;
514-
str += `\nconst firebaseApp = initializeApp(firebaseConfig);`;
515-
str += `\nexport default firebaseApp`;
516-
517-
fs.writeFileSync(path.join(location, "firebaseConfig.js"), str);
518-
},
519618
// creates main.js boilerplate
520619
createMainFile(location) {
521620
let str = `import { createApp } from 'vue';`;
@@ -676,7 +775,7 @@ export default {
676775
if(this.$store.state.importLibraries.includes('element')){
677776
str += `,\n\t\t"element-plus": "^2.2.16"`;
678777
};
679-
if(this.$store.state.exportOauth ==='on'){
778+
if(this.$store.state.exportOauth ==='on'||this.$store.state.exportOauthGithub ==='on'){
680779
str += `,\n\t\t "firebase": "^9.6.9"`
681780
}
682781
str += `\n\t},`;
@@ -719,6 +818,7 @@ export default {
719818
this.createPackage(data);
720819
this.createStore(data);
721820
this.createFirebaseConfigFile(data);
821+
this.createOauthFile(data);
722822
// exports images to the /assets folder
723823
// eslint-disable-next-line no-unused-vars
724824
for (let [routeImage, imageLocation] of Object.entries(this.imagePath)) {

‎src/layouts/MyLayout.vue

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,35 @@ Description:
6767
<span class="switch-handle" :value="this.exportAsTypescript"></span>
6868
</label>
6969
</div>
70+
<div class="drawer">
71+
<q-expansion-item group="accordion" label="Create Oauth" >
7072
<div class="Oauth">
71-
<p class="Oauth-text"> <b>Oauth: </b> </p>
73+
<p class="Oauth-text"> <b>
74+
<img src="../assets/google.svg" alt="" id="google">
75+
76+
</b> </p>
7277
<label for="Oauth" class="switch" >
7378
<input v-if="this.exportOauth === 'on'" class="switch-input" type="checkbox" name="Oauth" id="Oauth" :value="this.exportOauth" @change="syncOauthFlag" checked/>
7479
<input v-else class="switch-input" type="checkbox" name="Oauth" id="Oauth" :value="this.exportOauth" @change="syncOauthFlag"/>
7580
<span class="switch-label" :value="this.exportOauth" data-on="on" data-off="off"></span>
7681
<span class="switch-handle" :value="this.exportOauth"></span>
7782
</label>
7883
</div>
84+
85+
<div class="Oauth">
86+
<p class="Oauth-text"> <b>
87+
<img src="../assets/github.png" alt="" id="github">
88+
89+
</b> </p>
90+
<label for="OauthGit" class="switch" >
91+
<input v-if="this.exportOauthGithub === 'on'" class="switch-input" type="checkbox" name="OauthGit" id="OauthGit" :value="this.exportOauthGithub" @change="syncOauthGitFlag" checked/>
92+
<input v-else class="switch-input" type="checkbox" name="OauthGit" id="OauthGit" :value="this.exportOauthGithub" @change="syncOauthGitFlag"/>
93+
<span class="switch-label" :value="this.exportOauthGithub" data-on="on" data-off="off"></span>
94+
<span class="switch-handle" :value="this.exportOauthGithub"></span>
95+
</label>
96+
</div>
97+
</q-expansion-item>
98+
</div>
7999
</div>
80100
<i id="btn"></i>
81101
</q-menu >
@@ -192,7 +212,7 @@ export default {
192212
GridDensity
193213
},
194214
computed: {
195-
...mapState(["exportAsTypescript","exportOauth"]),
215+
...mapState(["exportAsTypescript","exportOauth","exportOauthGithub"]),
196216
},
197217
methods: {
198218
...mapActions(["toggleTutorial"]),
@@ -248,7 +268,7 @@ export default {
248268
this.$store.commit("EXPORT_AS_TYPESCRIPT", checkboxValue);
249269
},
250270
syncOauthFlag(e) {
251-
console.log(this.$store.state.exportOauth);
271+
252272
let checkboxValue;
253273
if (e.target.value === "off") {
254274
checkboxValue = "on";
@@ -258,6 +278,19 @@ export default {
258278
this.$store.commit("EXPORT_OAUTH", checkboxValue);
259279
260280
},
281+
syncOauthGitFlag(e) {
282+
console.log(this.$store.state.exportOauthGithub);
283+
284+
let checkboxValue;
285+
if (e.target.value === "off") {
286+
checkboxValue = "on";
287+
} else {
288+
checkboxValue = "off";
289+
}
290+
this.$store.commit("EXPORT_OAUTH_GIT", checkboxValue);
291+
console.log(this.$store.state.exportOauthGithub);
292+
293+
},
261294
clickedUndo() {
262295
this.$emit('undo');
263296
},
@@ -581,11 +614,29 @@ q-btn > i {
581614
}
582615
.Oauth{
583616
display: flex;
584-
align-items: flex-end;
617+
align-items: center;
618+
justify-content: space-between;
585619
margin: 10px;
586620
flex-direction: row;
587621
}
588622
.Oauth-text{
589623
margin-right: 10px;
590624
}
625+
626+
.drawer{
627+
font-size: 15px;
628+
font-weight: bold;
629+
}
630+
#google{
631+
width: 100px;
632+
margin-top: 10px;
633+
}
634+
635+
#github{
636+
width: 50px;
637+
margin-top: 10px;
638+
margin-right: 10px;
639+
margin-left: 10px;
640+
641+
}
591642
</style>

‎src/store/mutations.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,9 @@ const mutations = {
113113
[types.EXPORT_OAUTH]: (state, payload) => {
114114
state.exportOauth = payload;
115115
},
116-
116+
[types.EXPORT_OAUTH_GIT]: (state, payload) => {
117+
state.exportOauthGithub = payload;
118+
},
117119

118120
[types.CREATE_ACTION]: (state, payload) => {
119121
state.userActions.push(payload);

‎src/store/state/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const newState = {
6767
pastedComponent: {},
6868
exportAsTypescript: 'off',
6969
exportOauth: 'off',
70+
exportOauthGithub: 'off',
7071
showTutorial: true,
7172
tutorialFirstOpen: true,
7273
pasteTimer: 0,

‎src/store/types.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export const DELETE_USER_ACTIONS = 'DELETE_USER_ACTIONS'
6868
export const DELETE_USER_STATE = 'DELETE_USER_STATE'
6969
export const EXPORT_AS_TYPESCRIPT = 'EXPORT_AS_TYPESCRIPT'
7070
export const EXPORT_OAUTH = 'EXPORT_OAUTH'
71+
export const EXPORT_OAUTH_GIT = 'EXPORT_OAUTH_GIT'
7172
export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
7273
export const ADD_ACTIVE_COMPONENT_NOTE = 'ADD_ACTIVE_COMPONENT_NOTE'
7374
export const DELETE_ACTIVE_COMPONENT_NOTE = 'DELETE_ACTIVE_COMPONENT_NOTE'

0 commit comments

Comments
 (0)