apply constraint to option ±1 button

fixes lesspass/lesspass#203

src/components/Options.vue

@@ -54,7 +54,7 @@
       <div class="col-6 col-sm-4 mb-3 mb-sm-0">
         <label for="passwordLength">{{ $t('Length') }}</label>
         <div class="input-group input-group-sm">
-          <span class="input-group-btn" v-on:click="options.length-=1">
+          <span class="input-group-btn" v-on:click="options.length=decrement(options.length, {min: 5, max: 35})">
             <button class="btn btn-secondary" type="button">
               <i class="fa fa-minus"></i>
             </button>
@@ -65,7 +65,8 @@
                  min="5"
                  max="35"
                  v-model="options.length">
-          <span class="input-group-btn" v-on:click="options.length+=1">
+          <span class="input-group-btn"
+          v-on:click="options.length=increment(options.length, {min: 5, max: 35})">
             <button class="btn btn-secondary" type="button">
               <i class="fa fa-plus"></i>
             </button>
@@ -79,8 +80,8 @@
           {{$t('Counter')}}
         </label>
         <div class="input-group input-group-sm">
-          <span class="input-group-btn" v-on:click="options.counter-=1">
-            <button class="btn btn-secondary" type="button">
+          <span class="input-group-btn" v-on:click="options.counter=decrement(options.counter, {min: 1})">
+              <button class="btn btn-secondary" type="button">
               <i class="fa fa-minus"></i>
             </button>
           </span>
@@ -89,7 +90,7 @@
                  type="number"
                  min="1"
                  v-model="options.counter">
-          <span class="input-group-btn" v-on:click="options.counter+=1">
+                   <span class="input-group-btn" v-on:click="options.counter=increment(options.counter, {min: 1})">
             <button class="btn btn-secondary" type="button">
               <i class="fa fa-plus"></i>
             </button>
@@ -129,6 +130,7 @@
 
 <script type="text/ecmascript-6">
   import Message from '../services/message';
+  import {increment, decrement} from "../services/form-validator";
 
   export default {
     name: 'options',
@@ -169,6 +171,8 @@
       }
     },
     methods: {
+      decrement,
+      increment,
       setVersion(value){
         this.options.length = value === 1 ? 12 : 16;
         this.options.version = value;

src/services/form-validator.js

@@ -0,0 +1,22 @@
+function apply_constraint(value, {min, max}) {
+  if (value > max) {
+    return max;
+  }
+  if (value < min) {
+    return min
+  }
+  return value;
+}
+
+export function increment(value, {min = 0, max}) {
+  return apply_constraint(value + 1, {min, max});
+}
+
+export function decrement(value, {min, max}) {
+  return apply_constraint(value - 1, {min, max});
+}
+
+export default {
+  increment,
+  decrement,
+};

test/form-validator.js

@@ -0,0 +1,19 @@
+import test from "ava";
+import formValidator from "../src/services/form-validator";
+
+test("formValidator.increment()", t => {
+  t.is(formValidator.increment(1, { min: 0, max: 10 }), 2);
+  t.is(formValidator.increment(9, { min: 0, max: 10 }), 10);
+  t.is(formValidator.increment(10, { min: 0, max: 10 }), 10);
+  t.is(formValidator.increment(-1, { min: 0, max: 10 }), 0);
+  t.is(formValidator.increment(-5, { min: 0, max: 10 }), 0);
+  t.is(formValidator.increment(5, { min: 0 }), 6);
+});
+
+test("formValidator.decrement()", t => {
+  t.is(formValidator.decrement(2, { min: 0, max: 10 }), 1);
+  t.is(formValidator.decrement(1, { min: 0, max: 10 }), 0);
+  t.is(formValidator.decrement(0, { min: 0, max: 10 }), 0);
+  t.is(formValidator.decrement(-1, { min: 0, max: 10 }), 0);
+  t.is(formValidator.decrement(15, { min: 0, max: 10 }), 10);
+});