From fb53ad195c91c683731a06474f417324b64af7d4 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 1 Sep 2021 02:17:56 +0100
Subject: [PATCH] Improve login ux on smaller screens

- Hide other UI elements when modal opens, to reduce clutter
- Hide login required modal if the server list is opened, to allow switching servers without overlapping the modal
- Use tel input for registration code
---
 src/App.vue                           | 35 +++++++++++++++++++++------
 src/components/login/RegisterForm.vue |  2 +-
 src/store/mutations.ts                |  4 +++
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9110bc9..424df36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
 <template>
 	<Map></Map>
 	<ChatBox v-if="chatBoxEnabled" v-show="chatBoxEnabled && chatVisible"></ChatBox>
-	<LoginModal v-if="loginEnabled" :required="loginRequired"></LoginModal>
+	<LoginModal v-if="loginEnabled" v-show="loginModalVisible" :required="loginRequired"></LoginModal>
 	<Sidebar></Sidebar>
 	<notifications position="bottom center" :speed="250" :max="3" :ignoreDuplicates="true" classes="notification" />
 </template>
@@ -56,9 +56,14 @@ export default defineComponent({
 			chatBoxEnabled = computed(() => store.state.components.chatBox),
 			chatVisible = computed(() => store.state.ui.visibleElements.has('chat')),
 
-			loginEnabled = computed(() => store.state.components.login),
-			loggedIn = computed(() => store.state.loggedIn),
-			loginRequired = ref(false),
+			loginEnabled = computed(() => store.state.components.login), //Whether logging in is enabled for the current server
+			loggedIn = computed(() => store.state.loggedIn), //Whether the user is currently logged in
+			loginRequired = ref(false), //Whether logging is required to view the current server
+
+			//Hide the login modal if we are logged out on a login-required server, but the server list is open
+			//Allows switching servers without the modal overlapping
+			loginModalVisible = computed(() => store.state.ui.visibleModal === 'login'
+				&& (!loginRequired.value || !store.state.ui.visibleElements.has('maps'))),
 
 			loading = ref(false),
 			loadingAttempts = ref(0),
@@ -91,14 +96,13 @@ export default defineComponent({
 						return;
 					}
 
-					//Show login screen if required
+					//Logging in is required, show login modal
 					if(e.message === 'login-required') {
 						loginRequired.value = true;
-						store.commit(MutationTypes.SHOW_UI_MODAL, 'login');
-						notify('Login required');
 						return;
 					}
 
+					//Any other errors
 					const error = `Failed to load server configuration for '${store.state.currentServer!.id}'`;
 					console.error(`${error}:`, e);
 					showSplashError(`${error}\n${e}`, false, ++loadingAttempts.value);
@@ -141,6 +145,11 @@ export default defineComponent({
 
 				let element: LiveAtlasUIElement;
 
+				//Disable shortcuts if modal is open - except login required to allow server list toggling
+				if(store.state.ui.visibleModal && !loginRequired.value) {
+					return;
+				}
+
 				switch(e.key) {
 					case 'M':
 						element = 'maps';
@@ -190,6 +199,17 @@ export default defineComponent({
 				console.log('Login state changed. Reloading configuration');
 				await loadConfiguration();
 			}
+		});
+		watch(loginRequired, (newValue) => {
+			if(newValue) {
+				store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {
+					element: 'maps',
+					state: false,
+				});
+				store.commit(MutationTypes.SHOW_UI_MODAL, 'login');
+				notify('Login required');
+				showSplashError('Login required', true, 1);
+			}
 		})
 
 		onMounted(() => loadConfiguration());
@@ -217,6 +237,7 @@ export default defineComponent({
 			chatVisible,
 			loginEnabled,
 			loginRequired,
+			loginModalVisible
 		}
 	},
 });
diff --git a/src/components/login/RegisterForm.vue b/src/components/login/RegisterForm.vue
index 8df65ba..0aec753 100644
--- a/src/components/login/RegisterForm.vue
+++ b/src/components/login/RegisterForm.vue
@@ -40,7 +40,7 @@
 
 		<div class="form__group">
 			<label for="register-code" class="form__label">{{ messageRegisterCodeLabel }}</label>
-			<input id="register-code" type="text" name="code" v-model="valueCode" required />
+			<input id="register-code" type="tel" name="code" minlength="9" maxlength="9" v-model="valueCode" required />
 		</div>
 
 		<div v-if="error" role="alert" aria-live="assertive" class="form__group alert">{{ error }}</div>
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index a7a0d41..93aae89 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -595,6 +595,10 @@ export const mutations: MutationTree<State> & Mutations = {
 	},
 
 	[MutationTypes.SHOW_UI_MODAL](state: State, modal: LiveAtlasUIModal): void {
+		if(state.ui.smallScreen) {
+			state.ui.visibleElements.clear();
+		}
+
 		state.ui.visibleModal = modal;
 	},