From c5045b6571ea3f5c5c0639d3bab5cab4cdc81394 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 27 Jul 2021 12:26:48 +0545
Subject: [PATCH] update to use custom ID component

---
 app/views/console/comps/header.phtml    |  6 +-
 app/views/console/database/index.phtml  | 10 +++-
 app/views/console/functions/index.phtml | 10 +++-
 app/views/console/home/index.phtml      | 76 ++++++++++++++++++++-----
 app/views/console/keys/index.phtml      | 10 +++-
 app/views/console/storage/index.phtml   | 11 +++-
 app/views/console/tasks/index.phtml     | 11 +++-
 app/views/console/users/index.phtml     | 11 +++-
 app/views/console/users/team.phtml      | 11 +++-
 public/dist/scripts/app-all.js          |  6 +-
 public/dist/scripts/app.js              |  6 +-
 public/scripts/views/forms/custom-id.js | 25 ++++++--
 12 files changed, 153 insertions(+), 40 deletions(-)

diff --git a/app/views/console/comps/header.phtml b/app/views/console/comps/header.phtml
index bc76ede715..ee764ff835 100644
--- a/app/views/console/comps/header.phtml
+++ b/app/views/console/comps/header.phtml
@@ -217,8 +217,10 @@
             type="hidden"
             data-custom-id
             id-type="custom"
-            name="projectId"
-            class="" required maxlength="36" />
+            required
+            maxlength="36"
+            class=""
+            name="projectId" />
 
         <footer>
             <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
diff --git a/app/views/console/database/index.phtml b/app/views/console/database/index.phtml
index 4b6639d24a..fd3122cc76 100644
--- a/app/views/console/database/index.phtml
+++ b/app/views/console/database/index.phtml
@@ -94,8 +94,14 @@
                         data-failure-param-alert-text="Failed to create collection"
                         data-failure-param-alert-classname="error">
 
-                        <label for="collection-id">ID</label>
-                        <input type="text" class="full-width" id="collection-id" name="collectionId" required autocomplete="off" maxlength="128" />
+                        <label for="collection-id">Collection ID</label>
+                        <input
+                            type="hidden"
+                            data-custom-id
+                            id-type="custom"
+                            required
+                            maxlength="36"
+                            name="collectionId" />
 
                         <input type="hidden" id="collection-read" name="read" required data-cast-to="json" value="<?php echo htmlentities(json_encode([])); ?>" />
                         <input type="hidden" id="collection-write" name="write" required data-cast-to="json" value="<?php echo htmlentities(json_encode([])); ?>" />
diff --git a/app/views/console/functions/index.phtml b/app/views/console/functions/index.phtml
index 10db8847a1..76561f66b8 100644
--- a/app/views/console/functions/index.phtml
+++ b/app/views/console/functions/index.phtml
@@ -106,8 +106,14 @@ $runtimes = $this->getParam('runtimes', []);
                             data-failure-param-alert-text="Failed to create function"
                             data-failure-param-alert-classname="error">
 
-                            <label for="functionId">Id</label>
-                            <input type="text" id="functionId" name="functionId" required autocomplete="off" class="margin-bottom" maxlength="128" />
+                            <label for="functionId">Function ID</label>
+                            <input 
+                                type="hidden"
+                                data-custom-id
+                                id-type="custom"
+                                required
+                                maxlength="36"
+                                name="functionId" />
                             
                             <label for="runtime">Runtimes</label>
                             <select name="runtime" id="runtime" required class="margin-bottom-xl">
diff --git a/app/views/console/home/index.phtml b/app/views/console/home/index.phtml
index d1118a6294..9fc4de0c7a 100644
--- a/app/views/console/home/index.phtml
+++ b/app/views/console/home/index.phtml
@@ -277,8 +277,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
         <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
         <input type="hidden" name="type" data-ls-bind="web" />
 
-        <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-        <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_web_app" maxlength="36" />
+        <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+        <input
+            type="hidden"
+            data-custom-id
+            id-type="custom"
+            required
+            maxlength="36"
+            name="platformId"
+            placeholder="my_web_app" />
 
         <label for="hostname">Hostname <span class="tooltip large" data-tooltip="The hostname that your website will use to interact with the <?php echo APP_NAME; ?> APIs in production or development environments. No port number required."><i class="icon-question"></i></span></label>
         <input name="hostname" type="text" class="margin-bottom" autocomplete="off" placeholder="localhost" required>
@@ -354,8 +361,14 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
         <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
         <input type="hidden" name="type" data-ls-bind="android" />
 
-        <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-        <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_android_app" maxlength="36" />
+        <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+        <input type="hidden"
+            data-custom-id
+            id-type="custom"
+            required
+            maxlength="36"
+            name="platformId"
+            placeholder="my_android_app" />
 
         <label for="key">Package Name <span class="tooltip large" data-tooltip="Your package name is generally the applicationId in your app-level build.gradle file."><i class="icon-question"></i></span></label>
         <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="com.company.appname" />
@@ -394,8 +407,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                 <input type="hidden" name="type" data-ls-bind="flutter-ios" />
 
-                <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-        <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_flutter_ios_app" maxlength="36" />
+                <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+                <input 
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    name="platformId"
+                    placeholder="my_flutter_ios_app" />
 
                 <label for="key">Bundle ID <span class="tooltip large" data-tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="com.company.appname" />
@@ -428,8 +448,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                 <input type="hidden" name="type" data-ls-bind="flutter-android" />
 
-                <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-        <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_flutter_android_app" maxlength="36" />
+                <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+                <input 
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    name="platformId"
+                    placeholder="my_flutter_android_app" />
 
                 <label for="key">Package Name <span class="tooltip large" data-tooltip="Your package name is generally the applicationId in your app-level build.gradle file."><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="com.company.appname" />
@@ -461,8 +488,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                 <input type="hidden" name="type" data-ls-bind="flutter-linux" />
 
-                <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-                <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_flutter_linux_app" maxlength="36" />
+                <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+                <input
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    name="platformId"
+                    placeholder="my_flutter_linux_app" />
 
                 <label for="key">Package Name <span class="tooltip large" data-tooltip="Your application name"><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="appname" />
@@ -494,8 +528,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                 <input type="hidden" name="type" data-ls-bind="flutter-macos" />
 
-                <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-                <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_flutter_macos_app" maxlength="36" />
+                <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+                <input
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    name="platformId"
+                    placeholder="my_flutter_macos_app" />
 
                 <label for="key">Bundle ID <span class="tooltip large" data-tooltip="You can find your Bundle Identifier in the General tab for your app's primary target in Xcode."><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="com.company.appname" />
@@ -527,8 +568,15 @@ $usageStatsEnabled = $this->getParam('usageStatsEnabled',true);
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
                 <input type="hidden" name="type" data-ls-bind="flutter-windows" />
 
-                <label for="platformId">ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
-                <input type="text" class="full-width" name="platformId" required autocomplete="off" placeholder="my_flutter_windows_app" maxlength="36" />
+                <label for="platformId">Platform ID <span class="tooltip large" data-tooltip="Choose an ID that will help you distinguish between your different apps."><i class="icon-question"></i></span></label>
+                <input
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    name="platformId"
+                    placeholder="my_flutter_windows_app" />
 
                 <label for="key">Package Name <span class="tooltip large" data-tooltip="Your application name"><i class="icon-question"></i></span></label>
                 <input type="text" class="full-width" name="key" required autocomplete="off" placeholder="appname" />
diff --git a/app/views/console/keys/index.phtml b/app/views/console/keys/index.phtml
index 043690fdfd..de8776752f 100644
--- a/app/views/console/keys/index.phtml
+++ b/app/views/console/keys/index.phtml
@@ -151,8 +151,14 @@ $scopes = $this->getParam('scopes', []);
 
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
 
-                <label for="keyId">ID <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different API keys."><i class="icon-question"></i></span></label>
-                <input type="text" class="full-width" id="keyId" name="keyId" required autocomplete="off" maxlength="128" />
+                <label for="keyId">Key ID <span class="tooltip large" data-tooltip="Choose any name that will help you distinguish between your different API keys."><i class="icon-question"></i></span></label>
+                <input
+                    type="hidden"
+                    data-custom-id
+                    id-type="auto"
+                    required
+                    maxlength="36"
+                    name="keyId" />
 
                 <section data-forms-select-all>
                     <label for="scopes">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank" rel="noopener">Learn more</a>)</label>
diff --git a/app/views/console/storage/index.phtml b/app/views/console/storage/index.phtml
index 3a60bf840e..d28b33f77f 100644
--- a/app/views/console/storage/index.phtml
+++ b/app/views/console/storage/index.phtml
@@ -237,8 +237,15 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
                         data-failure-param-alert-classname="error">
                         <input type="hidden" name="folderId" id="files-folderId" data-cast-to="integer" value="1">
 
-                        <label for="fileId">ID</label>
-                        <input type="text" name="fileId" id="fileId" value="unique()" size="1" required>
+                        <label for="fileId">File ID</label>
+                        <input
+                            type="hidden"
+                            data-custom-id
+                            id-type="auto"
+                            required
+                            maxlength="36"
+                            name="fileId"
+                            id="fileId" />
 
                         <label for="file-read">File</label>
                         <input type="file" name="file" id="file-file" size="1" required>
diff --git a/app/views/console/tasks/index.phtml b/app/views/console/tasks/index.phtml
index 8bb8f509cb..5517d473e2 100644
--- a/app/views/console/tasks/index.phtml
+++ b/app/views/console/tasks/index.phtml
@@ -256,8 +256,15 @@
 
                 <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
 
-                <label for="taskId">ID</label>
-                <input type="text" class="full-width" id="taskId" name="taskId" required autocomplete="off" maxlength="128" />
+                <label for="taskId">Task ID</label>
+                <input
+                    type="hidden"
+                    data-custom-id
+                    id-type="custom"
+                    required
+                    maxlength="36"
+                    id="taskId"
+                    name="taskId" />
 
                 <label data-ls-attrs="for=status" class="margin-bottom">Status
                     <div class="margin-top-small">
diff --git a/app/views/console/users/index.phtml b/app/views/console/users/index.phtml
index 4a6b188eea..b807483014 100644
--- a/app/views/console/users/index.phtml
+++ b/app/views/console/users/index.phtml
@@ -154,8 +154,15 @@ $auth = $this->getParam('auth', []);
                         data-failure-param-alert-text="Failed to create user"
                         data-failure-param-alert-classname="error">
 
-                        <label for="userId">ID</label>
-                        <input type="text" class="full-width" id="userId" name="userId" value="unique()" required autocomplete="off" maxlength="128" />
+                        <label for="userId">User ID</label>
+                        <input
+                            type="hidden"
+                            data-custom-id
+                            id-type="auto"
+                            required
+                            maxlength="36"
+                            id="userId"
+                            name="userId" />
 
                         <label for="user-name">Name</label>
                         <input type="text" class="full-width" id="user-name" name="name" required autocomplete="off" maxlength="128" />
diff --git a/app/views/console/users/team.phtml b/app/views/console/users/team.phtml
index e554ab2d64..2164923dd7 100644
--- a/app/views/console/users/team.phtml
+++ b/app/views/console/users/team.phtml
@@ -115,8 +115,15 @@
                                     <input name="teamId" id="team-teamId" type="hidden" data-ls-bind="{{team.$id}}">
                                     <input name="url" type="hidden" data-ls-bind="{{env.ENDPOINT}}" />
                                     
-                                    <label for="membershipId">ID</label>
-                                    <input name="membershipId" id="membershipId" type="text" required>
+                                    <label for="membershipId">Membership ID</label>
+                                    <input
+                                        type="hidden"
+                                        data-custom-id
+                                        id-type="auto"
+                                        required
+                                        maxlength="36"
+                                        name="membershipId"
+                                        id="membershipId" />
                                     
                                     <label for="email">Email</label>
                                     <input name="email" id="email" type="email" autocomplete="email" required>
diff --git a/public/dist/scripts/app-all.js b/public/dist/scripts/app-all.js
index 2299c91c56..2409514978 100644
--- a/public/dist/scripts/app-all.js
+++ b/public/dist/scripts/app-all.js
@@ -2340,11 +2340,13 @@ code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addE
 function syncA(){element.value=picker.value;update();}
 function syncB(){picker.value=element.value;}
 element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
-element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}else{idType="custom";element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}
+element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";var placeholder=element.getAttribute(placeholder);if(placeholder){writer.setAttribute("placeholder",placeholder);}
+div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";setIdType(idType);}else{idType="custom";setIdType(idType);}}
+var setIdType=function(idType){if(idType=="custom"){element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}else{element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}
 button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";}
 var sync=function(event){if(element.value!=='unique()'){writer.value=element.value;}}
 var syncE=function(event){element.value=writer.value;}
-sync();writer.addEventListener("change",syncE);button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
+sync();setIdType(idType);writer.addEventListener("change",syncE);button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
 str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
 return str.join("&");};let parse=function(filter){if(filter===""){return null;}
 let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
diff --git a/public/dist/scripts/app.js b/public/dist/scripts/app.js
index 0c42f7738e..0238a96bd0 100644
--- a/public/dist/scripts/app.js
+++ b/public/dist/scripts/app.js
@@ -356,11 +356,13 @@ code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;};element.addE
 function syncA(){element.value=picker.value;update();}
 function syncB(){picker.value=element.value;}
 element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-copy",controller:function(element,alerts,document,window){var button=window.document.createElement("i");button.type="button";button.className="icon-docs note copy";button.style.cursor="pointer";element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){let disabled=element.disabled;element.disabled=false;element.focus();element.select();document.execCommand("Copy");if(document.selection){document.selection.empty();}else if(window.getSelection){window.getSelection().removeAllRanges();}
-element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}else{idType="custom";element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}
+element.disabled=disabled;element.blur();alerts.add({text:"Copied to clipboard",class:""},3000);};button.addEventListener("click",copy);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-custom-id",controller:function(element){var prevData="";let idType=element.getAttribute('id-type');var div=window.document.createElement("div");div.className="input-copy";var button=window.document.createElement("i");button.type="button";button.style.cursor="pointer";var writer=document.createElement("input");writer.type="text";writer.className="";var placeholder=element.getAttribute(placeholder);if(placeholder){writer.setAttribute("placeholder",placeholder);}
+div.appendChild(writer);div.appendChild(button);element.parentNode.insertBefore(div,element);writer.autofocus;var switchType=function(event){if(idType=="custom"){idType="auto";setIdType(idType);}else{idType="custom";setIdType(idType);}}
+var setIdType=function(idType){if(idType=="custom"){element.setAttribute('id-type',idType);writer.value=prevData;writer.disabled=false;element.value=prevData;writer.focus();}else{element.setAttribute('id-type',idType);prevData=writer.value;writer.disabled=true;writer.value='auto-generated';element.value='unique()';}
 button.className=idType=="custom"?"icon-cog copy":"icon-edit copy";}
 var sync=function(event){if(element.value!=='unique()'){writer.value=element.value;}}
 var syncE=function(event){element.value=writer.value;}
-sync();writer.addEventListener("change",syncE);button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
+sync();setIdType(idType);writer.addEventListener("change",syncE);button.addEventListener("click",switchType);}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document",controller:function(element,container,search){var formsDocument=(element.dataset["formsDocument"]||'');var searchButton=(element.dataset["search"]||0);let path=container.scope(searchButton);element.addEventListener('click',function(){search.selected=element.value;search.path=path;document.dispatchEvent(new CustomEvent(formsDocument,{bubbles:false,cancelable:true}));});}});})(window);(function(window){"use strict";window.ls.container.get("view").add({selector:"data-forms-document-preview",controller:function(element,container,search){element.addEventListener('change',function(){console.log(element.value);});}});})(window);(function(window){window.ls.container.get("view").add({selector:"data-forms-filter",controller:function(document,container,expression,element,form,di){let name=element.dataset["formsFilter"]||"";let events=element.dataset["event"]||"";let serialize=function(obj,prefix){let str=[],p;for(p in obj){if(obj.hasOwnProperty(p)){let k=prefix?prefix+"["+p+"]":p,v=obj[p];if(v===""){continue;}
 str.push(v!==null&&typeof v==="object"?serialize(v,k):encodeURIComponent(k)+"="+encodeURIComponent(v));}}
 return str.join("&");};let parse=function(filter){if(filter===""){return null;}
 let operatorsMap=["!=",">=","<=","=",">","<"];let operator=null;for(let key=0;key<operatorsMap.length;key++){if(filter.indexOf(operatorsMap[key])>-1){operator=operatorsMap[key];}}
diff --git a/public/scripts/views/forms/custom-id.js b/public/scripts/views/forms/custom-id.js
index 2cf808a91d..8f40edbf99 100644
--- a/public/scripts/views/forms/custom-id.js
+++ b/public/scripts/views/forms/custom-id.js
@@ -16,13 +16,17 @@
         var button = window.document.createElement("i");
         
         button.type = "button";
-        button.className = idType == "custom" ? "icon-cog copy" : "icon-edit copy";
         button.style.cursor = "pointer";
         
         
         var writer = document.createElement("input");
         writer.type = "text";
         writer.className = "";
+        var placeholder = element.getAttribute(placeholder);
+        if(placeholder) {
+          writer.setAttribute("placeholder", placeholder);
+        }
+          
         
 
         div.appendChild(writer);
@@ -33,18 +37,26 @@
         var switchType = function(event) {
           if(idType == "custom") {
             idType = "auto";
-            element.setAttribute('id-type', idType);
-            prevData = writer.value;
-            writer.disabled = true;
-            writer.value = 'auto-generated';
-            element.value = 'unique()';
+            setIdType(idType);
           } else {
             idType = "custom";
+            setIdType(idType);
+          }
+        }
+        
+        var setIdType = function(idType) {
+          if(idType == "custom") {
             element.setAttribute('id-type', idType);
             writer.value = prevData;
             writer.disabled = false;
             element.value = prevData;
             writer.focus();
+          } else {
+            element.setAttribute('id-type', idType);
+            prevData = writer.value;
+            writer.disabled = true;
+            writer.value = 'auto-generated';
+            element.value = 'unique()';
           }
           button.className = idType == "custom" ? "icon-cog copy" : "icon-edit copy";
         }
@@ -60,6 +72,7 @@
         }
 
         sync();
+        setIdType(idType);
         writer.addEventListener("change", syncE);
         button.addEventListener("click", switchType);