error handling levels

templates/panel/sitekey/add/ts/form/index.ts

@@ -25,6 +25,8 @@ import VIEWS from '../../../../../views/v1/routes';
 import validateDescription from './validateDescription';
 import validateDuration from './validateDuration';
 
+import createError from '../../../../../components/error';
+
 const SITE_KEY_FORM_CLASS = 'sitekey-form';
 const FORM = <HTMLFormElement>document.querySelector(`.${SITE_KEY_FORM_CLASS}`);
 
@@ -53,12 +55,11 @@ const submit = async (e: Event) => {
 
   const res = await fetch(formUrl, genJsonPayload(payload));
   if (res.ok) {
-    alert('success');
     const data = await res.json();
     window.location.assign(VIEWS.listSitekey(data.key));
   } else {
     const err = await res.json();
-    alert(`error: ${err.error}`);
+    createError(err.error);
   }
 };
 

templates/panel/sitekey/add/ts/form/validateDescription.test.ts

@@ -19,6 +19,8 @@ import validateDescription from './validateDescription';
 import {getAddForm, fillDescription} from '../setupTests';
 import {mockAlert} from '../../../../../setUpTests';
 
+import setup from '../../../../../components/error/setUpTests';
+
 mockAlert();
 
 document.body.innerHTML = getAddForm();
@@ -26,6 +28,7 @@ document.body.innerHTML = getAddForm();
 const emptyErr = "can't be empty";
 
 it('validateDescription workds', () => {
+  document.querySelector('body').appendChild(setup());
   try {
     const event = new Event('submit');
     validateDescription(event);

templates/panel/sitekey/add/ts/levels/updateLevel.ts

@@ -19,6 +19,8 @@ import CONST from '../const';
 import getLevelFields from './getLevelFields';
 import {LEVELS} from './index';
 
+import createError from '../../../../../components/error';
+
 /** on-change event handler to update level */
 const updateLevel = (e: Event) => {
   const target = <HTMLInputElement>e.target;
@@ -41,7 +43,7 @@ const updateLevel = (e: Event) => {
     const updatedLevel = getLevelFields(level);
     LEVELS.update(updatedLevel, level);
   } catch (e) {
-    alert(e);
+    createError(e);
   }
 };
 

templates/utils/isBlankString.test.ts

@@ -18,11 +18,15 @@
 import isBlankString from './isBlankString';
 import {mockAlert} from '../setUpTests';
 
+
+import setup from '../components/error/setUpTests';
+
 'use strict';
 
 mockAlert();
 
 it('getFromUrl workds', () => {
+  document.querySelector('body').appendChild(setup());
   expect(isBlankString('test', 'username')).toBe(false);
   try {
     isBlankString('  ', 'username');

templates/utils/isBlankString.ts

@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+import createError from '../components/error/';
 
 const isBlankString = (value: string|number, field: string, event?: Event) => {
   value = value.toString();
@@ -22,7 +23,7 @@ const isBlankString = (value: string|number, field: string, event?: Event) => {
       event.preventDefault();
     }
     const msg = `${field} can't be empty`;
-    alert(msg);
+    createError(msg);
     throw new  Error(msg);
   }
   return false;