Skip to content
This repository was archived by the owner on Mar 27, 2023. It is now read-only.

Commit 82eacbe

Browse files
briancaffeybriancaffey
committed
added form component, tab mutation and state
1 parent c356d78 commit 82eacbe

File tree

4 files changed

+158
-142
lines changed

4 files changed

+158
-142
lines changed

‎quasar/quasar.conf.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ module.exports = function(ctx) {
5454
"QCheckbox",
5555
"QCarousel",
5656
"QCarouselSlide",
57-
"QSelect"
57+
"QSelect",
58+
"QForm"
5859
],
5960

6061
directives: ["Ripple", "ClosePopup"],

‎quasar/src/components/AuthModal.vue‎

Lines changed: 72 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,69 @@
11
<template>
2-
<div>
3-
<q-dialog @hide="hideAuthMenu" v-model="visible">
4-
<q-card style=" max-width: 95%; min-width: 320px;">
5-
<q-tabs
6-
v-model="tab"
7-
dense
8-
align="justify"
9-
class="bg-primary text-white shadow-2"
10-
:breakpoint="0"
11-
>
12-
<q-tab name="login" icon="vpn_key">Login</q-tab>
13-
<q-tab name="signup" icon="account_circle">Sign Up</q-tab>
14-
</q-tabs>
15-
<q-tab-panels v-model="tab" animated>
16-
<q-tab-panel name="login">
17-
<q-form @submit="login">
18-
<q-input
19-
id="email"
20-
v-model="email"
21-
type="text"
22-
label="Email"
23-
autofocus
24-
/>
25-
<q-input
26-
id="password"
27-
type="password"
28-
v-model="password"
29-
label="Password"
30-
/>
31-
32-
<q-card-actions align="right" class="text-primary">
33-
<q-btn tabindex="-1" flat label="Cancel" v-close-popup />
34-
<q-btn
35-
id="login-btn"
36-
flat
37-
label="Login"
38-
type="submit"
39-
v-close-popup
40-
/>
41-
</q-card-actions>
42-
<q-btn type="a" class="full-width q-mt-md" :href="githuboath2link"
43-
>GitHub</q-btn
44-
>
45-
<br />
46-
</q-form>
47-
</q-tab-panel>
48-
49-
<q-tab-panel name="signup">
50-
<div class="text-h6">TODO</div>
51-
Implement Sign up with Email + Email Verification
52-
<q-btn
53-
:href="$store.getters.oauthUrl('github')"
54-
type="a"
55-
class="full-width q-mt-md"
56-
label="Sign Up with GitHub"
2+
<q-dialog @hide="hideAuthMenu" v-model="visible">
3+
<q-card style=" max-width: 95%; min-width: 320px;">
4+
<q-tabs
5+
v-model="tab"
6+
dense
7+
align="justify"
8+
class="bg-primary text-white shadow-2"
9+
:breakpoint="0"
10+
>
11+
<q-tab name="login" icon="vpn_key">Login</q-tab>
12+
<q-tab name="signup" icon="account_circle">Sign Up</q-tab>
13+
</q-tabs>
14+
<q-tab-panels v-model="tab" animated>
15+
<q-tab-panel name="login">
16+
<q-form @submit="login">
17+
<q-input
18+
id="email"
19+
v-model="email"
20+
type="text"
21+
label="Email"
22+
autofocus
5723
/>
58-
<q-btn
59-
:href="$store.getters.oauthUrl('google-oauth2')"
60-
type="a"
61-
class="full-width q-mt-md"
62-
label="Sign Up with Google"
24+
<q-input
25+
id="password"
26+
type="password"
27+
v-model="password"
28+
label="Password"
6329
/>
64-
</q-tab-panel>
65-
</q-tab-panels>
66-
</q-card>
67-
</q-dialog>
68-
</div>
30+
31+
<q-card-actions align="right" class="text-primary">
32+
<q-btn tabindex="-1" flat label="Cancel" v-close-popup />
33+
<q-btn
34+
id="login-btn"
35+
flat
36+
label="Login"
37+
type="submit"
38+
v-close-popup
39+
/>
40+
</q-card-actions>
41+
<q-btn type="a" class="full-width q-mt-md" :href="githuboath2link"
42+
>GitHub</q-btn
43+
>
44+
<br />
45+
</q-form>
46+
</q-tab-panel>
47+
48+
<q-tab-panel name="signup">
49+
<div class="text-h6">TODO</div>
50+
Implement Sign up with Email + Email Verification
51+
<q-btn
52+
:href="$store.getters.oauthUrl('github')"
53+
type="a"
54+
class="full-width q-mt-md"
55+
label="Sign Up with GitHub"
56+
/>
57+
<q-btn
58+
:href="$store.getters.oauthUrl('google-oauth2')"
59+
type="a"
60+
class="full-width q-mt-md"
61+
label="Sign Up with Google"
62+
/>
63+
</q-tab-panel>
64+
</q-tab-panels>
65+
</q-card>
66+
</q-dialog>
6967
</template>
7068

7169
<script>
@@ -74,7 +72,6 @@ import buildURL from "axios/lib/helpers/buildURL";
7472
export default {
7573
data() {
7674
return {
77-
tab: "login",
7875
email: process.env.NODE_ENV === "production" ? "" : "admin@company.com",
7976
password: process.env.NODE_ENV === "production" ? "" : "password"
8077
};
@@ -88,10 +85,19 @@ export default {
8885
return this.$store.getters.authModalVisible;
8986
},
9087
set() {}
88+
},
89+
tab: {
90+
get() {
91+
return this.$store.getters.getAuthPanel;
92+
},
93+
set(v) {
94+
this.$store.commit("setAuthPanel", v);
95+
}
9196
}
9297
},
9398
methods: {
9499
hideAuthMenu() {
100+
console.log("hiding auth menu method firing..");
95101
this.$store.commit("toggleLoginMenu");
96102
},
97103
login() {

‎quasar/src/layouts/primary/MainLeftDrawer.vue‎

Lines changed: 71 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,85 @@
11
<template>
2-
<div>
3-
<q-drawer
4-
@hide="hideDrawer"
5-
v-model="leftDrawerOpen"
6-
content-class="bg-grey-5"
7-
>
8-
<q-list>
9-
<q-item-label header>Menu</q-item-label>
2+
<q-drawer
3+
@hide="hideDrawer"
4+
v-model="leftDrawerOpen"
5+
content-class="bg-grey-5"
6+
>
7+
<q-list>
8+
<q-item-label header>Menu</q-item-label>
109

11-
<left-menu-link
12-
:label="$t('leftDrawer.home.main')"
13-
to="/"
14-
icon="home"
15-
:caption="$t('leftDrawer.home.sub')"
16-
/>
10+
<left-menu-link
11+
:label="$t('leftDrawer.home.main')"
12+
to="/"
13+
icon="home"
14+
:caption="$t('leftDrawer.home.sub')"
15+
/>
1716

18-
<left-menu-link
19-
:label="$t('leftDrawer.about.main')"
20-
to="/about"
21-
icon="info"
22-
:caption="$t('leftDrawer.about.sub')"
23-
/>
17+
<left-menu-link
18+
:label="$t('leftDrawer.about.main')"
19+
to="/about"
20+
icon="info"
21+
:caption="$t('leftDrawer.about.sub')"
22+
/>
2423

25-
<left-menu-link
26-
:label="$t('leftDrawer.protected.main')"
27-
to="/protected"
28-
icon="lock"
29-
:caption="$t('leftDrawer.protected.sub')"
30-
/>
24+
<left-menu-link
25+
:label="$t('leftDrawer.protected.main')"
26+
to="/protected"
27+
icon="lock"
28+
:caption="$t('leftDrawer.protected.sub')"
29+
/>
3130

32-
<left-menu-link
33-
:label="$t('leftDrawer.toDo.main')"
34-
to="/to-do"
35-
icon="check"
36-
:caption="$t('leftDrawer.toDo.sub')"
37-
/>
31+
<left-menu-link
32+
:label="$t('leftDrawer.toDo.main')"
33+
to="/to-do"
34+
icon="check"
35+
:caption="$t('leftDrawer.toDo.sub')"
36+
/>
3837

38+
<left-menu-link
39+
v-if="$store.getters.isAuthenticated"
40+
:label="$t('leftDrawer.services.main')"
41+
to="/services"
42+
icon="insert_chart_outlined"
43+
:caption="$t('leftDrawer.services.sub')"
44+
/>
45+
<q-expansion-item
46+
:content-inset-level="0.5"
47+
v-if="$store.getters.isAuthenticated"
48+
expand-separator
49+
icon="perm_identity"
50+
:label="$t('leftDrawer.examples.main')"
51+
:caption="$t('leftDrawer.tests.sub')"
52+
>
3953
<left-menu-link
40-
v-if="$store.getters.isAuthenticated"
41-
:label="$t('leftDrawer.services.main')"
42-
to="/services"
43-
icon="insert_chart_outlined"
44-
:caption="$t('leftDrawer.services.sub')"
54+
:label="$t('leftDrawer.examples.websockets.main')"
55+
to="/examples/websockets"
56+
icon="offline_bolt"
57+
:caption="$t('leftDrawer.examples.websockets.sub')"
4558
/>
46-
<q-expansion-item
47-
:content-inset-level="0.5"
48-
v-if="$store.getters.isAuthenticated"
49-
expand-separator
50-
icon="perm_identity"
51-
:label="$t('leftDrawer.examples.main')"
52-
:caption="$t('leftDrawer.tests.sub')"
53-
>
54-
<left-menu-link
55-
:label="$t('leftDrawer.examples.websockets.main')"
56-
to="/examples/websockets"
57-
icon="offline_bolt"
58-
:caption="$t('leftDrawer.examples.websockets.sub')"
59-
/>
60-
</q-expansion-item>
61-
<q-expansion-item
62-
:content-inset-level="0.5"
63-
v-if="$store.getters.isAuthenticated"
64-
expand-separator
65-
icon="check_circle"
66-
:label="$t('leftDrawer.tests.main')"
67-
:caption="$t('leftDrawer.tests.main')"
68-
>
69-
<left-menu-link
70-
:label="$t('leftDrawer.tests.redis.main')"
71-
to="/examples/redis"
72-
icon="offline_bolt"
73-
:caption="$t('leftDrawer.tests.redis.sub')"
74-
/>
75-
</q-expansion-item>
59+
</q-expansion-item>
60+
<q-expansion-item
61+
:content-inset-level="0.5"
62+
v-if="$store.getters.isAuthenticated"
63+
expand-separator
64+
icon="check_circle"
65+
:label="$t('leftDrawer.tests.main')"
66+
:caption="$t('leftDrawer.tests.main')"
67+
>
7668
<left-menu-link
77-
:label="$t('leftDrawer.environment.main')"
78-
to="/debug/environment-variables"
69+
:label="$t('leftDrawer.tests.redis.main')"
70+
to="/examples/redis"
7971
icon="offline_bolt"
80-
:caption="$t('leftDrawer.environment.main')"
72+
:caption="$t('leftDrawer.tests.redis.sub')"
8173
/>
82-
</q-list>
83-
</q-drawer>
84-
</div>
74+
</q-expansion-item>
75+
<left-menu-link
76+
:label="$t('leftDrawer.environment.main')"
77+
to="/debug/environment-variables"
78+
icon="offline_bolt"
79+
:caption="$t('leftDrawer.environment.main')"
80+
/>
81+
</q-list>
82+
</q-drawer>
8583
</template>
8684

8785
<script>

‎quasar/src/store/ui/index.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,35 @@ const state = {
22
visible: false,
33
darkMode: false,
44
leftDrawerOpen: false,
5-
nextLink: null
5+
nextLink: null,
6+
authPanel: "login"
67
};
78

89
const getters = {
910
leftDrawerOpen: s => s.leftDrawerOpen,
1011
authModalVisible: s => s.visible,
11-
getNextLink: s => s.nextLink
12+
getNextLink: s => s.nextLink,
13+
getAuthPanel: s => s.authPanel
1214
};
1315

1416
const mutations = {
17+
setAuthPanel: (state, payload) => {
18+
console.log("change panel...");
19+
console.log(payload);
20+
state.authPanel = payload;
21+
},
1522
toggleLoginMenu: state => {
23+
console.log("firing toggleLoginMenu mutation");
1624
state.visible = !state.visible;
1725
},
1826
toggleLeftDrawer: (state, payload) => {
1927
if (payload) {
28+
console.log("toggling drawer");
29+
console.log(payload);
2030
state.leftDrawerOpen = payload.leftDrawerOpen;
2131
return;
2232
}
33+
console.log("toggling");
2334
state.leftDrawerOpen = !state.leftDrawerOpen;
2435
},
2536
setNextLink: (state, payload) => {

0 commit comments

Comments
 (0)