Merge pull request #2342 from dibdot/fw

[oweals/luci.git] / applications / luci-app-openvpn / luasrc / view / openvpn / cbi-select-input-add.htm

diff --git a/applications/luci-app-openvpn/luasrc/view/openvpn/cbi-select-input-add.htm b/applications/luci-app-openvpn/luasrc/view/openvpn/cbi-select-input-add.htm
index 0166de778e4c3d984dfd994a0c8f40a4a7b01b88..e75bfda900bd3fcfb0fa9f42167dd34af00fcbff 100644 (file)
--- a/applications/luci-app-openvpn/luasrc/view/openvpn/cbi-select-input-add.htm
+++ b/applications/luci-app-openvpn/luasrc/view/openvpn/cbi-select-input-add.htm
@@ -1,11 +1,111 @@
-<div class="cbi-section-create">
-       <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
-       <input type="text" class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.text" />
-       <select class="cbi-section-create-name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.select">
-       <%- for k, v in luci.util.kspairs(self.add_select_options) do %>
-               <option value="<%=k%>"><%=luci.util.pcdata(v)%></option>
-       <% end -%>
-       </select>
-       <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>" title="<%:Add%>" />
-       <% if self.invalid_cts then %><br /><%:Invalid%></div><% end %>
+
+<script type="text/javascript">
+//<![CDATA[
+       function vpn_add()
+       {
+               var vpn_name     = div_add.querySelector("#instance_name1").value.replace(/[^\x00-\x7F]|[\s!@#$%^&*()\-+=\[\]{};':"\\|,<>\/?]/g,'');
+               var vpn_template = div_add.querySelector("#instance_template").value;
+               var form         = document.getElementsByName('cbi')[0];
+
+               if (!vpn_name || !vpn_name.length)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("The 'Name' field must not be empty!"))%>", 2000);
+               }
+
+               document.getElementById("instance_name1").value = vpn_name;
+               if (document.getElementById("cbi-openvpn-" + vpn_name) != null)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("Instance with that name already exists!"))%>", 2000);
+               }
+
+               if (!vpn_template || !vpn_template.length)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("Please select a valid VPN template!"))%>", 2000);
+               }
+
+               if (form)
+               {
+                       form.submit();
+               }
+       }
+
+       function vpn_upload()
+       {
+               var vpn_name = div_upload.querySelector("#instance_name2").value.replace(/[^\x00-\x7F]|[\s!@#$%^&*()\-+=\[\]{};':"\\|,<>\/?]/g,'');
+               var vpn_file = document.getElementById("ovpn_file").value;
+               var form     = document.getElementsByName('cbi')[0];
+
+               if (!vpn_name || !vpn_name.length)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("The 'Name' field must not be empty!"))%>", 2000);
+               }
+
+               document.getElementById("instance_name2").value = vpn_name;
+               if (document.getElementById("cbi-openvpn-" + vpn_name) != null)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("Instance with that name already exists!"))%>", 2000);
+               }
+
+               if (!vpn_file || !vpn_file.length)
+               {
+                       return info_message(vpn_output, "<%=pcdata(translate("Please select a valid OVPN config file to upload!"))%>", 2000);
+               }
+
+               if (form)
+               {
+                       form.enctype = 'multipart/form-data';
+                       form.action  = '<%=url('admin/services/openvpn/upload')%>';
+                       form.submit();
+               }
+       }
+
+       function info_message(output, msg, timeout)
+       {
+               timeout = timeout || 0;
+               output.innerHTML = '<em>' + msg + '</em>';
+               if (timeout > 0)
+               {
+                       setTimeout(function(){ output.innerHTML=""}, timeout);
+               }
+       }
+//]]>
+</script>
+
+<%+openvpn/ovpn_css%>
+
+<div class="cbi-section-node">
+       <div class="table cbi-section-table">
+               <h4><%:Template based configuration%></h4>
+               <div class="tr cbi-section-table-row" id="div_add">
+                       <div class="td left">
+                               <input type="text" maxlength="20" placeholder="Instance name" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.text" id="instance_name1" />
+                       </div>
+                       <div class="td left">
+                               <select id="instance_template" name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.select">
+                                       <option value="" selected="selected" disabled="disabled"><%:Select template ...%></option>
+                                       <%- for k, v in luci.util.kspairs(self.add_select_options) do %>
+                                               <option value="<%=k%>"><%=luci.util.pcdata(v)%></option>
+                                       <% end -%>
+                               </select>
+                       </div>
+                       <div class="td left">
+                               <input class="cbi-button cbi-button-add" type="submit" onclick="vpn_add(); return false;" value="<%:Add%>" title="<%:Add template based configuration%>" /><br />
+                       </div>
+               </div>
+               <h4><%:OVPN configuration file upload%></h4>
+               <div class="tr cbi-section-table-row" id="div_upload">
+                       <div class="td left">
+                               <input type="text" maxlength="20" placeholder="Instance name" name="instance_name2" id="instance_name2" />
+                       </div>
+                       <div class="td left">
+                               <input type="file" name="ovpn_file" id="ovpn_file" accept="application/x-openvpn-profile,.ovpn" />
+                       </div>
+                       <div class="td left">
+                               <input class="cbi-button cbi-button-add" type="submit" onclick="vpn_upload(); return false;" value="<%:Upload%>" title="<%:Upload ovpn file%>" />
+                       </div>
+               </div>
+       </div>
+       <div class="vpn-output">
+               <span id="vpn_output"></span>
+       </div>
 </div>