Add protocol handler

app/src/app/app.routes.ts

@@ -202,6 +202,13 @@ export const routes: Routes = [
     title: 'Privacy',
     data: { hide: true, icon: 'settings' },
   },
+  {
+    path: 'settings/handler',
+    loadComponent: () =>
+      import('./settings/handler/handler.component').then((c) => c.HandlerComponent),
+    title: 'Protocol Handler',
+    data: { hide: true, icon: 'search' },
+  },
   {
     path: 'address',
     loadComponent: () =>

app/src/app/settings/handler/handler.component.html

@@ -0,0 +1,17 @@
+<h1>Register Protocol Handler</h1>
+
+<p class="handler-actions">
+  <button class="signup-button" mat-flat-button color="primary" (click)="registerHandler('web+ariton', 'ariton')">Enable Ariton Link Protocol</button>
+</p>
+
+<mat-card class="card-info">
+        <p class="handler-actions">If you click the X on the request or block it, the request will 
+            never be displayed again until you manually unblock.
+        </p>
+        <p class="handler-actions selectable">chrome://settings/content/handlers</p>
+        <p class="handler-actions">
+         Copy the link manually and open it in your browser.
+            <br>
+          <!-- TODO: Make this link work cross-browsers. -->
+        </p>
+</mat-card>

app/src/app/settings/handler/handler.component.scss

@@ -0,0 +1,3 @@
+.card-info {
+    padding: 1em;
+}

app/src/app/settings/handler/handler.component.spec.ts

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

app/src/app/settings/handler/handler.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector: 'app-handler',
+  standalone: true,
+  imports: [MatIconModule, MatCardModule, MatButtonModule],
+  templateUrl: './handler.component.html',
+  styleUrl: './handler.component.scss'
+})
+export class HandlerComponent {
+
+  registerHandler(protocol: string, parameter: string) {
+    // navigator.registerProtocolHandler(protocol, `./index.html?${parameter}=%s`);
+    navigator.registerProtocolHandler(protocol, `/index.html?${parameter}=%s`);
+}
+}

app/src/app/settings/settings.component.html

@@ -10,6 +10,16 @@ <h1>Settings</h1>
 <br>
 <button mat-flat-button (click)="toggleDebug()">Toggle debug</button>
 
+<mat-nav-list>
+  <div mat-subheader>Other Actions</div>
+
+  <a mat-list-item [routerLink]="['handler']">
+    <mat-icon matListItemIcon>search</mat-icon>
+    Register Protocol Handler
+  </a>
+
+</mat-nav-list>
+
 <mat-nav-list>
     <div mat-subheader>Information</div>