Make subscription work

src/app.js

@@ -3,7 +3,7 @@ import Api from '@scripts/api';
 import Lang from '@scripts/lang';
 import Projects from '@scripts/projects';
 import User from '@scripts/user';
-import { createApp } from 'vue';
+import { createApp, reactive } from 'vue';
 
 //Main template
 import Spot from './Spot';
@@ -16,7 +16,7 @@ const appConfig = JSON.parse(document.getElementById('app-config').textContent);
 
 //Instances
 const oProjects = new Projects(appConfig.projects);
-const oUser = new User(appConfig.user, appConfig.consts.default_timezone);
+const oUser = reactive(new User(appConfig.user, appConfig.consts.default_timezone));
 const oLang = new Lang({translations: appConfig.consts.lang, prefix: appConfig.consts.lang_prefix});
 const oApi = new Api({
 	server: appConfig.consts.server,

src/components/project.vue

@@ -511,15 +511,21 @@ export default {
 			}).text(asInfo.lat_dms+' '+asInfo.lon_dms);
 		},
 		async manageSubs() {
+			if(this.nlLoading) return;
+
 			var regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 			if(!regexEmail.test(this.user.email)) this.nlFeedbacks.push({type:'error', 'msg':this.lang.get('newsletter.invalid_email')});
 			else {
-				this.api.get(this.nlAction, {'email': this.user.email, 'name': this.user.name})
-					.then((asUser, sDesc) => {
-						this.nlFeedbacks.push('success', sDesc);
-						Object.assign(this.user, asUser);
+				const sAction = this.nlAction;
+				this.nlLoading = true;
+
+				this.api.request(sAction, {'email': this.user.email, 'name': this.user.name})
+					.then((asResponse) => {
+						this.nlFeedbacks.push({type: asResponse.result, msg: asResponse.desc});
+						this.user.setInfo(asResponse.data);
 					})
-					.catch((sDesc) => {this.nlFeedbacks.push('error', sDesc);});
+					.catch((sDesc) => {this.nlFeedbacks.push({type:'error', msg:sDesc?.message || sDesc});})
+					.finally(() => {this.nlLoading = false;});
 			}
 		},
 		toggleFeedPanel(bShow, sMapAction) {

src/scripts/api.js

@@ -9,6 +9,11 @@ export default class Api {
 	}
 
 	async get(action, params = {}) {
+		const response = await this.request(action, params);
+		return response.data;
+	}
+
+	async request(action, params = {}) {
 		const requestParams = {
 			...params,
 			a: action,
@@ -34,6 +39,6 @@ export default class Api {
 			throw response.desc;
 		}
 
-		return response.data;
+		return response;
 	}
 }

src/scripts/user.js

@@ -1,10 +1,14 @@
 export default class User {
 
 	constructor(asUserInfo = {}, sDefaultTimeZone = '') {
-		Object.assign(this, asUserInfo);
+		this.setInfo(asUserInfo);
 		this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.timezone || sDefaultTimeZone;
 	}
 
+	setInfo(asUserInfo = {}) {
+		Object.assign(this, asUserInfo);
+	}
+
 	hasClearance(sClearance) {
 		return this.clearance >= sClearance;
 	}

src/styles/_page.project.settings.scss

@@ -135,7 +135,8 @@
 							&.loading {
 								background-color: color.$message;
 								color: color.$post-input-bg;
-								span {
+
+								.spot-icon {
 									@extend .flicker;
 								}
 							}