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>