From c39c8abd364abd94887859d2dce35903d0ce9210 Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sat, 6 Jul 2024 19:38:15 +0200
Subject: [PATCH] Add protocol handler

---
 app/src/app/app.routes.ts                     |  7 ++++++
 .../settings/handler/handler.component.html   | 17 ++++++++++++++
 .../settings/handler/handler.component.scss   |  3 +++
 .../handler/handler.component.spec.ts         | 23 +++++++++++++++++++
 .../app/settings/handler/handler.component.ts | 19 +++++++++++++++
 app/src/app/settings/settings.component.html  | 10 ++++++++
 6 files changed, 79 insertions(+)
 create mode 100644 app/src/app/settings/handler/handler.component.html
 create mode 100644 app/src/app/settings/handler/handler.component.scss
 create mode 100644 app/src/app/settings/handler/handler.component.spec.ts
 create mode 100644 app/src/app/settings/handler/handler.component.ts

diff --git a/app/src/app/app.routes.ts b/app/src/app/app.routes.ts
index e3dd6e31..fe55748e 100644
--- a/app/src/app/app.routes.ts
+++ b/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: () =>
diff --git a/app/src/app/settings/handler/handler.component.html b/app/src/app/settings/handler/handler.component.html
new file mode 100644
index 00000000..160aadfd
--- /dev/null
+++ b/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>
diff --git a/app/src/app/settings/handler/handler.component.scss b/app/src/app/settings/handler/handler.component.scss
new file mode 100644
index 00000000..b8f5bacc
--- /dev/null
+++ b/app/src/app/settings/handler/handler.component.scss
@@ -0,0 +1,3 @@
+.card-info {
+    padding: 1em;
+}
\ No newline at end of file
diff --git a/app/src/app/settings/handler/handler.component.spec.ts b/app/src/app/settings/handler/handler.component.spec.ts
new file mode 100644
index 00000000..f6b53648
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/app/src/app/settings/handler/handler.component.ts b/app/src/app/settings/handler/handler.component.ts
new file mode 100644
index 00000000..81a1b67a
--- /dev/null
+++ b/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`);
+}
+}
diff --git a/app/src/app/settings/settings.component.html b/app/src/app/settings/settings.component.html
index c94d18ae..f3e09f3d 100644
--- a/app/src/app/settings/settings.component.html
+++ b/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>