From ca3d3c7442bfa686075871e0d5b662789a55433e Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 1 Sep 2021 02:15:00 +0100
Subject: [PATCH] Update chat login button to use login modal

---
 index.html                 |  3 +--
 src/components/ChatBox.vue | 16 ++++++++++------
 src/index.d.ts             |  1 -
 src/store/mutations.ts     |  1 -
 src/store/state.ts         |  1 -
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index b4cd5d2..98a81fb 100644
--- a/index.html
+++ b/index.html
@@ -86,8 +86,7 @@
             messages: {
             	chatNoMessages: 'No chat messages yet...',
                 chatTitle: 'Chat',
-                chatLogin: 'Please {{link}} to send chat messages',
-                chatLoginLink: 'login',
+                chatLogin: 'Please login to send chat messages',
                 chatSend: 'Send',
                 chatPlaceholder: 'Type your chat message here...',
                 chatErrorUnknown: 'Unexpected error while sending chat message',
diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
index 451b735..c7cce79 100644
--- a/src/components/ChatBox.vue
+++ b/src/components/ChatBox.vue
@@ -26,7 +26,7 @@
 					:placeholder="messagePlaceholder"  :disabled="sendingMessage">
 			<button class="chat__send" :disabled="!enteredMessage || sendingMessage">{{ messageSend }}</button>
 		</form>
-		<div v-if="loginRequired" class="chat__login" v-html="messageLogin"></div>
+		<button type="button" v-if="loginRequired" class="chat__login" @click="login">{{ messageLogin }}</button>
 	</section>
 </template>
 
@@ -36,6 +36,7 @@
 	import ChatMessage from "@/components/chat/ChatMessage.vue";
 	import {ActionTypes} from "@/store/action-types";
 	import ChatError from "@/errors/ChatError";
+	import {MutationTypes} from "@/store/mutation-types";
 
 	export default defineComponent({
 		components: {
@@ -69,8 +70,7 @@
 				messageSend = computed(() => store.state.messages.chatSend),
 				messagePlaceholder = computed(() => store.state.messages.chatPlaceholder),
 				messageNoMessages = computed(() => store.state.messages.chatNoMessages),
-				messageLogin = computed(() => store.state.messages.chatLogin.replace(
-					'{{link}}', `<a href="login.html">${store.state.messages.chatLoginLink}</a>`)),
+				messageLogin = computed(() => store.state.messages.chatLogin),
 
 				sendMessage = async () => {
 					const message = enteredMessage.value.trim().substring(0, maxMessageLength.value);
@@ -97,7 +97,9 @@
 
 						requestAnimationFrame(() => chatInput.value!.focus());
 					}
-				};
+				},
+
+				login = () => store.commit(MutationTypes.SHOW_UI_MODAL, 'login');
 
 			watch(chatBoxVisible, newValue => {
 				if(newValue && sendingEnabled.value) {
@@ -109,6 +111,7 @@
 				chatInput,
 				enteredMessage,
 				sendMessage,
+				login,
 				chatMessages,
 				loginRequired,
 				sendingEnabled,
@@ -194,8 +197,9 @@
 			background-color: var(--background-light);
 			color: var(--text-subtle);
 			margin: 1.5rem -1.5rem -1.5rem;
-			border-bottom-left-radius: var(--border-radius);
-			border-bottom-right-radius: var(--border-radius);
+			text-align: left;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
 		}
 
 		@media (max-width: 400px), (max-height: 480px) {
diff --git a/src/index.d.ts b/src/index.d.ts
index bbb3f67..360eb7c 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -72,7 +72,6 @@ interface LiveAtlasGlobalMessageConfig {
 	chatNoMessages: string;
 	chatTitle: string;
 	chatLogin: string;
-	chatLoginLink: string;
 	chatSend: string;
 	chatPlaceholder: string;
 	chatErrorDisabled: string;
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 7948b65..a7a0d41 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -108,7 +108,6 @@ export const mutations: MutationTree<State> & Mutations = {
 		const messages: LiveAtlasGlobalMessageConfig = {
 			chatTitle: messageConfig.chatTitle || '',
 			chatLogin: messageConfig.chatLogin || '',
-			chatLoginLink: messageConfig.chatLoginLink || '',
 			chatNoMessages: messageConfig.chatNoMessages || '',
 			chatSend: messageConfig.chatSend || '',
 			chatPlaceholder: messageConfig.chatPlaceholder || '',
diff --git a/src/store/state.ts b/src/store/state.ts
index dc3685a..f88a7ba 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -113,7 +113,6 @@ export const state: State = {
 		chatNoMessages: '',
 		chatTitle: '',
 		chatLogin: '',
-		chatLoginLink: '',
 		chatSend: '',
 		chatPlaceholder: '',
 		chatErrorNotAllowed: '',