join wallet template

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { CopayApp } from './app.component';
 import { AddPage } from '../pages/add/add';
 import { CreateWalletPage } from '../pages/add/create-wallet/create-wallet';
 import { ImportWalletPage } from '../pages/add/import-wallet/import-wallet';
+import { JoinWalletPage } from '../pages/add/join-wallet/join-wallet';
 import { BackupRequestPage } from '../pages/onboarding/backup-request/backup-request';
 import { DisclaimerPage } from '../pages/onboarding/disclaimer/disclaimer';
 import { EmailPage } from '../pages/onboarding/email/email';
@@ -80,6 +81,7 @@ let pages: any = [
   AddPage,
   CreateWalletPage,
   ImportWalletPage,
+  JoinWalletPage,
   AboutPage,
   AdvancedPage,
   AltCurrencyPage,

src/pages/add/add.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { CreateWalletPage } from "./create-wallet/create-wallet";
 import { ImportWalletPage } from "./import-wallet/import-wallet";
+import { JoinWalletPage } from "./join-wallet/join-wallet";
 
 @Component({
   selector: 'page-add',
@@ -19,7 +20,7 @@ export class AddPage {
   }
 
   goToJoinWallet() {
-    // this.navCtrl.push();
+    this.navCtrl.push(JoinWalletPage);
   }
 
   goToImportWallet() {

src/pages/add/join-wallet/join-wallet.html

@@ -0,0 +1,79 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>Join wallet</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <form [formGroup]="joinForm" (ngSubmit)="join()">
+    <ion-item>
+      <ion-label stacked>Your name</ion-label>
+      <ion-input type="text" [(ngModel)]="formData.copayerName" formControlName="copayerName" required></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label stacked>Wallet invitation</ion-label>
+      <ion-input type="text" [(ngModel)]="formData.invitationCode" formControlName="invitationCode" required></ion-input>
+    </ion-item>
+
+    <ion-item-divider color="light"></ion-item-divider>
+
+    <ion-item (click)="showAdvOpts = !showAdvOpts">
+      <ion-label *ngIf="!showAdvOpts">Show advanced options</ion-label>
+      <ion-label *ngIf="showAdvOpts">Hide advanced options</ion-label>
+    </ion-item>
+
+    <div *ngIf="showAdvOpts">
+      <ion-item>
+        <ion-label stacked>Wallet service URL</ion-label>
+        <ion-input type="text" [(ngModel)]="formData.bwsURL" formControlName="bwsURL"></ion-input>
+      </ion-item>
+
+      <ion-item>
+        <ion-label stacked>Wallet key</ion-label>
+        <ion-select [(ngModel)]="formData.selectedSeed.id" formControlName="selectedSeed" (ionChange)="seedOptionsChange(formData.selectedSeed.id)">
+          <ion-option *ngFor="let opt of seedOptions" [value]="opt.id">{{opt.label}}</ion-option>
+        </ion-select>
+      </ion-item>
+      
+      <ion-item *ngIf="formData.selectedSeed.id == 'set'">
+        <ion-label stacked>Wallet recovery phrase</ion-label>
+        <ion-input type="text" [(ngModel)]="formData.recoveryPhrase" formControlName="recoveryPhrase"></ion-input>
+      </ion-item>
+      
+      <ion-item>
+        <ion-label stacked>Add a password</ion-label>
+        <ion-toggle [(ngModel)]="formData.addPassword" formControlName="addPassword" (ionChange)="resetFormFields()"></ion-toggle>
+      </ion-item>
+
+      <div *ngIf="formData.addPassword">
+        <ion-item>
+          <ion-label stacked>Password</ion-label>
+          <ion-input type="password" [(ngModel)]="formData.password" formControlName="password"></ion-input>
+        </ion-item>
+  
+        <ion-item>
+          <ion-label stacked>Confirm password</ion-label>
+          <ion-input type="password" [(ngModel)]="formData.confirmPassword" formControlName="confirmPassword"></ion-input>
+        </ion-item>
+
+        <ion-item>
+          <div class="warning">
+            <strong translate>This password cannot be recovered. If the password is lost, there is no way you could recover your funds.</strong>
+          </div>
+        </ion-item>
+
+        <ion-item>
+          <ion-label stacked>I have written it down</ion-label>
+          <ion-checkbox [(ngModel)]="formData.passwordSaved" formControlName="passwordSaved" checked="false"></ion-checkbox>
+        </ion-item>
+      </div>
+
+      <ion-item *ngIf="formData.selectedSeed.id == 'set'">
+        <ion-label stacked>Derivation path</ion-label>
+        <ion-input type="text" [(ngModel)]="formData.derivationPath" formControlName="derivationPath"></ion-input>
+      </ion-item>
+    </div>
+    <button ion-button block type="submit" [disabled]="!joinForm.valid || validatePasswords()">Join wallet</button>
+  </form>
+</ion-content>

src/pages/add/join-wallet/join-wallet.ts

@@ -0,0 +1,113 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from 'ionic-angular';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+
+import { AppProvider } from '../../../providers/app/app';
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'page-join-wallet',
+  templateUrl: 'join-wallet.html'
+})
+export class JoinWalletPage implements OnInit{
+  public formData: any;
+  public showAdvOpts: boolean;
+  public seedOptions: any;
+
+  private appName: string;
+  private derivationPathByDefault: string;
+  private derivationPathForTestnet: string;
+  private joinForm: FormGroup;
+
+  constructor(
+    public navCtrl: NavController,
+    private app: AppProvider,
+    private fb: FormBuilder
+  ) {
+    this.derivationPathByDefault = "m/44'/0'/0'";
+    this.derivationPathForTestnet = "m/44'/1'/0'";
+    this.showAdvOpts = false;
+    this.formData = {
+      copayerName: null,
+      invitationCode: null,
+      bwsURL: 'https://bws.bitpay.com/bws/api',
+      recoveryPhrase: null,
+      addPassword: false,
+      password: null,
+      confirmPassword: null,
+      passwordSaved: null,
+      derivationPath: this.derivationPathByDefault,
+    };
+    this.seedOptions = [{
+      id: 'new',
+      label: 'Random',
+      supportsTestnet: true
+    }, {
+      id: 'set',
+      label: 'Specify Recovery Phrase',
+      supportsTestnet: false
+    }];
+    this.formData.selectedSeed = {
+      id: this.seedOptions[0].id
+    };
+  }
+
+  ngOnInit() {
+    this.joinForm = this.fb.group({
+      copayerName: ['', Validators.required],
+      invitationCode: ['', Validators.required],
+      bwsURL: [''],
+      selectedSeed: [''],
+      recoveryPhrase: [''],
+      addPassword: [''],
+      password: [''],
+      confirmPassword: [''],
+      passwordSaved: [''],
+      derivationPath: [''],
+    });
+
+    this.joinForm.get('addPassword').valueChanges.subscribe((addPassword: boolean) => {
+      if (addPassword) {
+        this.joinForm.get('password').setValidators([Validators.required]);
+        this.joinForm.get('confirmPassword').setValidators([Validators.required]);
+      }else {
+        this.joinForm.get('password').clearValidators();
+        this.joinForm.get('confirmPassword').clearValidators();
+      }
+      this.joinForm.get('password').updateValueAndValidity();
+      this.joinForm.get('confirmPassword').updateValueAndValidity();
+    })
+  }
+
+  validatePasswords() {
+    if (this.formData.addPassword) {
+      if (this.formData.password == this.formData.confirmPassword) {
+        if (this.formData.passwordSaved) return false;
+      }
+      return true;
+    }
+    return false;
+  }
+
+  seedOptionsChange(seed: any) {
+    this.formData.selectedSeed.id = seed;
+    this.formData.testnet = false;
+    this.formData.derivationPath = this.derivationPathByDefault;
+    this.resetFormFields();
+  }
+
+  resetFormFields() {
+    this.formData.password = null;
+    this.formData.confirmPassword = null;
+    this.formData.passwordSaved = null;
+    this.formData.recoveryPhrase = null;
+  }
+
+  setDerivationPath() {
+    this.formData.derivationPath = this.formData.testnet ? this.derivationPathForTestnet : this.derivationPathByDefault;
+  }
+
+  join() {
+    console.log(this.formData);
+  }
+}