Started work on vue sign-in
This commit is contained in:
Thaum Rystra
21
app/imports/ui/components/LabeledFab.vue
Normal file
21
app/imports/ui/components/LabeledFab.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<v-layout row align-center justify-end>
|
||||
<v-btn fab small>
|
||||
<v-icon>
|
||||
{{icon}}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<div class="label pa-2">
|
||||
{{label}}
|
||||
</div>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.label {
|
||||
background-color: #424242;
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,22 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<v-parallax src="/png/paper-dice-crown.png" height="140"></v-parallax>
|
||||
<v-toolbar color="primary" dark>
|
||||
<v-layout row v-if="signedIn">
|
||||
{{userName}}
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip bottom>
|
||||
<v-btn flat icon slot="activator"><v-icon>settings</v-icon></v-btn>
|
||||
<span>Account Settings</span>
|
||||
</v-tooltip>
|
||||
</v-layout>
|
||||
<v-layout row justify-center v-else="signedIn">
|
||||
<v-btn flat>Sign in</v-btn>
|
||||
</v-layout>
|
||||
</v-toolbar>
|
||||
<v-list>
|
||||
<v-list-tile
|
||||
v-for="(link, i) in links"
|
||||
v-if="link.vif || link.vif === undefined"
|
||||
:href="link.href"
|
||||
:key="i"
|
||||
>
|
||||
@@ -51,21 +64,26 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
links: [
|
||||
{title: "Home", icon: "home", href: "/"},
|
||||
{title: "Characters", icon: "group", href: "/characterList"},
|
||||
{title: "Send Feedback", icon: "bug_report", href: "/feedback"},
|
||||
{title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
|
||||
{title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},
|
||||
],
|
||||
};
|
||||
},
|
||||
meteor: {
|
||||
$subscribe: {
|
||||
"characterList": [],
|
||||
},
|
||||
signedIn(){
|
||||
return Meteor.userId();
|
||||
},
|
||||
userName(){
|
||||
let user = Meteor.user();
|
||||
return user && user.username || user && user._id;
|
||||
},
|
||||
links(){
|
||||
return [
|
||||
{title: "Home", icon: "home", href: "/"},
|
||||
{title: "Characters", icon: "group", href: "/characterList", vif: Meteor.userId()},
|
||||
{title: "Send Feedback", icon: "bug_report", href: "/feedback"},
|
||||
{title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
|
||||
{title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},
|
||||
];
|
||||
},
|
||||
parties(){
|
||||
let parties = Parties.find(
|
||||
{owner: Meteor.userId()},
|
||||
|
||||
@@ -121,7 +121,6 @@
|
||||
</v-layout>
|
||||
</section>
|
||||
</div>
|
||||
<v-footer></v-footer>
|
||||
</toolbar-layout>
|
||||
</template>
|
||||
|
||||
|
||||
116
app/imports/ui/pages/Register.vue
Normal file
116
app/imports/ui/pages/Register.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<ToolbarLayout>
|
||||
<div slot="toolbar">Sign In</div>
|
||||
<v-form ref="form" class="mt-4">
|
||||
<v-layout column align-center>
|
||||
<v-img
|
||||
src="crown-dice-logo-cropped-transparent.png"
|
||||
width="120px"
|
||||
class="ma-3"></v-img>
|
||||
<v-text-field
|
||||
type="text"
|
||||
label="Email"
|
||||
v-model="email"
|
||||
:rules="emailRules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="text"
|
||||
label="Username"
|
||||
v-model="username"
|
||||
:rules="usernameRules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
label="Password"
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
label="Password Again"
|
||||
v-model="password2"
|
||||
:rules="password2Rules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<div class="error--text">
|
||||
{{error}}
|
||||
</div>
|
||||
<v-layout row>
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
@click="submit"
|
||||
color="accent"
|
||||
>
|
||||
Register
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-form>
|
||||
<v-divider class="ma-4"></v-divider>
|
||||
<v-layout column align-center>
|
||||
<div class="error--text">
|
||||
{{googleError}}
|
||||
</div>
|
||||
<v-btn color="accent" @click="googleLogin">
|
||||
Register in with Google
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</ToolbarLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
|
||||
export default{
|
||||
data() {
|
||||
return {
|
||||
valid: true,
|
||||
username: "",
|
||||
usernameRules: [
|
||||
v => !!v || "Name is required",
|
||||
],
|
||||
email: "",
|
||||
emailRules: [
|
||||
v => !!v || "Name is required",
|
||||
v => /.+@.+/.test(v) || 'E-mail must be valid',
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
v => !!v || "Password is required",
|
||||
],
|
||||
password2: "",
|
||||
password2Rules: [
|
||||
v => !!v || "Password is required",
|
||||
v => v == this.password || "Passwords don't match",
|
||||
],
|
||||
error: "",
|
||||
googleError: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit () {
|
||||
console.log("submitting");
|
||||
if (this.$refs.form.validate()) {
|
||||
Meteor.loginWithPassword(this.name, this.password, e => {
|
||||
this.error = e && e.reason;
|
||||
});
|
||||
}
|
||||
},
|
||||
googleLogin() {
|
||||
console.log("logging in with Google");
|
||||
Meteor.loginWithGoogle(e => {
|
||||
this.googleError = e.message;
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ToolbarLayout,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
92
app/imports/ui/pages/SignIn.vue
Normal file
92
app/imports/ui/pages/SignIn.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<ToolbarLayout>
|
||||
<div slot="toolbar">Sign In</div>
|
||||
<v-form ref="form" class="mt-4">
|
||||
<v-layout column align-center>
|
||||
<v-img
|
||||
src="crown-dice-logo-cropped-transparent.png"
|
||||
width="120px"
|
||||
class="ma-3"></v-img>
|
||||
<v-text-field
|
||||
type="text"
|
||||
label="Username or email"
|
||||
v-model="name"
|
||||
:rules="nameRules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
type="password"
|
||||
label="Password"
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
@keyup.enter="submit"
|
||||
required
|
||||
></v-text-field>
|
||||
<v-btn flat>Reset Password</v-btn>
|
||||
<div class="error--text">
|
||||
{{error}}
|
||||
</div>
|
||||
<v-layout row>
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
@click="submit"
|
||||
color="accent"
|
||||
>
|
||||
Sign In
|
||||
</v-btn>
|
||||
<v-btn color="accent" href="/register">
|
||||
Register
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-form>
|
||||
<v-divider class="ma-4"></v-divider>
|
||||
<v-layout column align-center>
|
||||
<div class="error--text">
|
||||
{{googleError}}
|
||||
</div>
|
||||
<v-btn color="accent" @click="googleLogin">
|
||||
Sign in with Google
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</ToolbarLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
|
||||
export default{
|
||||
data: () => ({
|
||||
valid: true,
|
||||
name: "",
|
||||
nameRules: [
|
||||
v => !!v || "Name is required",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
v => !!v || "Password is required",
|
||||
],
|
||||
error: "",
|
||||
googleError: "",
|
||||
}),
|
||||
methods: {
|
||||
submit () {
|
||||
console.log("submitting");
|
||||
if (this.$refs.form.validate()) {
|
||||
Meteor.loginWithPassword(this.name, this.password, e => {
|
||||
this.error = e && e.reason;
|
||||
});
|
||||
}
|
||||
},
|
||||
googleLogin() {
|
||||
console.log("logging in with Google");
|
||||
Meteor.loginWithGoogle(e => {
|
||||
this.googleError = e.message;
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ToolbarLayout,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -3,7 +3,9 @@ import Vue from "vue";
|
||||
|
||||
// Components
|
||||
import Home from '/imports/ui/pages/Home.vue';
|
||||
import CharacterList from "/imports/ui/pages/CharacterList.vue"
|
||||
import CharacterList from "/imports/ui/pages/CharacterList.vue";
|
||||
import SignIn from "/imports/ui/pages/SignIn.vue" ;
|
||||
import Register from "/imports/ui/pages/Register.vue" ;
|
||||
|
||||
// Not found
|
||||
import NotFound from '/imports/ui/pages/NotFound.vue';
|
||||
@@ -26,7 +28,13 @@ RouterFactory.configure(factory => {
|
||||
},{
|
||||
path: "/characterList",
|
||||
component: CharacterList,
|
||||
}
|
||||
},{
|
||||
path: "/sign-in",
|
||||
component: SignIn,
|
||||
},{
|
||||
path: "/register",
|
||||
component: Register,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
1200
app/package-lock.json
generated
1200
app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@
|
||||
},
|
||||
"author": "Stefan Zermatten",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.0.0-beta.49",
|
||||
"@babel/runtime": "7.0.0-beta.55",
|
||||
"@polymer/polymer": "^1.2.5-npm-test.2",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"bcrypt": "^1.0.3",
|
||||
|
||||
Reference in New Issue
Block a user