Fixed a bug where authentication would fail and the client would hang…

… with a spinner

fixes #1

frontend/src/Pages/Connections/ConnectionCard.vue

@@ -1,8 +1,11 @@
 <template>
 	<div class="flex flex-col w-full bg-main-800 rounded overflow-hidden shadow">
 
-		<div class="flex flex-row items-center justify-center bg-red-500 px-3 py-1.5" v-if="connectionError">
-			<p class="text-white font-semibold tracking-wide">{{ connectionError }}</p>
+		<div class="flex flex-row items-center justify-center bg-red-500 space-x-2 px-3 py-1.5" v-if="connectionError">
+			<p class="text-white text-xs font-semibold tracking-wide">
+				Failed to connect:
+			</p>
+			<p class="text-white text-sm font-semibold tracking-wide">{{ connectionError }}</p>
 		</div>
 
 		<div class="p-6 flex flex-row justify-between w-full">
@@ -105,11 +108,12 @@ async function connect() {
 		clearConnectionError();
 	}
 
-	if (await connectionStore.connect(props.connection)) {
+	const result = await connectionStore.connect(props.connection);
+	if(result) {
 		return;
 	}
 
-	connectionError.value = "Failed to connect to rpc socket";
+	connectionError.value = connectionStore.$connectionResult.error || "RPC Connection failed";
 
 	timeout = setTimeout(() => {
 		connectionError.value = null;

frontend/src/Services/Database/Database.ts

@@ -9,6 +9,11 @@ interface IDatabaseState {
 	config: SurrealDbConfig;
 }
 
+export class ConnectionResult {
+	connected: boolean;
+	error: string;
+}
+
 class Database {
 	private state: UnwrapNestedRefs<IDatabaseState>;
 
@@ -25,14 +30,17 @@ class Database {
 		return this.state.connected;
 	}
 
-	connect(config: SurrealDbConfig) {
+	connect(config: SurrealDbConfig) : Promise<ConnectionResult> {
 		if (this.connected) {
 			return;
 		}
 
 		this.state.config = config;
 
-		return new Promise((resolve, reject) => {
+		return new Promise(async (resolve, reject) => {
+
+			const result = new ConnectionResult();
+
 			const closeHandle = (error) => {
 				console.error("Socket connection errored.");
 				this.disconnect();
@@ -41,16 +49,25 @@ class Database {
 
 			this.database.once("close", closeHandle);
 
-			this.database.connect(`${this.state.config.host}/rpc`)
-				.then(() => this.database.signin(this.state.config as RootAuth))
-				.then(() => this.database.use(this.state.config.namespace, this.state.config.database))
-				.then(() => {
-					this.state.connected = true;
+			await this.database.connect(`${this.state.config.host}/rpc`);
+
+			try {
+				await this.database.signin(this.state.config as RootAuth);
+			} catch (error) {
+				result.connected = false;
+				result.error     = error.message;
+			}
+
+			if (!result.error) {
+				await this.database.use(this.state.config.namespace, this.state.config.database);
+
+				this.state.connected = true;
+
+				this.database.off("close", closeHandle);
+			}
 
-					this.database.off("close", closeHandle);
 
-					resolve(true);
-				});
+			resolve(result);
 		});
 	}
 

frontend/src/Stores/ConnectionStore.ts

@@ -2,7 +2,7 @@ import {Store, StoreManager} from "@idevelopthings/vue-class-stores/vue";
 import {Config} from "../../wailsjs/go/models";
 import {Add, SetCurrent} from "../../wailsjs/go/Config/Connections";
 import {AsyncFunc} from "../Services/AsyncProcessor";
-import db from "../Services/Database/Database";
+import db, {ConnectionResult} from "../Services/Database/Database";
 import {schemaStore} from "./SchemaStore";
 import {SurrealSchema} from "surrealdb.schema";
 
@@ -13,6 +13,7 @@ interface IConnectionStore {
 	connections: Config.Connections;
 	current?: Config.Connection;
 	connecting: string;
+	connectionResult: ConnectionResult | null;
 }
 
 class ConnectionStore extends Store<ConnectionStore, IConnectionStore>() {
@@ -24,6 +25,8 @@ class ConnectionStore extends Store<ConnectionStore, IConnectionStore>() {
 
 			current    : null,
 			connecting : null,
+
+			connectionResult : null,
 		};
 	}
 
@@ -101,8 +104,14 @@ class ConnectionStore extends Store<ConnectionStore, IConnectionStore>() {
 			database  : connection.database,
 		};
 
+
 		try {
-			await db.connect(config);
+			this.state.connectionResult = await db.connect(config);
+
+			if (this.state.connectionResult.error) {
+				this.state.connecting = null;
+				return false;
+			}
 		} catch (e) {
 			console.error("Failed to connect to db: ", e);
 			this.state.connecting = null;