add jwt approve page

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { BuyDeSoCompletePageComponent } from './buy-deso/buy-deso-complete-page/
 import { BuyOrSendDesoComponent } from './buy-or-send-deso/buy-or-send-deso.component';
 import { SignUpMetamaskComponent } from './sign-up-metamask/sign-up-metamask.component';
 import { MessagingGroupComponent } from './messaging-group/messaging-group.component';
+import { JwtApproveComponent } from './jwt-approve/jwt-approve.component';
 
 export class RouteNames {
   public static EMBED = 'embed';
@@ -40,6 +41,7 @@ export class RouteNames {
   public static BUY_DESO = 'buy-deso';
   public static BUY_OR_SEND_DESO = 'buy-or-send-deso';
   public static MESSAGING_GROUP = 'messaging-group';
+  public static JWT = 'jwt';
 }
 
 const routes: Routes = [
@@ -96,6 +98,11 @@ const routes: Routes = [
     component: MessagingGroupComponent,
     pathMatch: 'full',
   },
+  {
+    path: RouteNames.JWT,
+    component: JwtApproveComponent,
+    pathMatch: 'full',
+  },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -60,6 +60,7 @@ import { TransactionSpendingLimitDaoCoinLimitOrderComponent } from './transactio
 import { TransactionSpendingLimitNftComponent } from './transaction-spending-limit/transaction-spending-limit-nft/transaction-spending-limit-nft.component';
 import { TransactionSpendingLimitSectionComponent } from './transaction-spending-limit/transaction-spending-limit-section/transaction-spending-limit-section.component';
 import { TransactionSpendingLimitComponent } from './transaction-spending-limit/transaction-spending-limit.component';
+import { JwtApproveComponent } from './jwt-approve/jwt-approve.component';
 
 @NgModule({
   declarations: [
@@ -107,6 +108,7 @@ import { TransactionSpendingLimitComponent } from './transaction-spending-limit/
     RecoverySecretComponent,
     BackupSeedDialogComponent,
     RemoveAccountDialogComponent,
+    JwtApproveComponent,
   ],
   imports: [
     BrowserModule,

src/app/identity.service.ts

@@ -55,6 +55,11 @@ export type DerivePayload = {
   blockHeight: number;
 };
 
+export type IdentityJwtPayload = {
+  publicKey: string;
+  expirationDays: number;
+};
+
 export type MessagingGroupPayload = {
   messagingKeySignature: string;
   encryptedToApplicationGroupMessagingPrivateKey: string;
@@ -140,6 +145,33 @@ export class IdentityService {
     }
   }
 
+  jwt(payload: IdentityJwtPayload): void {
+    const privateUserInfo = this.accountService.getAccountInfo(
+      payload.publicKey
+    );
+    const jwt = this.signingService.signJWT(privateUserInfo.seedHex, false, {
+      expiration: payload.expirationDays,
+    });
+    const response = {
+      publicKey: payload.publicKey,
+      jwt,
+      expirationDays: payload.expirationDays,
+    };
+    if (this.globalVars.callback) {
+      // If callback is passed, we redirect to it with payload as URL parameters.
+      let httpParams = new HttpParams();
+      for (const key in response) {
+        if (payload.hasOwnProperty(key)) {
+          httpParams = httpParams.append(key, (payload as any)[key].toString());
+        }
+      }
+      window.location.href =
+        this.globalVars.callback + `?${httpParams.toString()}`;
+    } else {
+      this.cast('jwt', response);
+    }
+  }
+
   derive(payload: DerivePayload): Promise<void> {
     return this.accountService
       .getDerivedPrivateUser(
@@ -306,6 +338,7 @@ export class IdentityService {
       signedTransactionHex,
     });
   }
+
   // Encrypt with shared secret
   private handleEncrypt(data: any): void {
     if (!this.approve(data, AccessLevel.ApproveAll)) {

src/app/jwt-approve/jwt-approve.component.html

@@ -0,0 +1,32 @@
+<app-banner></app-banner>
+
+<div class="container">
+  <h3 class="text--neutral-white">Approve a JWT</h3>
+  <div class="box--border box--rounded box--large">
+    <p class="padding-bottom--medium">
+      {{ globalVars.hostname }} wants to generate a JWT
+    </p>
+    <div>
+      Public Key: <code>{{ publicKey }}</code>
+    </div>
+    <div>
+      Expiration Days: <code>{{ expirationDays }}</code>
+    </div>
+    <div class="margin-top--large">
+      <button
+        type="button"
+        class="button--primary button--medium margin-bottom--medium"
+        (click)="onSubmit()"
+      >
+        Allow
+      </button>
+      <!--      <button-->
+      <!--        type="button"-->
+      <!--        class="button&#45;&#45;primary&#45;&#45;outline button&#45;&#45;medium"-->
+      <!--        (click)="onCancel()"-->
+      <!--      >-->
+      <!--        Deny-->
+      <!--      </button>-->
+    </div>
+  </div>
+</div>

src/app/jwt-approve/jwt-approve.component.spec.ts

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

src/app/jwt-approve/jwt-approve.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { GlobalVarsService } from '../global-vars.service';
+import { IdentityService } from '../identity.service';
+
+@Component({
+  selector: 'app-jwt-approve',
+  templateUrl: './jwt-approve.component.html',
+  styleUrls: ['./jwt-approve.component.scss'],
+})
+export class JwtApproveComponent implements OnInit {
+  publicKey: any;
+  expirationDays = 30;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private identityService: IdentityService,
+    public globalVars: GlobalVarsService
+  ) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.queryParams.subscribe((params) => {
+      this.publicKey = params.publicKey;
+      this.expirationDays = Number(params.expirationDays) || 30;
+    });
+  }
+
+  onSubmit(): void {
+    this.identityService.jwt({
+      publicKey: this.publicKey,
+      expirationDays: this.expirationDays,
+    });
+  }
+}