Initial Implementation of Help and My Profile Popup

src/app/header/header-popup/help/help.component.css

@@ -0,0 +1,7 @@
+.help-container {
+    max-width: 400px;
+}
+
+p {
+    color: #555555;
+}

src/app/header/header-popup/help/help.component.html

@@ -0,0 +1,28 @@
+<app-popup [state]="state"
+           (stateChange)="onStateChange($event)"
+           [ignoreClickOutside]="ignoreClickOutside">
+
+    <div class="help-container container m-0 overflow-hidden">
+
+        <p>
+            This is a simple example project to demonstrate
+            User Authentication and Authorization using
+            <a href="https://spring.io/projects/spring-security" target="_blank">Spring Security</a>
+            and
+            <a href="https://docs.spring.io/spring-security/reference/servlet/oauth2/" target="_blank">OAuth2</a>.
+
+            <br/><br/>
+
+            The only data stored is your email address, username and name.
+            This data is stored in a database and is used to authenticate you
+            and will not be used for any other purpose.
+
+            <br/><br/>
+
+            All data can be deleted by clicking the "Delete Account" button
+            on the "My Profile" option.
+        </p>
+
+    </div>
+
+</app-popup>

src/app/header/header-popup/help/help.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpComponent } from './help.component';
+
+describe('HelpComponent', () => {
+  let component: HelpComponent;
+  let fixture: ComponentFixture<HelpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HelpComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header-popup/help/help.component.ts

@@ -0,0 +1,24 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+    selector: 'app-help',
+    templateUrl: './help.component.html',
+    styleUrls: ['./help.component.css']
+})
+export class HelpComponent {
+
+    @Input()
+        state: boolean = false;
+
+    @Input()
+        ignoreClickOutside!: HTMLDivElement[];
+
+    @Output()
+        stateChange = new EventEmitter<boolean>();
+
+    constructor() { }
+
+    onStateChange(state: boolean) {
+        this.stateChange.emit(state);
+    }
+}