Add login

src/App.vue

@@ -23,7 +23,7 @@
 	}
 
 	html {
-		background: url(https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?cs=srgb&dl=baume-berge-draussen-443446.jpg&fm=jpg) no-repeat center center fixed;
+		// background: url(https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?cs=srgb&dl=baume-berge-draussen-443446.jpg&fm=jpg) no-repeat center center fixed;
 		background-size: cover;
 	}
 

src/components/NeoChannelPage.vue

@@ -20,7 +20,7 @@
 					<metro-messages ref="messageContainer" @messageSent="sendMessage" />
 				</div>
 
-				<metro-list-view class="user-list" acrylic="acrylic-80">
+				<metro-list-view class="user-list" acrylic="acrylic-80" :key="currentChannel.internalId + userList.length">
 					<template slot="list-items" v-if="currentChannel && userList.length && groupList.length">
 						<div v-for="group in groupList" :key="group.internalId" :data-group-identifier="group.internalId">
 							<div v-if="group.memberIds.some(_ => currentChannel.memberIds.includes(_) )">

src/components/NeoChannelUserListItem.vue

@@ -5,7 +5,7 @@
 		</div>
 		<p class="list-view-item-content">
 			<span class="text-label">{{user.identity.name}}</span>
-			<span class="detail-text-label">{{user.internalId}}</span>
+			<span class="detail-text-label">@{{user.identity.id}}</span>
 		</p>
 	</div>
 </template>
@@ -21,7 +21,7 @@ export default {
 	},
 	mounted() {
 		this.user = this.userList.find(_ => _.internalId === this.memberId);
-		console.log(this.user);
+		//console.log(this.user);
 	},
 	updated() {
 

src/scripts/SocketService.js

@@ -1,6 +1,5 @@
 import Vue from "vue";
 import CryptoJS from "crypto-js";
-import NodeRSA from "node-rsa";
 
 export const SocketService = new Vue({
 	data: {
@@ -46,7 +45,8 @@ export const SocketService = new Vue({
 
 			if (packageObj.type === 1) {
 				this.rsaE = CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(packageObj.content.exponent));
-				this.rsaM = CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(packageObj.content.modulus));
+                this.rsaM = CryptoJS.enc.Hex.stringify(CryptoJS.enc.Base64.parse(packageObj.content.modulus));
+
 				console.log(this.rsaE);
 				console.log(this.rsaM);
 				return;

src/views/Login.vue

@@ -120,6 +120,7 @@
 import { SocketService } from "@/scripts/SocketService";
 import PackageType from '@/scripts/PackageType';
 import { required } from 'vuelidate/lib/validators';
+import CryptoJS from "crypto-js";
 
 export default {
 	name: 'Login',
@@ -168,14 +169,51 @@ export default {
 			this.$router.replace("/");
 		},
 		onPackage(packageObj) {
+            console.debug(Object.keys(PackageType).find(t => PackageType[t] === packageObj.type));
+            console.debug(packageObj.content);
+
 			switch (packageObj.type) {
 				case PackageType.LoginResponse:
-					if (packageObj.content.status == 0) {
-						this.isWorking = false;
-
+                    this.isWorking = false;
+
+					if (packageObj.content.status == 0) {                        
+						// Login successful
 						this.$store.commit("setIdentity", packageObj.content.identity);
 						this.$router.replace("/");
-					}
+					} else if (packageObj.content.status == 1) {
+                        // Unknown user
+                        var unknowUserDialog = new metroUI.ContentDialog("Anmeldefehler", (() => {
+                            return (
+                                <div>
+                                    <p>Der angegebene Benutzer existiert nicht.</p>
+                                </div>
+                            );
+                        })(), [{ text: "Ok" }]);
+
+                        unknowUserDialog.show();
+                    } else if (packageObj.content.status == 2) {
+                        // Incorrect password
+                        var incorrectPasswordDialog = new metroUI.ContentDialog("Anmeldefehler", (() => {
+                            return (
+                                <div>
+                                    <p>Das Passwort ist falsch.</p>
+                                </div>
+                            );
+                        })(), [{ text: "Ok" }]);
+
+                        incorrectPasswordDialog.show();
+                    } else if (packageObj.content.status == 3) {
+                        // Unauthorized
+                        var unauthorizedDialog = new metroUI.ContentDialog("Anmeldefehler", (() => {
+                            return (
+                                <div>
+                                    <p>Du bist nicht berechtigt dich anzumelden.</p>
+                                </div>
+                            );
+                        })(), [{ text: "Ok" }]);
+
+                        unauthorizedDialog.show();
+                    }
 					break;
 				default: break;
 			}
@@ -186,7 +224,14 @@ export default {
 		},
 
 		login() {
-			this.isWorking = true;
+            this.isWorking = true;
+            SocketService.send({
+                type: PackageType.MemberLogin,
+                content: {
+                    user: this.user.username,
+                    password: CryptoJS.enc.Base64.stringify(CryptoJS.SHA512(this.user.password))
+                }
+            });
 		},
 		connectAsGuest() {
 			this.isWorking = true;

src/views/Root.vue

@@ -92,7 +92,9 @@ export default {
 	},
 	methods: {
 		onPackage(packageObj) {
-			console.log(packageObj);
+            console.debug(Object.keys(PackageType).find(t => PackageType[t] === packageObj.type));
+            console.debug(packageObj.content);
+
 			switch (packageObj.type) {
 				case PackageType.ChannelListUpdate:
 					this.$store.commit("setChannelList", packageObj.content);