- Contact Us Route Created:

- Enhanced Committee Configuration to allow any number of roles to be created. Previously these were limited to "chairman", "secretary", "treasurer", "membership", "social", "walks", "support" - A Committee role now has a Role type which can be: - Committee Member - a committee member that is formerly recorded with Ramblers Head Office, - System Role - This can be used to create an Enquiries role whihch can be assigned a specific email for inbound enquiries - Group Member - not yet used, but would be a normal group member perhaps providing assistance to the committee but not formally a committee member - /admin/committee-settings now highlihts when a Brevo sender cannot be matched to a committee role email and provides an option to create it if this is the case. - Added a special route that can be triggered by a contact-us query string parameter which opens up an email contact form on the currently selected route, where a public member can enter their name, email address, subject and message. The following querystring parameters can also be used to control how the contact is made with the committee: - &role=<role_name> - &redirect=<path of page containing contact us link> - &subject=<a reference to a subject that has been pre-configured in mail settings> - full example of contact us markdown link: `[Contact Nick](?contact-us&role=chairman&subject=joining&redirect=contact-us)`` - Added "ng-recaptcha" library which has been configured to expect recaptcha v2 Site Key and Secret Key - reCAPTCHA configuration keys can be input and tested at /admin/system-settings?tab=external-systems
nbarrett · Oct 21, 2024 · ff52392 · ff52392
1 parent 0389b34
commit ff52392
Show file tree

Hide file tree

Showing 53 changed files with 1,666 additions and 1,328 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "moment-timezone": "0.5.27",
     "mongoose": "5.10.11",
     "ng-gallery": "11.0.0",
+    "ng-recaptcha": "12.0.2",
     "ng2-file-upload": "5.0.0",
     "ngx-bootstrap": "11.0.2",
     "ngx-capture": "0.13.0",

diff --git a/projects/ngx-ramblers/src/app/app-routing.module.ts b/projects/ngx-ramblers/src/app/app-routing.module.ts
@@ -11,9 +11,10 @@ import { HowToSubjectListingComponent } from "./pages/how-to/subject-listing/sub
 import { Logger, LoggerFactory } from "./services/logger-factory.service";
 import { hasDynamicPath } from "./services/path-matchers";
 import { SocialViewComponent } from "./pages/social/social-view/social-view";
+import { contactUsGuard } from "./pages/contact-us/contact-us.guard";
 
 const routes: Routes = [
-  {path: "", component: HomeComponent},
+  {path: "", component: HomeComponent, canActivate: [contactUsGuard]},
   {path: "admin", loadChildren: () => import("./modules/admin/admin-routing.module").then(module => module.AdminRoutingModule)},
   {path: "committee", loadChildren: () => import("./modules/committee/committee-routing.module").then(module => module.CommitteeRoutingModule)},
   {path: "social", loadChildren: () => import("./modules/social/social-routing.module").then(module => module.SocialRoutingModule)},
@@ -35,10 +36,10 @@ const routes: Routes = [
 })
 
 export class AppRoutingModule {
-  private logger: Logger;
+  logger: Logger;
 
   constructor(loggerFactory: LoggerFactory) {
-    this.logger = loggerFactory.createLogger(AppRoutingModule, NgxLoggerLevel.OFF);
+    this.logger = loggerFactory.createLogger("AppRoutingModule", NgxLoggerLevel.OFF);
   }
 
 }
diff --git a/projects/ngx-ramblers/src/app/assets/styles/frames.sass b/projects/ngx-ramblers/src/app/assets/styles/frames.sass
@@ -80,7 +80,7 @@ iframe
 
 .thumbnail-heading
   position: relative
-  top: -26px
+  top: -29px
   margin-left: 0px
   margin-bottom: -14px
   padding-top: 2px

diff --git a/projects/ngx-ramblers/src/app/committee/contact-us/contact-us.ts b/projects/ngx-ramblers/src/app/committee/contact-us/contact-us.ts
@@ -51,7 +51,7 @@ export class ContactUsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.dataSub = this.committeeConfig.events().subscribe(data => this.committeeReferenceData = data);
+    this.dataSub = this.committeeConfig.committeeReferenceDataEvents().subscribe(data => this.committeeReferenceData = data);
     this.logger.info("format:", this.format, "roles:", this.roles, "text:", this.text);
   }
 

diff --git a/projects/ngx-ramblers/src/app/committee/role-multi-select/committee-role-multi-select.ts b/projects/ngx-ramblers/src/app/committee/role-multi-select/committee-role-multi-select.ts
@@ -9,7 +9,6 @@ import {
   Output,
   ViewChild
 } from "@angular/core";
-import isArray from "lodash-es/isArray";
 import { NgxLoggerLevel } from "ngx-logger";
 import { Subscription } from "rxjs";
 import { CommitteeMember, CommitteeRolesChangeEvent } from "../../models/committee.model";
@@ -58,7 +57,8 @@ import { NumberUtilsService } from "../../services/number-utils.service";
                   <label class="custom-control-label" [for]="stringUtils.kebabCase('role', roleIndex, id)">
                     {{ committeeMember.fullName }}
                     <small class="d-block">
-                      {{ committeeMember.description }}
+                      {{ committeeMember.description }}<span class="ml-1 colour-disabled"
+                                                             *ngIf="committeeMember.email">{{ committeeMember.email }}</span>
                     </small>
                   </label>
                 </div>

diff --git a/projects/ngx-ramblers/src/app/models/committee.model.ts b/projects/ngx-ramblers/src/app/models/committee.model.ts
@@ -82,6 +82,12 @@ export interface NotificationItem extends Identifiable {
   image: NotificationImage;
 }
 
+export enum RoleType {
+  COMMITTEE_MEMBER = "COMMITTEE_MEMBER",
+  GROUP_MEMBER = "GROUP_MEMBER",
+  SYSTEM_ROLE = "SYSTEM_ROLE"
+}
+
 export interface CommitteeMember {
   description: string;
   email: string;
@@ -90,6 +96,7 @@ export interface CommitteeMember {
   nameAndDescription?: string;
   type: string;
   vacant?: boolean;
+  roleType: RoleType;
 }
 
 export interface CommitteeRolesChangeEvent {
@@ -107,7 +114,8 @@ export interface ExpensesConfig {
 }
 
 export interface CommitteeConfig {
-  contactUs: {
+  roles: CommitteeMember[],
+  contactUs?: {
     chairman: CommitteeMember;
     secretary: CommitteeMember;
     treasurer: CommitteeMember;
@@ -175,3 +183,24 @@ export interface CommitteeYear {
   year: number;
   latestYear: boolean;
 }
+
+export interface ContactFormDetails {
+  timestamp: number;
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  sendCopy: boolean;
+}
+
+export interface ValidateTokenRequest {
+  captchaToken: string;
+}
+
+export interface ValidateTokenResponse {
+  message: string;
+}
+
+export interface ValidateTokenApiResponse extends ApiResponse {
+  response?: ValidateTokenResponse;
+}
diff --git a/projects/ngx-ramblers/src/app/models/mail.model.ts b/projects/ngx-ramblers/src/app/models/mail.model.ts
@@ -2,7 +2,7 @@ import { ApiResponse, Identifiable } from "./api-response.model";
 import { ExternalSystems, Organisation } from "./system.model";
 import { CommitteeReferenceData } from "../services/committee/committee-reference-data";
 import { BannerConfig } from "./banner-configuration.model";
-import { Auditable, Member, MemberFilterSelection } from "./member.model";
+import { Auditable, HasEmailFirstAndLastName, Member, MemberFilterSelection } from "./member.model";
 import { NotificationDirective } from "../notifications/common/notification.directive";
 import { AuditStatus } from "./audit";
 
@@ -78,11 +78,14 @@ export interface EmailAddress {
 }
 
 export interface CreateSendSmtpEmailRequest {
-  member: Member;
+  member?: HasEmailFirstAndLastName;
   notificationConfig: NotificationConfig;
   notificationDirective: NotificationDirective;
   bodyContent?: string;
   emailSubject?: string;
+  sender?: EmailAddress;
+  to?: EmailAddress[];
+  replyTo?: EmailAddress;
 }
 
 export interface EmailRequest {
@@ -95,8 +98,6 @@ export interface EmailRequest {
 }
 
 export interface SendSmtpEmailRequest extends EmailRequest {
-  sender: EmailAddress;
-  subject: string;
   to?: EmailAddress[];
   cc?: EmailAddress[];
   replyTo?: EmailAddress;
@@ -183,6 +184,7 @@ export interface BuiltInProcessMappings {
   expenseNotificationConfigId: string;
   forgotPasswordNotificationConfigId: string;
   walkNotificationConfigId: string;
+  contactUsNotificationConfigId: string;
 }
 
 export interface NotificationConfigurationApiResponse extends ApiResponse {

diff --git a/projects/ngx-ramblers/src/app/models/member.model.ts b/projects/ngx-ramblers/src/app/models/member.model.ts
@@ -75,12 +75,16 @@ interface MailSettings extends MailIdentifiers {
   subscriptions: MailSubscription[];
 }
 
-export interface Member extends HasFirstAndLastName, MemberPrivileges, Auditable, Identifiable {
+export interface FirstAndLastName {
+  firstName: string;
+  lastName: string;
+}
+
+export interface Member extends HasEmailFirstAndLastName, MemberPrivileges, Auditable, Identifiable {
   hideSurname?: boolean;
   expiredPassword?: boolean;
   password?: string;
   nameAlias?: string;
-  email?: string;
   mobileNumber?: string;
   displayName?: string;
   contactId?: string;
@@ -123,7 +127,8 @@ export interface StatusMessage {
   message: string;
 }
 
-export interface HasFirstAndLastName {
+export interface HasEmailFirstAndLastName {
+  email?: string;
   firstName: string;
   lastName: string;
 }
@@ -134,12 +139,11 @@ export interface BulkLoadMemberAndMatch {
   member: Member;
 }
 
-export interface RamblersMember extends HasFirstAndLastName {
+export interface RamblersMember extends HasEmailFirstAndLastName {
   groupMember?: boolean;
   membershipExpiryDate?: string | number;
   membershipNumber: string;
   mobileNumber: string;
-  email: string;
   postcode: string;
 }
 

diff --git a/projects/ngx-ramblers/src/app/models/system.model.ts b/projects/ngx-ramblers/src/app/models/system.model.ts
@@ -164,6 +164,7 @@ export interface SystemConfig {
   area: Organisation;
   national: Ramblers;
   externalSystems: ExternalSystems
+  recaptcha: ReCaptchaConfig
   mailDefaults: {
     mailProvider: MailProvider;
     autoSubscribeNewMembers: boolean;
@@ -268,3 +269,19 @@ export const defaultRightPanel: RightPanel = {
   showLoginLinksAndSiteEdit: true,
   showNavigationButtons: false
 };
+
+
+export interface ReCaptchaConfig {
+  siteKey: string;
+  secretKey: string;
+}
+
+export interface CaptchaVerificationResponse {
+  success: boolean;
+  challenge_ts: string;
+  hostname: string;
+  score?: number;
+  action?: string;
+  "error-codes"?: string[];
+}
+
diff --git a/projects/ngx-ramblers/src/app/modules/admin/admin.module.ts b/projects/ngx-ramblers/src/app/modules/admin/admin.module.ts
@@ -50,7 +50,6 @@ import { ContactDetailsComponent } from "../../pages/admin/profile/contact-detai
 import { EmailSubscriptionsComponent } from "../../pages/admin/profile/email-subscriptions.component";
 import { SendEmailsModalComponent } from "../../pages/admin/send-emails/send-emails-modal.component";
 import { CommitteeMemberComponent } from "../../pages/admin/system-settings/committee/committee-member";
-import { CommitteeMemberLookupComponent } from "../../pages/admin/system-settings/committee/committee-member-lookup";
 import { CommitteeSettingsComponent } from "../../pages/admin/system-settings/committee/committee-settings";
 import {
   ImageCollectionSettingsComponent
@@ -100,7 +99,6 @@ import { SystemMeetupSettingsComponent } from "../../pages/admin/system-settings
     AdminComponent,
     ChangePasswordComponent,
     CommitteeMemberComponent,
-    CommitteeMemberLookupComponent,
     CommitteeSettingsComponent,
     ContactDetailsComponent,
     EmailSubscriptionsComponent,
@@ -126,13 +124,13 @@ import { SystemMeetupSettingsComponent } from "../../pages/admin/system-settings
     ForgotPasswordModalComponent,
     ForgotPasswordNotificationDetailsComponent,
     ImageCollectionSettingsComponent,
+    MailChimpSubscriptionSettingsComponent,
+    MailListEditorComponent,
     MailListSettingsComponent,
     MailNotificationTemplateMappingComponent,
     MailSettingsComponent,
-    MailListEditorComponent,
-    MailSubscriptionSettingsComponent,
     MailSubscriptionSettingComponent,
-    MailChimpSubscriptionSettingsComponent,
+    MailSubscriptionSettingsComponent,
     MailchimpCampaignDefaultsComponent,
     MailchimpContactComponent,
     MailchimpListSettingsComponent,
@@ -148,11 +146,11 @@ import { SystemMeetupSettingsComponent } from "../../pages/admin/system-settings
     SendEmailsModalComponent,
     SwitchIconComponent,
     SystemImageEditComponent,
-    SystemSettingsComponent,
     SystemMeetupSettingsComponent,
+    SystemSettingsComponent,
   ],
   imports: [
-    SharedModule
+    SharedModule,
   ],
   providers: [
     FormatAuditPipe

diff --git a/projects/ngx-ramblers/src/app/modules/common/app.module.ts b/projects/ngx-ramblers/src/app/modules/common/app.module.ts
@@ -38,48 +38,52 @@ import { SiteEditComponent } from "../../site-edit/site-edit.component";
 import { CardContainerComponent } from "./card-container/card-container.component";
 import { NavbarContentComponent } from "./navbar-content/navbar-content";
 import { NavbarComponent } from "./navbar/navbar";
+import { RecaptchaModule } from "ng-recaptcha";
+import { AdminModule } from "../admin/admin.module";
 
 @NgModule({
-    declarations: [
-        BannerComponent,
-        BannerLogoAndTextLinesOutputComponent,
-        BannerPapercutOutputComponent,
-        IconSelectorComponent,
-        BannerHeadLogoComponent,
-        BannerImageSelectorComponent,
-        BannerTitleConfigComponent,
-        BannerTitleOutputComponent,
-        BannerTitlePartConfigComponent,
-        CardContainerComponent,
-        ChangedItemsPipe,
-        ContainerComponent,
-        FacebookComponent,
-        FooterComponent,
-        SocialMediaLinksComponent,
-        ForgotPasswordComponent,
-        HeaderBarComponent,
-        HeaderButtonsComponent,
-        HomeComponent,
-        HowToModalComponent,
-        HowToSubjectListingComponent,
-        InstagramComponent,
-        LoginComponent,
-        LoginModalComponent,
-        LoginPanelComponent,
-        LogoutComponent,
-        MeetupDescriptionComponent,
-        NavbarComponent,
-        NavbarContentComponent,
-        PageNavigatorComponent,
-        PrivacyPolicyComponent,
-        SetPasswordComponent,
-        SiteEditComponent,
-    ],
+  declarations: [
+    BannerComponent,
+    BannerHeadLogoComponent,
+    BannerImageSelectorComponent,
+    BannerLogoAndTextLinesOutputComponent,
+    BannerPapercutOutputComponent,
+    BannerTitleConfigComponent,
+    BannerTitleOutputComponent,
+    BannerTitlePartConfigComponent,
+    CardContainerComponent,
+    ChangedItemsPipe,
+    ContainerComponent,
+    FacebookComponent,
+    FooterComponent,
+    ForgotPasswordComponent,
+    HeaderBarComponent,
+    HeaderButtonsComponent,
+    HomeComponent,
+    HowToModalComponent,
+    HowToSubjectListingComponent,
+    IconSelectorComponent,
+    InstagramComponent,
+    LoginComponent,
+    LoginModalComponent,
+    LoginPanelComponent,
+    LogoutComponent,
+    MeetupDescriptionComponent,
+    NavbarComponent,
+    NavbarContentComponent,
+    PageNavigatorComponent,
+    PrivacyPolicyComponent,
+    SetPasswordComponent,
+    SiteEditComponent,
+    SocialMediaLinksComponent
+  ],
     imports: [
         AppRoutingModule,
         BrowserAnimationsModule,
         HttpClientModule,
+        RecaptchaModule,
         SharedModule.forRoot(),
+        AdminModule,
     ]
 })
 

diff --git a/projects/ngx-ramblers/src/app/pages/admin/data-population.service.ts b/projects/ngx-ramblers/src/app/pages/admin/data-population.service.ts
@@ -49,7 +49,7 @@ export class DataPopulationService {
       {
         category: "admin",
         name: "committee-roles-help",
-        text: "[ngx-ramblers](https://www.ngx-ramblers.org.uk) allows the roles of _chairman, secretary, treasurer, membership, social, walks_  and  _support_ to be configured to suit your group. This screen allows group members flagged as being in the _Committee_, to be associated with each of these roles, for meaningful names to be assigned with the roles and for contact email addresses to be associated. By default, the email address from the selected membership record is offered as a default, but this can be overidden with a public address related to the website domain. This data is used to automatically generate signoff text for email notifications. "
+        text: "[ngx-ramblers](https://www.ngx-ramblers.org.uk) allows any number of roles  e.g.  _chairman, secretary, treasurer, membership, social, walks_ etc to be configured to suit your group. This screen allows group members that are also Committee Members, to be associated with each of these roles, for meaningful names to be assigned with the roles and for contact email addresses to be associated. By default, the email address from the selected member record is offered as a default, but this can be overridden with a public address related to the website domain, which is recommended in order for emails to be reliably sent via Brevo."
       },
       {
         name: "mail-settings-global-help",