From 988c855163f9511a45f11b16c592239edefdf305 Mon Sep 17 00:00:00 2001
From: Burton Rheutan <rheutan7@gmail.com>
Date: Sun, 6 Jan 2019 10:55:31 -0600
Subject: [PATCH] Gateway UI - validate manual input

This change validates manual input to the gateway UI when deploying
new functions. This is to prevent poor user experience when attempting
to deploy a function manually from the UI.

The validation check on the function name is the same pattern that
is used in the CLI to ensure that when the deploy button is pressed,
the function will not fail validation.

Signed-off-by: Burton Rheutan <rheutan7@gmail.com>
---
 gateway/assets/script/bootstrap.js        |  2 +-
 gateway/assets/templates/newfunction.html | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/gateway/assets/script/bootstrap.js b/gateway/assets/script/bootstrap.js
index 01b002a2..57274dea 100644
--- a/gateway/assets/script/bootstrap.js
+++ b/gateway/assets/script/bootstrap.js
@@ -2,7 +2,7 @@
 // Copyright (c) Alex Ellis 2017. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
-var app = angular.module('faasGateway', ['ngMaterial', 'faasGateway.funcStore']);
+var app = angular.module('faasGateway', ['ngMaterial', 'ngMessages', 'faasGateway.funcStore']);
 
 app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$filter', '$mdDialog', '$mdToast', '$mdSidenav',
     function($scope, $log, $http, $location, $interval, $filter, $mdDialog, $mdToast, $mdSidenav) {
diff --git a/gateway/assets/templates/newfunction.html b/gateway/assets/templates/newfunction.html
index 659c154f..ec9dead4 100644
--- a/gateway/assets/templates/newfunction.html
+++ b/gateway/assets/templates/newfunction.html
@@ -28,13 +28,20 @@
                                 <md-tooltip md-direction="bottom">Docker image name and tag to use for function i.e. functions/alpine:latest</md-tooltip>
                                 <label>Docker image:</label>
                                 <input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="2">
+                                <div ng-messages="userForm.dockerImage.$error">
+                                    <div ng-message="required">Docker image is required.</div>
+                                </div>
                             </md-input-container>
                         </div>
                         <div layout-gt-xs="row">
                             <md-input-container class="md-block" flex-gt-sm>
                                 <md-tooltip md-direction="bottom">Name of the function - must be a valid DNS entry</md-tooltip>
                                 <label>Function name:</label>
-                                <input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="2">
+                                <input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="2" ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/" />
+                                <div ng-messages="userForm.serviceName.$error">
+                                    <div ng-message="required">Function name is required.</div>
+                                    <div ng-message="pattern">Function name can only contain a-z, 0-9 and dashes</div>
+                                </div>
                             </md-input-container>
                         </div>
                         <div layout-gt-xs="row">
@@ -64,7 +71,7 @@
         <md-button ng-click="closeDialog()" class="md-secondary">
             Close Dialog
         </md-button>
-        <md-button ng-click="createFunc()" class="md-primary">
+        <md-button ng-disabled="userForm.$invalid" ng-click="createFunc()" class="md-primary">
             Deploy
         </md-button>
     </md-dialog-actions>