Make newsletter own component

src/components/project.vue

@@ -9,15 +9,15 @@ import { getOuterWidth } from '@scripts/common';
 
 import SpotIcon from '@components/spotIcon';
 import SpotIconStack from '@components/spotIconStack';
-import SpotButton from '@components/spotButton';
 import ProjectPost from '@components/projectPost';
 import ProjectPopup from '@components/projectPopup';
+import ProjectNewsletter from '@components/projectNewsletter';
 
 export default {
 	components: {
 		SpotIcon,
-		SpotButton,
 		ProjectPost,
+		ProjectNewsletter,
 		Simplebar
 	},
 	data() {
@@ -39,8 +39,6 @@ export default {
 			currProject: {},
 			modeHisto: false,
 			posts: [],
-			nlFeedbacks: [],
-			nlLoading: false,
 			baseMaps: {},
 			baseMap: null,
 			map: null,
@@ -58,18 +56,6 @@ export default {
 				this.feedPanelOpen?'with-feed':'',
 				this.settingsPanelOpen?'with-settings':''
 			].filter(n => n).join(' ');
-		},
-		nlClasses() {
-			return [
-				this.nlAction,
-				this.nlLoading?'loading':''
-			].filter(n => n).join(' ');
-		},
-		subscribed() {
-			return this.user.id_user > 0;
-		},
-		nlAction() {
-			return this.subscribed?'unsubscribe':'subscribe';
 		}
 	},
 	watch: {
@@ -510,24 +496,6 @@ export default {
 				rel: 'noreferrer noopener'
 			}).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 {
-				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({type:'error', msg:sDesc?.message || sDesc});})
-					.finally(() => {this.nlLoading = false;});
-			}
-		},
 		toggleFeedPanel(bShow, sMapAction) {
 			let bOldValue = this.feedPanelOpen;
 			this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
@@ -631,18 +599,8 @@ export default {
 								</div>
 							</div>
 						</div>
-						<div class="settings-section newsletter">
-							<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
-							<div class="newsletter-form">
-								<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="nlLoading || subscribed" />
-								<SpotButton id="nl_btn" :classes="nlClasses" :title="lang.get('newsletter.'+nlAction)" :icon="nlAction" @click="manageSubs" />
-							</div>
-							<div id="settings-feedback" class="feedback">
-								<p v-for="feedback in nlFeedbacks" :class="feedback.type">
-									<SpotIcon :icon="feedback.type" :text="feedback.msg" />
-								</p>
-							</div>
-							{{ lang.get('newsletter.'+(subscribed?'subscribed':'unsubscribed')+'_desc') }}
+						<div class="settings-section">
+							<ProjectNewsletter />
 						</div>
 						<div class="settings-section admin" v-if="user.hasClearance(consts.clearances.admin)">
 							<h1><SpotIcon :icon="'admin'" width="fixed" :text="lang.get('admin.title')" /></h1>

src/components/projectNewsletter.vue

@@ -0,0 +1,69 @@
+<script>
+import SpotButton from '@components/spotButton';
+import SpotIcon from '@components/spotIcon';
+
+export default {
+	components: {
+		SpotButton,
+		SpotIcon
+	},
+	data() {
+		return {
+			feedbacks: [],
+			loading: false
+		};
+	},
+	computed: {
+		buttonClasses() {
+			return [
+				'manage',
+				this.action,
+				this.loading?'loading':''
+			].filter(n => n).join(' ');
+		},
+		subscribed() {
+			return this.user.id_user > 0;
+		},
+		action() {
+			return this.subscribed?'unsubscribe':'subscribe';
+		}
+	},
+	inject: ['api', 'lang', 'user'],
+	methods: {
+		manage() {
+			if(this.loading) 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.feedbacks.push({type:'error', 'msg':this.lang.get('newsletter.invalid_email')});
+			else {
+				const sAction = this.action;
+				this.loading = true;
+
+				this.api.request(sAction, {'email': this.user.email, 'name': this.user.name})
+					.then((asResponse) => {
+						this.feedbacks.push({type: asResponse.result, msg: asResponse.desc});
+						this.user.setInfo(asResponse.data);
+					})
+					.catch((sDesc) => {this.feedbacks.push({type:'error', msg:sDesc?.message || sDesc});})
+					.finally(() => {this.loading = false;});
+			}
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="newsletter">
+		<h1><SpotIcon :icon="'newsletter'" width="fixed" :text="lang.get('newsletter.title')" /></h1>
+		<div class="newsletter-form">
+			<input type="email" name="email" id="email" :placeholder="lang.get('newsletter.email_placeholder')" v-model="user.email" :disabled="loading || subscribed" />
+			<SpotButton :classes="buttonClasses" :title="lang.get('newsletter.'+action)" :icon="action" @click="manage" />
+		</div>
+		<div id="settings-feedback" class="feedback">
+			<p v-for="feedback in feedbacks" :key="feedback.type + '-' + feedback.msg" :class="feedback.type">
+				<SpotIcon :icon="feedback.type" :text="feedback.msg" />
+			</p>
+		</div>
+		{{ lang.get('newsletter.'+(subscribed?'subscribed':'unsubscribed')+'_desc') }}
+	</div>
+</template>

src/styles/_page.project.settings.scss

@@ -112,7 +112,7 @@
 					}
 				}
 
-				&.newsletter {
+				.newsletter {
 					.newsletter-form {
 						display: flex;
 						align-items: stretch;
@@ -129,7 +129,7 @@
 							}
 						}
 
-						button#nl_btn {
+						button.manage {
 							flex: 0 0 auto;
 
 							&.loading {