Feature/add blog post ghostfolio meets internet identity (#1092)

* Add blog post: Ghostfolio meets Internet Identity

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added a blog post: _Ghostfolio meets Internet Identity_
+
 ## 1.171.0 - 22.07.2022
 
 ### Added

apps/client/src/app/app-routing.module.ts

@@ -78,6 +78,13 @@ const routes: Routes = [
         './pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.module'
       ).then((m) => m.FirstMonthsInOpenSourcePageModule)
   },
+  {
+    path: 'en/blog/2022/07/ghostfolio-meets-internet-identity',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module'
+      ).then((m) => m.GhostfolioMeetsInternetIdentityPageModule)
+  },
   {
     path: 'en/blog/2022/07/how-do-i-get-my-finances-in-order',
     loadChildren: () =>

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hallo Ghostfolio 👋</h1>
-          <div class="text-muted"><small>31.07.2021</small></div>
+          <div class="text-muted"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">Hello Ghostfolio 👋</h1>
-          <div class="text-muted"><small>31.07.2021</small></div>
+          <div class="text-muted"><small>2021-07-31</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.html

@@ -7,7 +7,7 @@
             👻 Ghostfolio –
             <span class="text-nowrap">First months in Open Source</span>
           </h1>
-          <div class="text-muted"><small>05.01.2022</small></div>
+          <div class="text-muted"><small>2022-01-05</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page-routing.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { GhostfolioMeetsInternetIdentityPageComponent } from './ghostfolio-meets-internet-identity-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GhostfolioMeetsInternetIdentityPageComponent,
+    canActivate: [AuthGuard]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GhostfolioMeetsInternetIdentityRoutingModule {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-ghostfolio-meets-internet-identity-page',
+  styleUrls: ['./ghostfolio-meets-internet-identity-page.scss'],
+  templateUrl: './ghostfolio-meets-internet-identity-page.html'
+})
+export class GhostfolioMeetsInternetIdentityPageComponent {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.html

@@ -0,0 +1,183 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">Ghostfolio meets Internet Identity</h1>
+          <div class="mb-3 text-muted"><small>2022-07-23</small></div>
+          <img
+            alt="Ghostfolio meets Internet Identity Teaser"
+            class="w-100"
+            src="./assets/images/blog/ghostfolio-meets-internet-identity.png"
+            title="Ghostfolio meets Internet Identity"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            <a href="https://ghostfol.io">Ghostfolio</a>, the web-based personal
+            finance management software, supports passwordless authentication as
+            of now thanks to the integration of
+            <a href="https://identity.ic0.app">Internet Identity</a>. This
+            blockchain authentication system enables you to sign in securely and
+            anonymously to Ghostfolio. With this latest update, Ghostfolio is
+            ready for Web3.
+          </p>
+          <div class="container my-4">
+            <div class="row">
+              <div class="col-md-10 offset-md-1">
+                <blockquote class="blockquote m-0">
+                  <p class="mb-0">Track your portfolio without being tracked</p>
+                </blockquote>
+              </div>
+            </div>
+          </div>
+          <p>
+            To avoid the security issues that arise with password authentication
+            on the traditional web, the
+            <a href="https://internetcomputer.org">Internet Computer</a>
+            blockchain by <a href="https://dfinity.org">dfinity</a> has
+            introduced a new cryptographic authentication system. It is called
+            <i>Internet Identity</i> and is as convenient to use as Web2
+            <a href="https://en.wikipedia.org/wiki/OAuth">OAuth</a> ("Open
+            Authorization") providers like <i>Google Sign-In</i> or
+            <i>Facebook Login</i>.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">How to use Internet Identity?</h2>
+          <p>
+            <i>Internet Identity</i> is based on the
+            <a href="https://en.wikipedia.org/wiki/WebAuthn"
+              >WebAuthn protocol</a
+            >
+            and uses secure cryptographic authentication. It provides three
+            options to authenticate yourself:
+          </p>
+          <ul>
+            <li>
+              The built-in biometric authentication methods of your smartphone
+              or laptop (fingerprint sensor, <i>Face ID</i>, <i>Touch ID</i>)
+            </li>
+            <li>The password or pin to unlock your computer or mobile phone</li>
+            <li>A security key plugged into the USB port of your computer</li>
+          </ul>
+          <p>
+            When you authenticate with <i>Internet Identity</i>, the service
+            only gets a dedicated pseudonym rather than sensitive user data like
+            the email address or phone number. This preserves your anonymity and
+            prevents you being tracked on the Internet.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">The key benefits in a nutshell</h2>
+          <ul>
+            <li>
+              Authenticate yourself securely without the need of an email
+              address, username, or a password: all you need is your device to
+              log in.
+            </li>
+            <li>
+              Built-in recovery mechanisms to ensure you are not locked out of
+              any service that requires the <i>Internet Identity</i>.
+            </li>
+            <li>
+              Log in to various Internet services without being tracked by big
+              tech companies.
+            </li>
+          </ul>
+        </section>
+        <section class="mb-4">
+          <p>
+            If you would like to provide feedback or get involved in further
+            development of Ghostfolio, please get in touch by email via
+            <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> or on Twitter
+            <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a>.
+          </p>
+          <p>
+            I look forward to hearing from you.<br />
+            Thomas from Ghostfolio
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Anonymity</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">App</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Auth Provider</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Authentication</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Blockchain</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cryptography</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">dfinity</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Face ID</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fingerprint</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Internet Computer</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Internet Identity</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OAuth</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Password</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">passwordless</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Security</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Technology</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Touch ID</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">WebAuthn</span>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </div>
+  </div>
+</div>

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { GhostfolioMeetsInternetIdentityRoutingModule } from './ghostfolio-meets-internet-identity-page-routing.module';
+import { GhostfolioMeetsInternetIdentityPageComponent } from './ghostfolio-meets-internet-identity-page.component';
+
+@NgModule({
+  declarations: [GhostfolioMeetsInternetIdentityPageComponent],
+  imports: [
+    CommonModule,
+    GhostfolioMeetsInternetIdentityRoutingModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GhostfolioMeetsInternetIdentityPageModule {}

apps/client/src/app/pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

apps/client/src/app/pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.html

@@ -4,7 +4,7 @@
       <article>
         <div class="mb-4 text-center">
           <h1 class="mb-1">How do I get my finances in order?</h1>
-          <div class="text-muted"><small>14.07.2022</small></div>
+          <div class="text-muted"><small>2022-07-14</small></div>
         </div>
         <section class="mb-4">
           <p>

apps/client/src/app/pages/blog/blog-page.html

@@ -2,6 +2,32 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex w-100"
+                [routerLink]="['/en', 'blog', '2022', '07', 'ghostfolio-meets-internet-identity']"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">
+                    Ghostfolio meets Internet Identity
+                  </div>
+                  <div class="d-flex text-muted">2022-07-23</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
       <mat-card class="mb-3">
         <mat-card-content>
           <div class="container p-0">
@@ -14,7 +40,7 @@
                   <div class="h6 m-0 text-truncate">
                     How do I get my finances in order?
                   </div>
-                  <div class="d-flex text-muted">14.07.2022</div>
+                  <div class="d-flex text-muted">2022-07-14</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
@@ -40,7 +66,7 @@
                   <div class="h6 m-0 text-truncate">
                     First months in Open Source
                   </div>
-                  <div class="d-flex text-muted">05.01.2022</div>
+                  <div class="d-flex text-muted">2022-01-05</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
@@ -64,7 +90,7 @@
               >
                 <div class="flex-grow-1">
                   <div class="h6 m-0 text-truncate">Hello Ghostfolio</div>
-                  <div class="d-flex text-muted">31.07.2021</div>
+                  <div class="d-flex text-muted">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon
@@ -88,7 +114,7 @@
               >
                 <div class="flex-grow-1">
                   <div class="h6 m-0 text-truncate">Hallo Ghostfolio</div>
-                  <div class="d-flex text-muted">31.07.2021</div>
+                  <div class="d-flex text-muted">2021-07-31</div>
                 </div>
                 <div class="align-items-center d-flex">
                   <ion-icon

apps/client/src/assets/sitemap.xml

@@ -6,58 +6,62 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/about/changelog</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/blog</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/demo</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/how-do-i-get-my-finances-in-order</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/features</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/markets</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/pricing</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/register</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/resources</loc>
-    <lastmod>2022-07-14T00:00:00+00:00</lastmod>
+    <lastmod>2022-07-23T00:00:00+00:00</lastmod>
   </url>
 </urlset>