feat: added account to mongo, added way to add account, added way to get accounts, showing account items on homepage, added add account page, changed schema slightly

backend/logic/io.js

@@ -30,13 +30,37 @@ module.exports = class extends coreClass {
 
 			this.handlers = {
 				"getAccounts": cb => {
-					cb({
-						accounts: []
+					this.mongo.models.account.find({}, (err, accounts) => {
+						if (err)
+							return cb({
+								status: "failure",
+								err: err
+							});
+						else
+							return cb({
+								status: "success",
+								accounts
+							});
+					});
+				},
+
+				"addAccount": (cb, account) => {
+					this.mongo.models.account.create(account, (err) => {
+						if (err)
+							return cb({
+								status: "failure",
+								err: err
+							});
+						else
+							console.log("Added account!");
+							return cb({
+								status: "success"
+							});
 					});
 				},
 
 				"getAccountSchema": cb => {
-					this.mongo.models.accountSchema.find({}, null, { sort: ["version"], limit: 1 }, (err, res) => {
+					this.mongo.models.accountSchema.find({}, null, { sort: "-version", limit: 1 }, (err, res) => {
 						if (err || !res || res.length !== 1)
 							return cb({
 								status: "failure",

backend/logic/mongo/index.js

@@ -27,11 +27,13 @@ module.exports = class extends coreClass {
 			})
 				.then(() => {
 					this.schemas = {
-						accountSchema: new mongoose.Schema(require(`./schemas/accountSchema`))
+						accountSchema: new mongoose.Schema(require(`./schemas/accountSchema`)),
+						account: new mongoose.Schema(require(`./schemas/account`))
 					};
 		
 					this.models = {
-						accountSchema: mongoose.model('accountSchema', this.schemas.accountSchema)
+						accountSchema: mongoose.model('accountSchema', this.schemas.accountSchema),
+						account: mongoose.model('account', this.schemas.account)
 					};
 
 					mongoose.connection.on('error', err => {

backend/logic/mongo/schemas/account.js

@@ -0,0 +1,4 @@
+module.exports = {
+	version: { type: Number, required: true },
+	fields: [{ type: Object }]
+};

backend/schemas/accountSchemaV1.js → backend/schemas/accountSchemaV3.js

@@ -1,7 +1,7 @@
 module.exports = {
 	name: "Account",
 	description: "Account schema",
-	version: "1",
+	version: 3,
 	fields: [
 		{
 			name: "Name",
@@ -69,7 +69,7 @@ module.exports = {
 					fieldTypeId: "accountExists"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -133,7 +133,7 @@ module.exports = {
 					fieldTypeId: "usesPassword"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -258,7 +258,7 @@ module.exports = {
 					fill: true
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -309,7 +309,7 @@ module.exports = {
 					fieldTypeId: "in1password"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -321,7 +321,7 @@ module.exports = {
 					fieldTypeId: "deleted"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -334,7 +334,7 @@ module.exports = {
 					fill: true
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -346,7 +346,7 @@ module.exports = {
 					fieldTypeId: "serviceAccessible"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -358,7 +358,7 @@ module.exports = {
 					fieldTypeId: "requestedDeletion"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -371,19 +371,7 @@ module.exports = {
 					fill: true
 				}
 			],
-			minEntries: 1,
-			maxEntries: 1
-		},
-		{
-			name: "To delete",
-			fieldId: "toDelete",
-			fieldTypes: [
-				{
-					type: "checkbox",
-					fieldTypeId: "toDelete"
-				}
-			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -395,7 +383,7 @@ module.exports = {
 					fieldTypeId: "toDelete"
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		},
 		{
@@ -408,7 +396,7 @@ module.exports = {
 					fill: true
 				}
 			],
-			minEntries: 1,
+			minEntries: 0,
 			maxEntries: 1
 		}
 	]

frontend/main.js

@@ -14,6 +14,10 @@ const router = new VueRouter({
 		{
 			path: "/",
 			component: () => import("./vue/pages/Homepage.vue")
+		},
+		{
+			path: "/add",
+			component: () => import("./vue/pages/AddAccount.vue")
 		}
 	]
 });

frontend/vue/components/AccountForm.vue

@@ -0,0 +1,77 @@
+<template>
+	<form>
+		<field
+			v-for="field in fields"
+			:name="field.name"
+			:minEntries="field.minEntries"
+			:maxEntries="field.maxEntries"
+			:initialEntries="account.fields[field.fieldId]"
+			:key="field.fieldId"
+			:ref="field.fieldId"
+			:fieldTypes="field.fieldTypes"/>
+			<button @click="submit()" type="button">
+				Submit
+			</button>
+	</form>
+</template>
+
+<script>
+import Field from '../components/Field.vue';
+
+import io from "../../io.js";
+
+export default {
+	components: { Field },
+	data: function() {
+		return {
+			fields: [],
+			account: {
+				version: 1,
+				fields: {}
+			}
+		};
+	},
+	methods: {
+		submit() {
+			let account = JSON.parse(JSON.stringify(this.account));
+			let fields = {};
+			Object.keys(account.fields).forEach(fieldId => {
+				fields[fieldId] = this.$refs[fieldId][0].entries;
+			});
+			account.fields = fields;
+			this.onSubmit(account);
+		}
+	},
+	props: {
+		onSubmit: Function
+	},
+	mounted() {
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			socket.emit("getAccountSchema", res => {
+				this.fields = res.schema.fields;
+				this.fields.forEach(field => {
+					let defaultObject = {};
+					field.fieldTypes.forEach(fieldType => {
+						if (fieldType.type === "text" || fieldType.type === "select") defaultObject[fieldType.fieldTypeId] = "";
+						else if (fieldType.type === "checkbox") defaultObject[fieldType.fieldTypeId] = false;
+					});
+
+					this.account.fields[field.fieldId] = [];
+
+					for(let i = 0; i < field.minEntries; i++) {
+						this.account.fields[field.fieldId].push(defaultObject);
+					}
+				});
+			});
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+form {
+	width: 400px;
+}
+</style>

frontend/vue/components/AccountsList.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="accounts-list">
+		<div class="account" v-for="(account, accountIndex) in accounts">
+			Account
+			<button
+				@click="editAccount(accountIndex)"
+			>
+				Edit account
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data: function() {
+		return {
+			
+		};
+	},
+	methods: {
+		
+	},
+	props: {
+		accounts: Array
+	},
+	mounted() {
+	},
+	methods: {
+		editAccount(index) {
+			console.log(this.accounts[index]);
+		}
+		/*addEntry() {
+			let emptyEntry = [];
+			this.fieldTypes.forEach((fieldType) => {
+				emptyEntry.push(null);
+			});
+			this.entries.push(emptyEntry);
+		},
+		removeEntry(index) {
+			this.entries.splice(index, 1);
+		},
+		toggleCheckbox(entryIndex, fieldIndex) {
+			this.$set(this.entries[entryIndex], fieldIndex, !this.entries[entryIndex][fieldIndex]);
+		}*/
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/components/Field.vue

@@ -4,11 +4,11 @@
 		<button v-if="entries.length === 0" @click="addEntry()" type="button">+</button>
 		<div class="control-row" v-for="(entry, entryIndex) in entries">
 			<div class="control-col" v-for="(fieldType, fieldIndex) in fieldTypes" :class="{ 'fill-remaining': fieldType.fill }">
-				<input name="name" type="text" v-if="fieldType.type === 'text'" v-model="entry[fieldIndex]"/>
-				<select name="name" v-if="fieldType.type === 'select'" class="fill-remaining" v-model="entry[fieldIndex]">
+				<input name="name" type="text" v-if="fieldType.type === 'text'" v-model="entry[fieldType.fieldTypeId]"/>
+				<select name="name" v-if="fieldType.type === 'select'" class="fill-remaining" v-model="entry[fieldType.fieldTypeId]">
 					<option v-for="option in fieldType.options" :value="option.value">{{option.text}}</option>
 				</select>
-				<div tabindex="0" v-on:keyup.enter="toggleCheckbox(entryIndex, fieldIndex)" v-on:keyup.space="toggleCheckbox(entryIndex, fieldIndex)" name="name" class="checkbox" v-if="fieldType.type === 'checkbox'" :class="{ checked: entry[fieldIndex] }" @click="toggleCheckbox(entryIndex, fieldIndex)"></div>
+				<div tabindex="0" v-on:keyup.enter="toggleCheckbox(entryIndex, fieldType.fieldTypeId)" v-on:keyup.space="toggleCheckbox(entryIndex, fieldType.fieldTypeId)" name="name" class="checkbox" v-if="fieldType.type === 'checkbox'" :class="{ checked: entry[fieldType.fieldTypeId] }" @click="toggleCheckbox(entryIndex, fieldType.fieldTypeId)"></div>
 
 				<button v-if="fieldType.extraButtons" v-for="buttonInfo in fieldType.extraButtons" type="button" :class="[buttonInfo.style]">{{buttonInfo.icon}}</button>
 				<button v-if="entryIndex + 1 === entries.length && entryIndex + 1 < maxEntries && fieldIndex + 1 === fieldTypes.length" @click="addEntry()" type="button">+</button>
@@ -26,7 +26,7 @@ function Field() {
 export default {
 	data: function() {
 		return {
-			entries: [this.initialEntries]
+			entries: [...this.initialEntries]
 		};
 	},
 	methods: {
@@ -40,21 +40,22 @@ export default {
 		initialEntries: Array
 	},
 	mounted() {
-
+		
 	},
 	methods: {
 		addEntry() {
-			let emptyEntry = [];
+			let emptyEntry = {};
 			this.fieldTypes.forEach((fieldType) => {
-				emptyEntry.push(null);
+				if (fieldType.type === "text" || fieldType.type === "select") emptyEntry[fieldType.fieldTypeId] = "";
+				else if (fieldType.type === "checkbox") emptyEntry[fieldType.fieldTypeId] = false;
 			});
 			this.entries.push(emptyEntry);
 		},
 		removeEntry(index) {
 			this.entries.splice(index, 1);
 		},
-		toggleCheckbox(entryIndex, fieldIndex) {
-			this.$set(this.entries[entryIndex], fieldIndex, !this.entries[entryIndex][fieldIndex]);
+		toggleCheckbox(entryIndex, fieldTypeId) {
+			this.entries[entryIndex][fieldTypeId] = !this.entries[entryIndex][fieldTypeId];
 		}
 	}
 };

frontend/vue/pages/AddAccount.vue

@@ -0,0 +1,39 @@
+<template>
+	<account-form :onSubmit="onSubmit"/>
+</template>
+
+<script>
+import AccountForm from '../components/AccountForm.vue';
+
+import io from "../../io.js";
+
+export default {
+	components: { AccountForm },
+	data: () => {
+		return {
+			
+		}
+	},
+	methods: {
+		onSubmit(account) {
+			this.socket.emit("addAccount", account, (res) => {
+				console.log(res);
+				if (res.status === "success") {
+					this.$router.push("/")
+				}
+			});
+		}
+	},
+	mounted() {
+		io.getSocket(socket => {
+			this.socket = socket;
+
+			
+		});
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

frontend/vue/pages/Homepage.vue

@@ -4,28 +4,25 @@
 		<button @click="importAccountSchema()">Import account schema</button>
 		<hr />
 		<h1>Sites</h1>
-		<form>
-			<field
-				v-for="field in fields"
-				:name="field.name"
-				:minEntries="field.minEntries"
-				:maxEntries="field.maxEntries"
-				:initialEntries="[]"
-				:fieldTypes="field.fieldTypes"/>
-		</form>
+		<router-link to="/add">
+			Add account
+		</router-link>
+		<accounts-list
+			:accounts="accounts"
+		/>
 	</div>
 </template>
 
 <script>
 import Field from '../components/Field.vue';
+import AccountsList from '../components/AccountsList.vue';
 
 import io from "../../io.js";
 
 export default {
-	components: { Field },
+	components: { Field, AccountsList },
 	data: () => {
 		return {
-			fields: [],
 			accounts: [],
 			importAccountSchemaName: ""
 		}
@@ -36,19 +33,18 @@ export default {
 				console.log(res);
 				alert(res.status);
 			});
+		},
+		addAccount() {
+			
 		}
 	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
 
-			socket.emit("getAccountSchema", res => {
-				console.log(res);
-				this.fields = res.schema.fields;
-			});
-
 			socket.emit("getAccounts", res => {
 				this.accounts = res.accounts;
+				//this.accounts = ["test", "test1", "test2"];
 			});
 		});
 	}
@@ -56,7 +52,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-form {
-	width: 400px;
-}
+
 </style>