fix: settings page (on production mode primarily/solely) had race condition where inputs wouldn't be filled

frontend/src/pages/Settings/Tabs/Account.vue

@@ -26,7 +26,7 @@ const { socket } = useWebsocketsStore();
 const saveButton = ref();
 
 const { userId } = storeToRefs(userAuthStore);
-const { originalUser, modifiedUser } = settingsStore;
+const { originalUser, modifiedUser } = storeToRefs(settingsStore);
 
 const validation = reactive({
 	username: {
@@ -50,7 +50,7 @@ const onInput = inputName => {
 };
 
 const changeEmail = () => {
-	const email = modifiedUser.email.address;
+	const email = modifiedUser.value.email.address;
 	if (!_validation.isLength(email, 3, 254))
 		return new Toast("Email must have between 3 and 254 characters.");
 	if (
@@ -79,7 +79,7 @@ const changeEmail = () => {
 };
 
 const changeUsername = () => {
-	const { username } = modifiedUser;
+	const { username } = modifiedUser.value;
 
 	if (!_validation.isLength(username, 2, 32))
 		return new Toast("Username must have between 2 and 32 characters.");
@@ -119,9 +119,9 @@ const changeUsername = () => {
 };
 
 const saveChanges = () => {
-	const usernameChanged = modifiedUser.username !== originalUser.username;
+	const usernameChanged = modifiedUser.value.username !== originalUser.value.username;
 	const emailAddressChanged =
-		modifiedUser.email.address !== originalUser.email.address;
+		modifiedUser.value.email.address !== originalUser.value.email.address;
 
 	if (usernameChanged) changeUsername();
 
@@ -141,7 +141,7 @@ const removeActivities = () => {
 };
 
 watch(
-	() => modifiedUser.username,
+	() => modifiedUser.value.username,
 	value => {
 		// const value = newModifiedUser.username;
 
@@ -151,7 +151,7 @@ watch(
 			validation.username.valid = false;
 		} else if (
 			!_validation.regex.azAZ09_.test(value) &&
-			value !== originalUser.username // Sometimes a username pulled from OIDC won't succeed validation
+			value !== originalUser.value.username // Sometimes a username pulled from OIDC won't succeed validation
 		) {
 			validation.username.message =
 				"Invalid format. Allowed characters: a-z, A-Z, 0-9 and _.";
@@ -168,7 +168,7 @@ watch(
 );
 
 watch(
-	() => modifiedUser.email.address,
+	() => modifiedUser.value.email?.address,
 	value => {
 		// const value = newModifiedUser.email.address;
 

frontend/src/pages/Settings/Tabs/Profile.vue

@@ -22,13 +22,13 @@ const { socket } = useWebsocketsStore();
 const saveButton = ref();
 
 const { userId } = storeToRefs(userAuthStore);
-const { originalUser, modifiedUser } = settingsStore;
+const { originalUser, modifiedUser } = storeToRefs(settingsStore);
 
 const { updateOriginalUser } = settingsStore;
 
 const changeName = () => {
-	modifiedUser.name = modifiedUser.name.replaceAll(/ +/g, " ").trim();
-	const { name } = modifiedUser;
+	modifiedUser.value.name = modifiedUser.value.name.replaceAll(/ +/g, " ").trim();
+	const { name } = modifiedUser.value;
 
 	if (!validation.isLength(name, 1, 64))
 		return new Toast("Name must have between 1 and 64 characters.");
@@ -62,7 +62,7 @@ const changeName = () => {
 };
 
 const changeLocation = () => {
-	const { location } = modifiedUser;
+	const { location } = modifiedUser.value;
 
 	if (!validation.isLength(location, 0, 50))
 		return new Toast("Location must have between 0 and 50 characters.");
@@ -92,7 +92,7 @@ const changeLocation = () => {
 };
 
 const changeBio = () => {
-	const { bio } = modifiedUser;
+	const { bio } = modifiedUser.value;
 
 	if (!validation.isLength(bio, 0, 200))
 		return new Toast("Bio must have between 0 and 200 characters.");
@@ -117,7 +117,7 @@ const changeBio = () => {
 };
 
 const changeAvatar = () => {
-	const { avatar } = modifiedUser;
+	const { avatar } = modifiedUser.value;
 
 	saveButton.value.status = "disabled";
 
@@ -139,12 +139,12 @@ const changeAvatar = () => {
 };
 
 const saveChanges = () => {
-	const nameChanged = modifiedUser.name !== originalUser.name;
-	const locationChanged = modifiedUser.location !== originalUser.location;
-	const bioChanged = modifiedUser.bio !== originalUser.bio;
+	const nameChanged = modifiedUser.value.name !== originalUser.value.name;
+	const locationChanged = modifiedUser.value.location !== originalUser.value.location;
+	const bioChanged = modifiedUser.value.bio !== originalUser.value.bio;
 	const avatarChanged =
-		modifiedUser.avatar.type !== originalUser.avatar.type ||
-		modifiedUser.avatar.color !== originalUser.avatar.color;
+		modifiedUser.value.avatar.type !== originalUser.value.avatar.type ||
+		modifiedUser.value.avatar.color !== originalUser.value.avatar.color;
 
 	if (nameChanged) changeName();
 	if (locationChanged) changeLocation();