jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Got basic dialog working, no morph animation yet

Browse Source
This commit is contained in:
Stefan Zermatten
2018-10-09 16:24:43 +02:00
parent 89820780b5
commit dc8185df98
18 changed files with 318 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/Model/Users/Users.js
View File

@@ -70,42 +70,41 @@ Schemas.User = new SimpleSchema({
Meteor.users.attachSchema(Schemas.User);
Meteor.users.allow({
update: function(userId, doc, fields, modifier) {
if (
doc._id === userId &&
_.contains(fields, "username") &&
_.contains(fields, "profile") &&
fields.length === 2 &&
_.keys(modifier).length === 1 &&
modifier.$set &&
modifier.$set["profile.username"] &&
modifier.$set.username &&
_.keys(modifier.$set).length === 2
){
var expectedUsername = modifier.$set["profile.username"];
expectedUsername = expectedUsername.toLowerCase().replace(/\s+/gm, "");
if (modifier.$set.username !== expectedUsername){
return false;
}
var foundUser = Meteor.call("getUserId", expectedUsername);
return !foundUser || foundUser === userId;
}
}
});
if (Meteor.isServer) Meteor.methods({
generateMyApiKey() {
Meteor.users.gnerateApiKey = new ValidatedMethod({
name: "Users.methods.generateApiKey",
validate: null,
run(){
if(Meteor.isClient) return;
var user = Meteor.users.findOne(this.userId);
if (!user) return;
if (user && user.apiKey) return;
var apiKey = Random.id(30);
Meteor.users.update(this.userId, {$set: {apiKey}});
},
sendVerificationEmail(address) {
var user = Meteor.users.findOne(this.userId);
if (!user) return;
if (!_.some(user.emails, email => email.address === address)) return;
Accounts.sendVerificationEmail(this.userId, address);
},
});
Meteor.users.sendVerificationEmail = new ValidatedMethod({
name: "Users.methods.sendVerificationEmail",
validate: new SimpleSchema({
userId:{
type: String,
optional: true,
},
address: {
type: String,
},
}).validator(),
run(userId, address){
userId = this.userId || userId;
let user = Meteor.users.findOne();
if (!user) {
throw new Meteor.Error("User not found",
"Can't send a validation email to a user that does not exist");
}
if (!_.some(user.emails, email => email.address === address)) {
throw new Meteor.Error("Email address not found",
"The specified email address wasn't found on this user account");
}
Accounts.sendVerificationEmail(this.userId, address);
}
});

19
app/imports/ui/components/DialogBase.vue
View File

@@ -1,19 +0,0 @@
<template>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<v-card>
<v-toolbar></v-toolbar>
<v-layout></v-layout>
<v-card-actions></v-card-actions>
</v-card>
</transition>
</template>

18
app/imports/ui/components/DialogStack.vue
View File

@@ -1,18 +0,0 @@
<template>
<v-layout class="dialog-stack" column aligned-center justified-center>
<div class="backdrop"></div>
<div class="dialog-sizer">
<v-card
class="dialog"
v-for="dialog in dialogs"
:key="dialog.key"
>
<component :is="component"></component>
</v-card>
</div>
</v-layout>
</template>
<script>
</script>

13
app/imports/ui/dialogStack/DialogBase.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<v-card>
<v-toolbar color="primary" dark>
<slot name="toolbar"></slot>
</v-toolbar>
<v-layout>
<slot></slot>
</v-layout>
<v-card-actions>
<slot name="actions"></slot>
</v-card-actions>
</v-card>
</template>

98
app/imports/ui/dialogStack/DialogStack.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<v-layout class="dialog-stack" align-center justify-center>
<div
class="backdrop"
@click="backdropClicked"
:class="dialogs.length ? '' : 'hidden' "
></div>
<transition-group name="dialog-list" class="dialog-sizer" tag="div">
<div
v-for="(dialog, index) in dialogs"
:key="dialog._id"
class="dialog"
:style="getDialogStyle(index)"
>
<component :is="dialog.component" :data="dialog.data"></component>
</div>
</transition-group>
</v-layout>
</template>
<script>
import "/imports/ui/dialogStack/dialogStackWindowEvents.js";
import store from "/imports/ui/vuexStore.js";
import anime from "animejs";
const offset = 16;
export default {
computed: {
dialogs(){
return store.state.dialogStack.dialogs;
},
},
methods: {
popDialogStack(){
store.dispatch("popDialogStack");
},
backdropClicked(event){
if (event.target === event.currentTarget) this.popDialogStack();
},
getDialogStyle(index){
const length = store.state.dialogStack.dialogs.length;
if (index >= length) return;
const num = length - 1;
const left = (num - index) * -offset;
const top = (num - index) * -offset;
return `left:${left}px; top:${top}px;`;
},
},
};
</script>
<style scoped>
.dialog-stack {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.dialog-sizer {
position: relative;
height: 500px;
width: 500px;
z-index: 5;
flex: initial;
}
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 4;
pointer-events: initial;
}
.backdrop.hidden {
display: none
}
.dialog-list-move {
transition: transform 400ms;
}
.dialog-list-leave-active {
}
.dialog {
position: absolute;
height: 100%;
width: 100%;
pointer-events: initial;
}
.dialog > * {
height: 100%;
width: 100%;
}
</style>

28
app/imports/ui/dialogStack/TestDialog.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<dialog-base>
<div slot="toolbar">
Test Dialog
</div>
<div>
<v-btn @click="openDialog">Open Dialog</v-btn>
</div>
</dialog-base>
</template>
<script>
import store from "/imports/ui/vuexStore.js";
import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
const component = {
methods: {
openDialog(event){
store.commit("pushDialogStack", {
component,
});
}
},
components: {
DialogBase,
},
};
export default component;
</script>

87
app/imports/ui/dialogStack/dialogStackStore.js Normal file
View File

@@ -0,0 +1,87 @@
import store from "/imports/ui/vuexStore.js";
const offset = 16;
const duration = 400;
let dialogStack = {};
dialogStack.dialogs = [];
const dialogStackStore = {
state: {
dialogs: [],
},
mutations: {
pushDialogStack(state, {component, data, element, returnElement, callback}){
// Generate a new _id so that Vue knows how to shuffle the array
const _id = Random.id();
state.dialogs.push({
_id,
component,
data,
element,
returnElement,
callback,
});
updateHistory();
},
popDialogStackMutation (state, result){
const dialog = state.dialogs.pop();
updateHistory();
if (!dialog) return;
dialog.callback && dialog.callback(result);
},
},
actions: {
popDialogStack(context, result){
if (history && history.state && history.state.openDialogs){
history.back();
} else {
context.commit("popDialogStackMutation", result)
}
}
}
};
export default dialogStackStore;
const updateHistory = function(){
// history should looks like: [{openDialogs: 0}, {openDialogs: n}] where
// n is the number of open dialogs
// If we can't access the history object, give up
if (!history) return;
// Make sure that there is a state tracking open dialogs
// replace the state without bashing it in the process
if (!history.state || !_.isFinite(history.state.openDialogs)){
let newState = _.clone(history.state) || {};
newState.openDialogs = 0;
history.replaceState(newState, "");
}
const numDialogs = dialogStackStore.state.dialogs.length;
const stateDialogs = history.state.openDialogs;
// If the number of dialogs and state dialogs are equal, we don't need to do
// anything
if (numDialogs === stateDialogs) return;
if (stateDialogs > 0){
// On a dialog count
if (numDialogs === 0){
// but shouldn't be
history.back();
} else {
// but should replace with correct count
let newState = _.clone(history.state) || {};
newState.openDialogs = dialogStackStore.state.dialogs.length;
history.replaceState(newState, "");
}
} else if (numDialogs > 0 && stateDialogs === 0){
// On the zero state, push a dialog count
history.pushState({openDialogs: numDialogs}, "");
} else {
console.warn(
"History could not be updated correctly, unexpected case",
{stateDialogs, numDialogs},
)
}
};

11
app/imports/ui/dialogStack/dialogStackWindowEvents.js Normal file
View File

@@ -0,0 +1,11 @@
import store from "/imports/ui/vuexStore.js";
if (window){
window.onpopstate = function(event){
let state = event.state;
let numDialogs = store.state.dialogStack.dialogs.length;
if (_.isFinite(state.openDialogs) && numDialogs > state.openDialogs){
store.commit("popDialogStackMutation");
}
};
}

3
app/imports/ui/layouts/AppLayout.vue
View File

@@ -4,11 +4,13 @@
<Sidebar></Sidebar>
</v-navigation-drawer>
<router-view></router-view>
<dialog-stack></dialog-stack>
</v-app>
</template>
<script>
import Sidebar from "/imports/ui/components/Sidebar.vue";
import DialogStack from "/imports/ui/dialogStack/DialogStack.vue"
export default {
computed: {
drawer: {
@@ -22,6 +24,7 @@
},
components: {
Sidebar,
DialogStack,
},
};
</script>

10
app/imports/ui/pages/Account.vue
View File

@@ -140,6 +140,8 @@
data(){ return {
showApiKey: false,
signOutBusy: false,
apiKeyGenerationError: null,
emailVerificationError: null,
}},
methods: {
signOut(){
@@ -148,11 +150,15 @@
});
},
generateKey(){
Meteor.call("generateMyApiKey");
Meteor.users.gnerateApiKey.call(error => {
if(error) this.apiKeyGenerationError = error.reason;
});
this.showApiKey = true;
},
verifyEmail(address){
Meteor.call("sendVerificationEmail", address);
Meteor.users.sendVerificationEmail.call({address}, error => {
if(error) this.emailVerificationError = error.reason;
});
},
},
components: {

12
app/imports/ui/pages/NotFound.vue
View File

@@ -0,0 +1,12 @@
<template>
<toolbar-layout>
<div slot="toolbar">
Not Found
</div>
<v-layout align-center justify-center>
<h1>
No page was found for this address
</h1>
</v-layout>
</toolbar-layout>
</template>

14
app/imports/ui/pages/Register.vue
View File

@@ -67,6 +67,7 @@
<script>
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
import router from "/imports/ui/router.js";
export default{
data() {
return {
@@ -95,24 +96,21 @@
},
methods: {
submit () {
console.log("submitting");
if (this.$refs.form.validate()) {
Accounts.createUser({
username: this.username,
password: this.password,
email: this.email,
}, function(e){
console.error(e);
this.error = e.reason;
}, function(error){
this.error = error.reason;
});
}
},
googleLogin() {
console.log("logging in with Google");
Meteor.loginWithGoogle(e => {
this.googleError = e.message;
Meteor.loginWithGoogle(error => {
if (error) this.googleError = error.reason;
});
}
},
},
components: {
ToolbarLayout,

14
app/imports/ui/pages/SignIn.vue
View File

@@ -55,7 +55,7 @@
<script>
import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
import router from "/imports/ui/Router.js";
import router from "/imports/ui/router.js";
export default{
data: () => ({
valid: true,
@@ -72,11 +72,10 @@
}),
methods: {
submit () {
console.log("submitting");
if (this.$refs.form.validate()) {
Meteor.loginWithPassword(this.name, this.password, e => {
if (e){
this.error = e.reason;
Meteor.loginWithPassword(this.name, this.password, error => {
if (error){
this.error = error.reason;
} else {
router.push("characterList");
}
@@ -84,9 +83,8 @@
}
},
googleLogin() {
console.log("logging in with Google");
Meteor.loginWithGoogle(e => {
this.googleError = e.message;
Meteor.loginWithGoogle(error => {
if (error) this.googleError = error.reason;
});
}
},

4
app/imports/ui/router.js
View File

@@ -7,6 +7,7 @@ import CharacterList from "/imports/ui/pages/CharacterList.vue";
import SignIn from "/imports/ui/pages/SignIn.vue" ;
import Register from "/imports/ui/pages/Register.vue" ;
import Account from "/imports/ui/pages/Account.vue" ;
import TestDialog from "/imports/ui/dialogStack/TestDialog.vue"
// Not found
import NotFound from '/imports/ui/pages/NotFound.vue';
@@ -38,6 +39,9 @@ RouterFactory.configure(factory => {
},{
path: "/account",
component: Account,
},{
path: "/test-dialog",
component: TestDialog,
},
]);
});

1
app/imports/ui/vueSetup.js
View File

@@ -1,7 +1,6 @@
import Vue from "vue";
import Vuex from "vuex";
import Vuetify from "vuetify";
import routerFactory from "/imports/ui/route.js";
import store from "/imports/ui/vuexStore.js";
import VueMeteorTracker from 'vue-meteor-tracker';
import AppLayout from '/imports/ui/layouts/AppLayout.vue';

4
app/imports/ui/vuexStore.js
View File

@@ -1,9 +1,13 @@
import Vue from "vue";
import Vuex from "vuex";
import dialogStackStore from "/imports/ui/dialogStack/dialogStackStore.js";
Vue.use(Vuex);
const store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
modules: {
dialogStack: dialogStackStore,
},
state: {
drawer: undefined,
},

19
app/package-lock.json generated
View File

@@ -37,9 +37,13 @@
"json-schema-traverse": "^0.3.0"
}
},
"animejs": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz",
"integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA="
},
"ansi-regex": {
"version": "2.1.1",
"resolved": false,
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
},
"aproba": {
@@ -125,7 +129,6 @@
},
"block-stream": {
"version": "0.0.9",
"resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
"integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
"requires": {
"inherits": "~2.0.0"
@@ -190,7 +193,6 @@
},
"code-point-at": {
"version": "1.1.0",
"resolved": false,
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"combined-stream": {
@@ -354,7 +356,7 @@
"dependencies": {
"combined-stream": {
"version": "1.0.6",
"resolved": "http://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
"integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
"requires": {
"delayed-stream": "~1.0.0"
@@ -436,7 +438,6 @@
},
"graceful-fs": {
"version": "4.1.11",
"resolved": false,
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
},
"har-schema": {
@@ -484,7 +485,6 @@
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
},
"ini": {
@@ -512,7 +512,6 @@
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": false,
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"requires": {
"number-is-nan": "^1.0.0"
@@ -1464,7 +1463,6 @@
},
"number-is-nan": {
"version": "1.0.1",
"resolved": false,
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
},
"oauth-sign": {
@@ -1643,7 +1641,6 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
}
}
@@ -1748,7 +1745,6 @@
},
"set-blocking": {
"version": "2.0.0",
"resolved": false,
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"shebang-command": {
@@ -1766,7 +1762,6 @@
},
"signal-exit": {
"version": "3.0.2",
"resolved": false,
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
},
"source-map": {
@@ -1829,7 +1824,6 @@
},
"string-width": {
"version": "1.0.2",
"resolved": false,
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"requires": {
"code-point-at": "^1.0.0",
@@ -1847,7 +1841,6 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": false,
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"requires": {
"ansi-regex": "^2.0.0"

1
app/package.json
View File

@@ -10,6 +10,7 @@
"dependencies": {
"@babel/runtime": "7.0.0-beta.55",
"@polymer/polymer": "^1.2.5-npm-test.2",
"animejs": "^2.2.0",
"babel-runtime": "^6.26.0",
"bcrypt": "^1.0.3",
"bower": "^1.7.9",