fix(template): add name validation for template name EE-1806 (#5823)

* add name validation for tempalte name

app/constants.js

@@ -31,3 +31,4 @@ angular
 
 export const PORTAINER_FADEOUT = 1500;
 export const STACK_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';
+export const TEMPLATE_NAME_VALIDATION_REGEX = '^[-_a-z0-9]+$';

app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html

@@ -5,7 +5,27 @@
       Title
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" ng-model="$ctrl.formValues.Title" id="template_title" name="template_title" placeholder="e.g. mytemplate" auto-focus required />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="$ctrl.formValues.Title"
+        ng-pattern="$ctrl.nameRegex"
+        id="template_title"
+        name="template_title"
+        placeholder="e.g. mytemplate"
+        auto-focus
+        required
+      />
+    </div>
+  </div>
+  <div class="form-group" ng-show="commonCustomTemplateForm.template_title.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="commonCustomTemplateForm.template_title.$error">
+        <p ng-message="pattern">
+          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+          <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
+        </p>
+      </div>
     </div>
   </div>
   <div class="form-group" ng-show="commonCustomTemplateForm.template_title.$invalid">

app/portainer/components/custom-template-common-fields/index.js

@@ -7,5 +7,6 @@ angular.module('portainer.app').component('customTemplateCommonFields', {
     formValues: '=',
     showPlatformField: '<',
     showTypeField: '<',
+    nameRegex: '<',
   },
 });

app/portainer/components/forms/stack-from-template-form/index.js

@@ -8,6 +8,7 @@ angular.module('portainer.app').component('stackFromTemplateForm', {
     state: '=',
     createTemplate: '<',
     unselectTemplate: '<',
+    nameRegex: '<',
   },
   transclude: {
     advanced: '?advancedForm',

app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html

@@ -2,7 +2,7 @@
   <rd-widget>
     <rd-widget-custom-header icon="$ctrl.template.Logo" title-text="$ctrl.template.Title"></rd-widget-custom-header>
     <rd-widget-body classes="padding">
-      <form class="form-horizontal">
+      <form class="form-horizontal" name="stackTemplateForm">
         <!-- description -->
         <div ng-if="$ctrl.template.Note">
           <div class="col-sm-12 form-section-title">
@@ -20,9 +20,19 @@
         </div>
         <!-- name-input -->
         <div class="form-group">
-          <label for="container_name" class="col-sm-2 control-label text-left">Name</label>
+          <label for="template_name" class="col-sm-2 control-label text-left">Name</label>
           <div class="col-sm-10">
-            <input type="text" name="container_name" class="form-control" ng-model="$ctrl.formValues.name" placeholder="e.g. myStack" required />
+            <input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required />
+          </div>
+        </div>
+        <div class="form-group" ng-show="stackTemplateForm.template_name.$invalid">
+          <div class="col-sm-12 small text-warning">
+            <div ng-messages="stackTemplateForm.template_name.$error">
+              <p ng-message="pattern">
+                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
+              </p>
+            </div>
           </div>
         </div>
         <!-- !name-input -->

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html

@@ -8,7 +8,12 @@
     <rd-widget>
       <rd-widget-body>
         <form class="form-horizontal" name="customTemplateForm">
-          <custom-template-common-fields form-values="$ctrl.formValues" show-platform-field="true" show-type-field="true"></custom-template-common-fields>
+          <custom-template-common-fields
+            form-values="$ctrl.formValues"
+            show-platform-field="true"
+            show-type-field="true"
+            name-regex="$ctrl.state.templateNameRegex"
+          ></custom-template-common-fields>
 
           <!-- build-method -->
           <div ng-if="!$ctrl.state.fromStack">

app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
+import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 class CreateCustomTemplateViewController {
   /* @ngInject */
@@ -43,7 +44,9 @@ class CreateCustomTemplateViewController {
       fromStack: false,
       loading: true,
       isEditorDirty: false,
+      templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
     };
+
     this.templates = [];
 
     this.createCustomTemplate = this.createCustomTemplate.bind(this);

app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html

@@ -11,6 +11,7 @@
     ng-if="$ctrl.state.selectedTemplate"
     template="$ctrl.state.selectedTemplate"
     form-values="$ctrl.formValues"
+    name-regex="$ctrl.state.templateNameRegex"
     state="$ctrl.state"
     create-template="$ctrl.createStack"
     unselect-template="$ctrl.unselectTemplate"

app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js

@@ -1,5 +1,6 @@
 import _ from 'lodash-es';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
+import { TEMPLATE_NAME_VALIDATION_REGEX } from '@/constants';
 
 class CustomTemplatesViewController {
   /* @ngInject */
@@ -44,6 +45,7 @@ class CustomTemplatesViewController {
       actionInProgress: false,
       isEditorVisible: false,
       deployable: false,
+      templateNameRegex: TEMPLATE_NAME_VALIDATION_REGEX,
     };
 
     this.currentUser = {