1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index 7f972b6f6ee..3ecc0c2a6e5 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -29,6 +29,12 @@ const bindEvents = () => {
   const $newProjectForm = $('#new_project');
   const $projectImportUrl = $('#project_import_url');
   const $projectPath = $('#project_path');
+  const $useTemplateBtn = $('.template-button > input');
+  const $projectFieldsForm = $('.project-fields-form');
+  const $selectedTemplateText = $('.selected-template');
+  const $changeTemplateBtn = $('.change-template');
+  const $selectedIcon = $('.selected-icon svg');
+  const $templateProjectNameInput = $('#template-project-name #project_path');
 
   if ($newProjectForm.length !== 1) {
     return;
@@ -48,6 +54,40 @@ const bindEvents = () => {
     $('.btn_import_gitlab_project').attr('href', `${importHref}?namespace_id=${$('#project_namespace_id').val()}&path=${$projectPath.val()}`);
   });
 
+  function chooseTemplate() {
+    $('.template-option').hide();
+    $projectFieldsForm.addClass('selected');
+    $selectedIcon.removeClass('active');
+    const value = $(this).val();
+    const templates = {
+      rails: {
+        text: 'Ruby on Rails',
+        icon: '.selected-icon .icon-rails',
+      },
+      express: {
+        text: 'NodeJS Express',
+        icon: '.selected-icon .icon-node-express',
+      },
+      spring: {
+        text: 'Spring',
+        icon: '.selected-icon .icon-java-spring',
+      },
+    };
+
+    const selectedTemplate = templates[value];
+    $selectedTemplateText.text(selectedTemplate.text);
+    $(selectedTemplate.icon).addClass('active');
+    $templateProjectNameInput.focus();
+  }
+
+  $useTemplateBtn.on('change', chooseTemplate);
+
+  $changeTemplateBtn.on('click', () => {
+    $('.template-option').show();
+    $projectFieldsForm.removeClass('selected');
+    $useTemplateBtn.prop('checked', false);
+  });
+
   $newProjectForm.on('submit', () => {
     $projectPath.val($projectPath.val().trim());
   });