[Trunk|Connect]: 1. Add a new class contact form. 2. Add new module for reCaptcha. 3. Validate fields

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@55267 d315682c-612b-4755-9ff5-7f18f6832af3

deploy/beta-properties.json

@@ -72,6 +72,7 @@
   "searchLinkToOrganization" : "/search/organization?organizationId=",
   "searchLinkToOrp" : "/search/other?orpId=",
 
+  "searchLinkToCommunities" : "/search/find/communities",
   "searchLinkToPublications" : "/search/find/publications",
   "searchLinkToDataProviders" : "/search/find/dataproviders",
   "searchLinkToProjects" : "/search/find/projects",
@@ -104,5 +105,9 @@
   "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
   "claimsInformationLink": "https://beta.openaire.eu/linking",
 
-  "shareInZenodoPage": "/participate/share-zenodo?communityId="
+  "shareInZenodoPage": "/participate/share-zenodo?communityId=",
+
+  "reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
+
+  "admins" : []
 }

package.json

@@ -35,13 +35,13 @@
     "@nguniversal/express-engine": "^1.0.0-beta.3",
     "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
     "angular-datatables": "^4.4.0",
-    "angular-google-recaptcha": "^1.0.3",
     "citation-js": "^0.3.4",
     "clipboard": "^1.5.16",
     "core-js": "^2.4.1",
     "datatables.net": "^1.10.16",
     "datatables.net-dt": "^1.10.16",
     "jquery": "^3.2.1",
+    "ng-recaptcha": "^3.0.5",
     "ng2-ckeditor": "1.1.9",
     "ngx-json-ld": "0.1.6",
     "rxjs": "^5.4.2",

src/app/contact/contact.component.html

@@ -17,10 +17,12 @@
                                     Surname <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
                                 <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="name">
+                                    <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
+                                    <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
                                 </div>
                                 <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="surname">
+                                    <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
+                                    <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
                                 </div>
                                 <label class="uk-width-1-2 uk-h5 uk-text-bold">
                                     Email <span class="uk-text-danger uk-text-bold">*</span>
@@ -29,27 +31,38 @@
                                     Affiliation <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
                                 <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <input class="uk-input" type="text" placeholder="Your Email" [(ngModel)]="sender">
+                                    <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">
+                                        <span *ngIf="sender.errors.required">Please add an email. </span>
+                                        <span *ngIf="!sender.errors.required && sender.errors.email">Please add a valid email. </span>
+                                    </div>
+                                    <input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required email #sender="ngModel">
                                 </div>
                                 <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="affiliation">
+                                    <div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
+                                    <input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
                                 </div>
                                 <label class="uk-width-1-1 uk-h5 uk-text-bold">
                                     Community Name <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
                                 <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="community">
+                                    <div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
+                                    <input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
                                 </div>
                                 <label class="uk-width-1-1 uk-h5 uk-text-bold">
                                     Message <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
                                 <div class="uk-width-1-1 uk-margin-remove-top">
-                                    <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="message"></textarea>
+                                    <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
+                                    <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
+                                </div>
+                                <div class="uk-width-1-2">
+                                    <div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
+                                    <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
                                 </div>
-                                <recaptcha class="uk-width-1-2" [(ngModel)]="recaptcha"></recaptcha>
                                 <div class="uk-width-1-2 uk-text-danger uk-text-bold uk-text-right">* Required fields</div>
                                 <div class="uk-width-1-1">
                                     <button class="uk-button portal-button" (click)="send()">Send</button>
+                                    <button class="uk-button uk-button-default uk-margin-auto-top" (click)="reset()">Reset</button>
                                 </div>
                             </div>
                         </div>
@@ -68,7 +81,3 @@
         </div>
     </div>
 </div>
-<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
-<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
-<div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div>

src/app/contact/contact.component.ts

@@ -4,13 +4,15 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {EmailService} from "../openaireLibrary/utils/email/email.service";
 import {Email} from "../openaireLibrary/utils/email/email";
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
+import {ContactForm} from "./contact-form";
+import {Composer} from "../openaireLibrary/utils/email/composer";
 
 @Component({
     selector: 'contact',
     templateUrl: './contact.component.html',
 })
 
-export class ContactComponent implements OnInit{
+export class ContactComponent implements OnInit {
 
     @Input('group')
     myForm: FormGroup;
@@ -22,26 +24,27 @@ export class ContactComponent implements OnInit{
     public successfulSaveMessage = '';
     public successfulResetMessage = '';
 
-    public hasChanged = false;
+    public isSubmitted = false;
-    public res = [];
     public email: Email;
     public emailToInform: Email;
     public note = '';
     public properties: EnvProperties = null;
 
-    public name = '';
+    public contactForm: ContactForm = new ContactForm();
-    public surname = '';
+    public recaptchaToken: string = null;
-    public sender = '';
+    @ViewChild('name') name;
-    public affiliation = '';
+    @ViewChild('surname') surname;
-    public community = '';
+    @ViewChild('sender') sender;
-    public message = '';
+    @ViewChild('affiliation') affiliation;
-    public recaptcha: any = null;
+    @ViewChild('community') community;
+    @ViewChild('message') message;
+    @ViewChild('recaptcha') recaptcha;
 
-    constructor (private element: ElementRef,
+    constructor(private element: ElementRef,
                 private route: ActivatedRoute,
                 private _router: Router,
-                 public _fb: FormBuilder,
+                private _emailService: EmailService) {
-                 private _emailService: EmailService) { }
+    }
 
 
     ngOnInit() {
@@ -60,99 +63,38 @@ export class ContactComponent implements OnInit{
         }
     }
 
-    public resetForm() {
-
-    }
-
     public send() {
-        console.log(this.recaptcha);
+        this.isSubmitted = true;
+        if(!this.name.invalid && !this.surname.invalid && !this.sender.invalid &&
+            !this.affiliation.invalid && !this.message.invalid && this.contactForm.recaptcha) {
+            this.sendMail(this.properties.admins);
         }
-
-   /* private sendMailToNewManagers(managers: any) {
-        this._emailService.sendEmail(this.properties.adminToolsAPIURL + '/sendMail/',
-                                     Composer.composeEmailForNewManager(this.communityId,
-                                         this.community.title, managers)).subscribe(
-              res => {
-                // console.log("The email has been sent successfully!")
-              },
-              error => console.log(error)
-        );
-    }*/
-
-
-    private getNonEmptyItems(data: string[]): string[] {
-        const length = data.length;
-        const arrayNonEmpty = new Array<string>();
-
-        let j = 0;
-        for (let i = 0; i < length; i++) {
-            if (this.isEmpty(data[i])) {
-                 // console.log(data[i]);
-            } else if (this.isNonEmpty(data[i])) {
-                 arrayNonEmpty[j] = data[i];
-                 j++;
-                 // console.log(data[i]);
-            }
-        }
-        return arrayNonEmpty;
-    }
-
-    private hasFilled(data: any): boolean {
-        if (this.isNonEmpty(data) && !this.isEmpty(data)) {
-            return true;
-        }
-        return false;
-    }
-
-    private isEmpty(data: string): boolean {
-        if (data !== undefined && !data.replace(/\s/g, '').length) {
-            return true;
-        } else {
-            return false;
-
-        }
-    }
-
-    private isNonEmpty(data: string): boolean {
-        if (data !== undefined && data != null) {
-            return true;
-        } else {
-            return false;
-
-}
-    }
-
-    private change() {
-        this.hasChanged = true;
-        this.successfulSaveMessage = '';
-        this.successfulResetMessage = '';
-    }
-
-    private resetChange() {
-        this.hasChanged = false;
-    }
-
-    public get form() {
-        return this._fb.group({
-            _id : '',
-            name : ['', Validators.required]
-        });
     }
 
     public reset() {
-        this.myForm.patchValue({
+        this.contactForm = new ContactForm();
-            name : '',
+        this.recaptcha.reset();
-            _id : ''
-        });
     }
 
-    handleUpdateError(message: string, error) {
+     private sendMail(admins: any) {
-        this.updateErrorMessage = message;
+         this._emailService.sendEmail(this.properties.adminToolsAPIURL + '/sendMail/',
-        console.log('Server responded: ' + error);
+                                      Composer.composeEmailForNewCommunity(this.contactForm, admins)).subscribe(
-
+               res => {
-        this.showLoading = false;
+                  console.log(res)
+               },
+               error => console.log(error)
+         );
      }
 
+
+    public handleRecaptcha(captchaResponse: string) {
+        this.recaptchaToken = captchaResponse;
+        if(this.recaptchaToken) {
+            this.contactForm.recaptcha = true;
+        }
+    }
+
+
     handleError(message: string, error) {
         this.errorMessage = message;
         console.log('Server responded: ' + error);
@@ -165,12 +107,4 @@ export class ContactComponent implements OnInit{
         this.successfulSaveMessage = message;
     }
 
-    handleSuccessfulReset(message) {
-        this.showLoading = false;
-        this.successfulResetMessage = message;
-    }
-
-    trackByFn(index: any, item: any) {
-        return index;
-    }
 }

src/app/contact/contact.module.ts

@@ -6,15 +6,13 @@ import {RouterModule} from '@angular/router';
 import {ContactComponent} from './contact.component';
 import {ContactRoutingModule} from "./contact-routing.module";
 import {EmailService} from "../openaireLibrary/utils/email/email.service";
-import {RecaptchaModule} from "angular-google-recaptcha";
+import {RecaptchaModule} from "ng-recaptcha";
 
 
 @NgModule({
   imports: [
     ContactRoutingModule, CommonModule, FormsModule, RouterModule,
-    RecaptchaModule.forRoot({
+      RecaptchaModule.forRoot()
-      siteKey: '6LffKp0UAAAAAHFvnvEY4YUV_ojH90_loQp5gOqH',
-    }),
   ],
   declarations: [
     ContactComponent

src/assets/env-properties.json

@@ -102,12 +102,15 @@
   "notifyForNewManagers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewManagers/",
   "notifyForNewSubscribers": "http://scoobydoo.di.uoa.gr:8080/uoa-admin-tools/notifyForNewSubscribers/",
 
-
   "lastIndexInformationLink" : "https://beta.openaire.eu/aggregation-and-content-provision-workflows",
   "showLastIndexInformationLink" : true,
 
   "widgetLink" : "https://beta.openaire.eu/index.php?option=com_openaire&view=widget&format=raw&projectId=",
   "claimsInformationLink": "https://beta.openaire.eu/linking",
 
-  "shareInZenodoPage": "/participate/share-zenodo?communityId="
+  "shareInZenodoPage": "/participate/share-zenodo?communityId=",
+
+  "reCaptchaSiteKey": "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
+
+  "admins" : ["kostis30fylloy@gmail.com"]
 }