From 661931d8b0d411519d394060f679f59ab0f8f969 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Thu, 7 Oct 2021 13:02:56 +1300
Subject: [PATCH] fix(template): add name validation for template name EE-1806
 (#5823)

* add name validation for tempalte name
---
 app/constants.js                              |  1 +
 .../customTemplateCommonFields.html           | 22 ++++++++++++++++++-
 .../custom-template-common-fields/index.js    |  1 +
 .../forms/stack-from-template-form/index.js   |  1 +
 .../stackFromTemplateForm.html                | 16 +++++++++++---
 .../createCustomTemplateView.html             |  7 +++++-
 .../createCustomTemplateViewController.js     |  3 +++
 .../customTemplatesView.html                  |  1 +
 .../customTemplatesViewController.js          |  2 ++
 9 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/app/constants.js b/app/constants.js
index f33165179..7c45f2d61 100644
--- a/app/constants.js
+++ b/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]+$';
diff --git a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html b/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
index 255097cea..44808228e 100644
--- a/app/portainer/components/custom-template-common-fields/customTemplateCommonFields.html
+++ b/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">
diff --git a/app/portainer/components/custom-template-common-fields/index.js b/app/portainer/components/custom-template-common-fields/index.js
index 755313e57..2c78b25d9 100644
--- a/app/portainer/components/custom-template-common-fields/index.js
+++ b/app/portainer/components/custom-template-common-fields/index.js
@@ -7,5 +7,6 @@ angular.module('portainer.app').component('customTemplateCommonFields', {
     formValues: '=',
     showPlatformField: '<',
     showTypeField: '<',
+    nameRegex: '<',
   },
 });
diff --git a/app/portainer/components/forms/stack-from-template-form/index.js b/app/portainer/components/forms/stack-from-template-form/index.js
index 7d7ad21ad..dda50b2bd 100644
--- a/app/portainer/components/forms/stack-from-template-form/index.js
+++ b/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',
diff --git a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
index 30c499458..7a0bfcf51 100644
--- a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
+++ b/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 -->
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
index 5a1f2fff7..c165a9d15 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateView.html
+++ b/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">
diff --git a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js b/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
index 7e4153659..614486c0a 100644
--- a/app/portainer/views/custom-templates/create-custom-template-view/createCustomTemplateViewController.js
+++ b/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);
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
index d8328cfd5..68742e506 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesView.html
+++ b/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"
diff --git a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js b/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
index e4cc91ef5..4ac2a1c01 100644
--- a/app/portainer/views/custom-templates/custom-templates-view/customTemplatesViewController.js
+++ b/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 = {