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

Commit d259e58

Browse files
briancaffeybriancaffey
committed
addded login and signup pages
1 parent 4a61bda commit d259e58

File tree

11 files changed

+240
-6
lines changed

11 files changed

+240
-6
lines changed

‎quasar/quasar.conf.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ module.exports = function(ctx) {
5555
"QCarousel",
5656
"QCarouselSlide",
5757
"QSelect",
58-
"QForm"
58+
"QForm",
59+
"QSpinnerGears",
60+
"QInnerLoading"
5961
],
6062

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

‎quasar/src/boot/components.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PageHeader from "components/ui/PageHeader.vue";
66
import PageSubHeader from "components/ui/PageSubHeader.vue";
77
import PageText from "components/ui/PageText.vue";
88
import BaseBtn from "components/ui/BaseBtn.vue";
9+
import BaseCard from "components/ui/BaseCard.vue";
910
import MainLeftDrawer from "layouts/primary/MainLeftDrawer.vue";
1011
import MainCarousel from "components/MainCarousel.vue";
1112
import { Emoji } from "emoji-mart-vue";
@@ -21,6 +22,7 @@ export default async ({ Vue }) => {
2122
Vue.component("PageSubHeader", PageSubHeader);
2223
Vue.component("PageText", PageText);
2324
Vue.component("BaseBtn", BaseBtn);
25+
Vue.component("BaseCard", BaseCard);
2426
Vue.component("MainLeftDrawer", MainLeftDrawer);
2527
Vue.component("MainCarousel", MainCarousel);
2628
};

‎quasar/src/components/auth/LoginForm.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<q-form @submit="login">
3+
<q-input
4+
:color="$store.getters.isDark ? 'black' : 'primary'"
5+
:dark="$store.getters.isDark"
6+
id="email"
7+
v-model="email"
8+
type="text"
9+
label="Email"
10+
autofocus
11+
/>
12+
<q-input
13+
:color="$store.getters.isDark ? 'black' : 'primary'"
14+
:dark="$store.getters.isDark"
15+
id="password"
16+
type="password"
17+
v-model="password"
18+
label="Password"
19+
/>
20+
21+
<q-card-actions align="right" class="text-primary">
22+
<q-btn
23+
:color="$store.getters.isDark ? 'black' : 'primary'"
24+
id="login-btn"
25+
flat
26+
label="Login"
27+
type="submit"
28+
v-close-popup
29+
/>
30+
</q-card-actions>
31+
</q-form>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data() {
37+
return {
38+
email: process.env.NODE_ENV === "production" ? "" : "admin@company.com",
39+
password: process.env.NODE_ENV === "production" ? "" : "password"
40+
};
41+
},
42+
methods: {
43+
login() {
44+
const vm = this;
45+
this.$store
46+
.dispatch("AUTH_REQUEST", {
47+
email: this.email,
48+
password: this.password
49+
})
50+
.then(() => {
51+
vm.$router.push("/");
52+
const refreshFrequency =
53+
process.env.NODE_ENV === "development" ? 0.1 : 4;
54+
setInterval(() => {
55+
vm.$store.dispatch("AUTH_REFRESH");
56+
}, 1000 * 60 * refreshFrequency);
57+
});
58+
this.email = "";
59+
this.password = "";
60+
}
61+
}
62+
};
63+
</script>
64+
65+
<style lang="scss" scoped></style>

‎quasar/src/components/auth/SignUpForm.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div>
3+
<q-form @submit="register">
4+
<q-input
5+
:color="$store.getters.isDark ? 'black' : 'primary'"
6+
:dark="$store.getters.isDark"
7+
id="email"
8+
v-model="email"
9+
type="text"
10+
label="Email"
11+
autofocus
12+
/>
13+
<q-input
14+
:color="$store.getters.isDark ? 'black' : 'primary'"
15+
:dark="$store.getters.isDark"
16+
id="password"
17+
type="password"
18+
v-model="password"
19+
label="Password"
20+
/>
21+
22+
<q-card-actions align="right" class="text-primary">
23+
<q-btn
24+
:color="$store.getters.isDark ? 'black' : 'primary'"
25+
id="login-btn"
26+
flat
27+
label="Sign Up"
28+
type="submit"
29+
/>
30+
</q-card-actions>
31+
</q-form>
32+
<q-inner-loading :showing="visible">
33+
<q-spinner-gears size="50px" color="primary" />
34+
</q-inner-loading>
35+
</div>
36+
</template>
37+
38+
<script>
39+
export default {
40+
data() {
41+
return {
42+
email: "",
43+
password: "",
44+
visible: false
45+
};
46+
},
47+
methods: {
48+
register() {
49+
this.visible = true;
50+
this.$registerUser(this.email, this.password)
51+
.then(() => {
52+
this.$q.notify({
53+
title: "User registered",
54+
message: "Thank you for registering!"
55+
});
56+
this.visible = false;
57+
this.$router.push("/");
58+
})
59+
.catch(() => {
60+
this.visible = false;
61+
this.$q.notify("There was an error.");
62+
});
63+
}
64+
}
65+
};
66+
</script>
67+
68+
<style lang="scss" scoped></style>

‎quasar/src/components/ui/BaseCard.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<q-card
3+
:dark="$store.getters.isDark"
4+
:class="$store.getters.isDark ? 'bg-grey-8' : 'bg-grey-2'"
5+
><slot></slot
6+
></q-card>
7+
</template>
8+
9+
<script>
10+
export default {};
11+
</script>
12+
13+
<style lang="scss" scoped></style>

‎quasar/src/css/app.styl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,8 @@
1414
}
1515
.dark-mode::-moz-selection {
1616
background: teal; /* Gecko Browsers */
17+
}
18+
19+
a {
20+
text-decoration: none;
1721
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
label="Login"
4141
v-if="!$store.getters.isAuthenticated"
4242
no-caps
43-
@click="$store.commit('toggleLoginMenu')"
43+
@click="$router.push('/login')"
4444
/>
4545
<q-btn
4646
id="logout"
@@ -52,14 +52,11 @@
5252
no-caps
5353
@click="logout"
5454
/>
55-
<auth-modal />
5655
</q-toolbar>
5756
</q-header>
5857
</template>
5958

6059
<script>
61-
import AuthModal from "components/AuthModal.vue";
62-
6360
export default {
6461
data() {
6562
return {
@@ -83,7 +80,6 @@ export default {
8380
]
8481
};
8582
},
86-
components: { AuthModal },
8783
methods: {
8884
setLang(lang) {
8985
console.log(lang);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<q-drawer
33
@hide="hideDrawer"
4+
@show="showDrawer"
45
v-model="leftDrawerOpen"
56
content-class="bg-grey-5"
67
>
@@ -93,6 +94,11 @@ export default {
9394
}
9495
},
9596
methods: {
97+
showDrawer() {
98+
this.$store.commit("toggleLeftDrawer", {
99+
leftDrawerOpen: true
100+
});
101+
},
96102
hideDrawer() {
97103
this.$store.commit("toggleLeftDrawer", {
98104
leftDrawerOpen: false

‎quasar/src/pages/Auth/Login.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<base-page>
3+
<div class="login">
4+
<page-header>Login</page-header>
5+
<base-card class="card">
6+
<login-form></login-form>
7+
</base-card>
8+
<span class="signup">
9+
<router-link to="/signup"><page-text>Sign Up</page-text></router-link>
10+
</span>
11+
</div>
12+
</base-page>
13+
</template>
14+
15+
<script>
16+
import LoginForm from "components/auth/LoginForm.vue";
17+
export default {
18+
components: {
19+
LoginForm
20+
}
21+
};
22+
</script>
23+
24+
<style scoped>
25+
.login {
26+
text-align: center;
27+
display: grid;
28+
justify-content: center;
29+
}
30+
31+
.card {
32+
max-width: 95%;
33+
min-width: 320px;
34+
padding: 20px;
35+
}
36+
37+
.signup {
38+
text-align: right;
39+
margin-top: 10px;
40+
}
41+
</style>

‎quasar/src/pages/Auth/SignUp.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<base-page>
3+
<div class="login">
4+
<page-header>Sign Up</page-header>
5+
<base-card style="max-width: 95%; min-width: 320px; padding: 20px;">
6+
<sign-up-form></sign-up-form>
7+
</base-card>
8+
<span class="login_link">
9+
<router-link to="/login"><page-text>Login</page-text></router-link>
10+
</span>
11+
</div>
12+
</base-page>
13+
</template>
14+
15+
<script>
16+
import SignUpForm from "components/auth/SignUpForm.vue";
17+
export default {
18+
components: {
19+
SignUpForm
20+
}
21+
};
22+
</script>
23+
24+
<style scoped>
25+
.login {
26+
text-align: center;
27+
display: grid;
28+
justify-content: center;
29+
}
30+
31+
.login_link {
32+
text-align: right;
33+
margin-top: 10px;
34+
}
35+
</style>

0 commit comments

Comments
 (0)