Mii editor update and server env toggle works

public/assets/js/account.js

@@ -1,3 +1,5 @@
+const updateServerEnvironmentForm = document.querySelector('form.server-selection');
+const serverSelectionSaveButton = document.querySelector('#save-server-selection');
 const editSettingsModal = document.querySelector('.modal-wrapper#edit-settings');
 const editSettingsModalButtonClose = document.getElementById('editSettingsCloseButton');
 
@@ -12,3 +14,42 @@ document.addEventListener('click', event => {
 		editSettingsModal.classList.remove('hidden');
 	}
 });
+
+serverSelectionSaveButton.addEventListener('click', event => {
+	event.preventDefault();
+	const checkedInput = updateServerEnvironmentForm.querySelector('input:checked');
+
+	try {
+		const tokenType = document.cookie.split('; ').find(row => row.startsWith('token_type=')).split('=')[1];
+		const accessToken = document.cookie.split('; ').find(row => row.startsWith('access_token=')).split('=')[1];
+
+		fetch('https://api.pretendo.cc/v1/user', {
+			method: 'POST',
+			headers: {
+				'Accept': 'application/json',
+				'Content-Type': 'application/json',
+				'Authorization': `${tokenType} ${decodeURIComponent(accessToken)}`
+			},
+			body: JSON.stringify({
+				environment: checkedInput.value
+			})
+		})
+			.then(response => response.json())
+			.then(json => {
+				if (!json.error) {
+					// TODO - Make this prettier
+					alert('Saved server environment');
+				} else {
+					console.log(json.error);
+					alert('Failed to server environment');
+				}
+			})
+			.catch(error => {
+				console.log(error);
+				// TODO - Make this prettier
+				alert('Failed to server environment');
+			});
+	} catch (error) {
+		alert(error);
+	}
+});

public/assets/js/miieditor.js

@@ -490,15 +490,15 @@ document
 						data: miiData,
 					}
 				})
-			})
-				.then(({ status }) => {
-					if (status === 200) {
-						window.onbeforeunload = null;
-						window.location.assign('/account');
-					}
-				})
-				.catch(console.log);
-		// CHECK IF MII IS VALID SERVERSIDE
+			}) .then(({ status }) => {
+				// TODO - Make this prettier
+				alert('Mii has been updated. It may take some time for the cached image on the website to update');
+
+				if (status === 200) {
+					window.onbeforeunload = null;
+					window.location.assign('/account');
+				}
+			}).catch(console.log);
 		} catch (error) {
 			alert(error);
 		}

src/routes/account.js

@@ -43,8 +43,9 @@ router.get('/', requireLoginMiddleware, async (request, response) => {
 	const { account } = request;
 	const { pnid } = request;
 
-	renderData.tierName = pnid.get('connections.stripe.tier_name');
-	renderData.tierLevel = pnid.get('connections.stripe.tier_level');
+	renderData.environment = pnid.server_access_level;
+	renderData.tierName = pnid.connections.stripe.tier_name;
+	renderData.tierLevel = pnid.connections.stripe.tier_level;
 	renderData.account = account;
 	renderData.isTester = account.access_level > 0;
 

views/account/account.handlebars

@@ -68,7 +68,11 @@
 				<h2 class="header">{{ locale.account.settings.settingCards.serverEnv }}</h2>
 				<fieldset {{#unless isTester}}disabled{{/unless}}>
 					<form class="server-selection" id="server">
-						<input type="radio" id="prod" name="server_selection" value="prod" checked="{{ eq account.server_access_level 'prod'}}">
+						{{#if (eq environment 'prod')}}
+							<input type="radio" id="prod" name="server_selection" value="prod" checked>
+						{{else}}
+							<input type="radio" id="prod" name="server_selection" value="prod">
+						{{/if}}
 						<label for="prod">
 							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 								<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
@@ -81,7 +85,11 @@
 							<h2>{{ locale.account.settings.settingCards.production }}</h2>
 						</label>
 						{{#if isTester}}
-						<input type="radio" id="beta" name="server_selection" value="beta" checked="{{ neq account.server_access_level 'prod'}}">
+						{{#if (eq environment 'test')}}
+							<input type="radio" id="beta" name="server_selection" value="test" checked>
+						{{else}}
+							<input type="radio" id="beta" name="server_selection" value="test">
+						{{/if}}
 						<label for="beta">
 							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 								<polygon points="2,21 22,21 14,11.5 14,5 10,3 10,11.5"></polygon>
@@ -94,6 +102,7 @@
 			{{#unless isTester}}
 				<p>{{{ locale.account.settings.settingCards.upgradePrompt }}}</p>
 			{{else}}
+				<button class="button secondary" id="save-server-selection">Save</button>
 				<p>{{ locale.account.settings.settingCards.hasAccessPrompt }}</p>
 			{{/unless}}
 			</div>