Min/Max Directives

Min/Max Directives

controllers/lnd/graphInfo.js

@@ -1,6 +1,6 @@
 var request = require('request-promise');
-var options = require("../../connect");
 var common = require('../../common');
+var options = {};
 
 exports.getGraphInfo = (req, res, next) => {
   options = common.getOptions();

src/app/clightning/peers-channels/channels/channel-manage/channel-manage.component.html

@@ -12,11 +12,11 @@
       <mat-error *ngIf="!selectedPeer">Alias is required.</mat-error>
     </mat-form-field>
     <mat-form-field fxFlex="25" fxFlex.gt-sm="30" fxLayoutAlign="start end">
-      <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" nonNegativeAmount="{{totalBalance}}">
+      <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" max="{{totalBalance}}">
       <mat-hint>(Wallet Bal: {{totalBalance}}, Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
       <span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
       <mat-error *ngIf="!fundingAmount">Amount is required.</mat-error>
-      <mat-error *ngIf="amount.errors?.negative">Amount must be less than or equal to {{totalBalance}}.</mat-error>
+      <mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
     </mat-form-field>
     <div fxFlex="15" fxFlex.gt-sm="20" fxLayoutAlign="start center" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
       <mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>

src/app/lnd/peers-channels/channels/channel-manage/channel-manage.component.html

@@ -12,11 +12,11 @@
       <mat-error *ngIf="!selectedPeer">Alias is required.</mat-error>
     </mat-form-field>
     <mat-form-field fxFlex="25" fxFlex.gt-sm="30" fxLayoutAlign="start end">
-      <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" nonNegativeAmount="{{totalBalance}}">
+      <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" max="{{totalBalance}}">
       <mat-hint>(Wallet Bal: {{totalBalance}}, Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
       <span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
       <mat-error *ngIf="!fundingAmount">Amount is required.</mat-error>
-      <mat-error *ngIf="amount.errors?.negative">Amount must be less than or equal to {{totalBalance}}.</mat-error>
+      <mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
     </mat-form-field>
     <div fxFlex="15" fxFlex.gt-sm="20" fxLayoutAlign="start center" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
       <mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>

src/app/shared/components/data-modal/confirmation-message/confirmation-message.component.html

@@ -11,7 +11,7 @@
         <p *ngIf="data.titleMessage" fxLayoutAlign="start center" class="pb-1">{{data.titleMessage}}</p>
         <div *ngIf="flgShowInput" fxLayoutAlign="space-between center" class="mb-2">
           <mat-form-field *ngFor="let getInput of getInputs; index as i" [fxFlex]="getInput.width">
-            <input matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [type]="getInput.inputType" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
+            <input matInput [placeholder]="getInput.placeholder" name="input{{i}}" [min]="getInput.min" [step]="getInput.step" [type]="getInput.inputType | lowercase" [(ngModel)]="getInput.inputValue" [tabindex]="i+1" required>
             <mat-error *ngIf="!getInput.inputValue">{{getInput.placeholder}} is required.</mat-error>
           </mat-form-field>
         </div>        

src/app/shared/components/data-modal/open-channel-cl/open-channel.component.html

@@ -47,11 +47,11 @@
           </div>
           <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">
             <mat-form-field fxFlex="48" fxLayoutAlign="start end">
-              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" nonNegativeAmount="{{totalBalance}}">
+              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" max="{{totalBalance}}">
               <mat-hint>(Wallet Bal: {{totalBalance}}, Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
               <span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
               <mat-error *ngIf="!fundingAmount">Amount is required.</mat-error>
-              <mat-error *ngIf="amount.errors?.negative">Amount must be less than or equal to {{totalBalance}}.</mat-error>
+              <mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
             </mat-form-field>
             <div fxFlex="48" fxLayoutAlign="start center">
               <mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>

src/app/shared/components/data-modal/open-channel-lnd/open-channel.component.html

@@ -47,11 +47,11 @@
           </div>
           <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">
             <mat-form-field fxFlex="60" fxLayoutAlign="start end">
-              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" max="{{totalBalance}}" tabindex="1" required name="amount" #amount="ngModel" nonNegativeAmount="{{totalBalance}}">
+              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" max="{{totalBalance}}" tabindex="1" required name="amount" #amount="ngModel" max="{{totalBalance}}">
               <mat-hint>(Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
               <span matSuffix> {{information?.smaller_currency_unit}} </span>
               <mat-error *ngIf="!fundingAmount">Amount is required.</mat-error>
-              <mat-error *ngIf="amount.errors?.negative">Amount must be less than or equal to {{totalBalance}}.</mat-error>
+              <mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
             </mat-form-field>
             <div fxFlex="35" fxLayoutAlign="start center">
               <mat-slide-toggle tabindex="2" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>

src/app/shared/components/login/login.component.html

@@ -8,7 +8,7 @@
       <mat-card-content class="card-content-gap">
         <form (ngSubmit)="onLogin()" #loginForm="ngForm"  fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between">
           <mat-form-field fxFlex="100" fxLayoutAlign="start">
-            <input matInput placeholder="Password" type="password" id="password" name="password" [(ngModel)]="password" tabindex="1" required>
+            <input autoFocus matInput placeholder="Password" type="password" id="password" name="password" [(ngModel)]="password" tabindex="1" required>
             <mat-error *ngIf="!password">Password is required.</mat-error>
           </mat-form-field>
           <div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2">

src/app/shared/directive/clipboard.directive.spec.ts

@@ -1,8 +0,0 @@
-import { ClipboardDirective } from './clipboard.directive';
-
-describe('ClipboardDirective', () => {
-  it('should create an instance', () => {
-    const directive = new ClipboardDirective();
-    expect(directive).toBeTruthy();
-  });
-});

src/app/shared/directive/max-amount.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, Input } from "@angular/core";
+import { NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';
+
+@Directive({
+    selector: "input[max]",
+    providers: [{provide: NG_VALIDATORS, useExisting: MaxValidator, multi: true}]
+})
+export class MaxValidator implements Validator {
+  @Input() max:number;
+
+  validate(control: AbstractControl): any {
+    return this.max ? Validators.max(+this.max)(control) : null;
+  }
+}

src/app/shared/directive/min-amount.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, Input } from '@angular/core';
+import { NG_VALIDATORS, Validator, Validators, AbstractControl } from '@angular/forms';
+
+@Directive({
+  selector: 'input[min]',
+  providers: [{provide: NG_VALIDATORS, useExisting: MinValidator, multi: true}]
+})
+export class MinValidator implements Validator {
+  @Input() min:number;
+
+  validate(control: AbstractControl): any {
+    return this.min ? Validators.min(+this.min)(control) : null;
+  }
+}

src/app/shared/directive/non-negative-amount.directive.ts

@@ -1,18 +0,0 @@
-import { Directive, Input } from "@angular/core";
-import { Validator, AbstractControl, NG_VALIDATORS } from "@angular/forms";
-
-@Directive({
-    selector: "[nonNegativeAmount]",
-    providers: [{
-        provide: NG_VALIDATORS,
-        useExisting: NonNegativeAmountValidator,
-        multi: true
-    }]
-})
-export class NonNegativeAmountValidator implements Validator {
-  @Input('nonNegativeAmount') nonNegativeAmount: number;
-
-  validate(c: AbstractControl): any {
-    return (this.nonNegativeAmount && (this.nonNegativeAmount - +c.value < 0 )) ? { 'negative' : true } : null;
-  }
-}

src/app/shared/shared.module.ts

@@ -45,13 +45,14 @@ import { ChannelRebalanceComponent } from './components/data-modal/channel-rebal
 import { CLOpenChannelComponent } from './components/data-modal/open-channel-cl/open-channel.component';
 import { OpenChannelComponent } from './components/data-modal/open-channel-lnd/open-channel.component';
 import { ShowPubkeyComponent } from './components/data-modal/show-pubkey/show-pubkey.component';
+import { AuthSettingsComponent } from './components/settings/auth-settings/auth-settings.component';
 import { ClipboardDirective } from './directive/clipboard.directive';
 import { AutoFocusDirective } from './directive/auto-focus.directive';
-import { NonNegativeAmountValidator } from './directive/non-negative-amount.directive';
+import { MaxValidator } from './directive/max-amount.directive';
+import { MinValidator } from './directive/min-amount.directive';
 import { RemoveLeadingZerosPipe } from './pipes/app.pipe';
 
 import { LoggerService, ConsoleLoggerService } from '../shared/services/logger.service';
-import { AuthSettingsComponent } from './components/settings/auth-settings/auth-settings.component';
 
 @NgModule({
   imports: [
@@ -153,7 +154,8 @@ import { AuthSettingsComponent } from './components/settings/auth-settings/auth-
     CurrencyUnitConverterComponent,
     ClipboardDirective,
     AutoFocusDirective,
-    NonNegativeAmountValidator,
+    MaxValidator,
+    MinValidator,
     QRCodeModule,
     RemoveLeadingZerosPipe,
     PerfectScrollbarModule
@@ -179,7 +181,8 @@ import { AuthSettingsComponent } from './components/settings/auth-settings/auth-
     ErrorComponent,
     ClipboardDirective,
     AutoFocusDirective,
-    NonNegativeAmountValidator,
+    MaxValidator,
+    MinValidator,
     RemoveLeadingZerosPipe,
     CLOpenChannelComponent,
     OpenChannelComponent,

src/app/shared/theme/styles/change-theme.scss

@@ -463,6 +463,12 @@
     overflow: hidden;
   }
 
+  .mat-icon-button {
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+  }
+
   .balances-info-pie-chart {
     & .legend-label:nth-child(1) .legend-label-color {
       background-color: mat-color($primary, 200) !important;

src/environments/version.ts

@@ -1 +1 @@
-export const VERSION = '0.6.5-beta';
+export const VERSION = '0.6.5-beta';