Merge pull request #3138 from appwrite/fix-ui-improve-validation-of-attributes

fix(ui): improve validation of attributes

app/views/console/database/collection.phtml

@@ -621,7 +621,7 @@ $logs = $this->getParam('logs', null);
         data-failure-param-alert-text="Failed to create attribute"
         data-failure-param-alert-classname="error"
         @reset="array = required = false"
-        x-data="{ array: false, required: false }">
+        x-data="{ array: false, required: false, size: null }">
 
         <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
         <input type="hidden" name="collectionId" data-ls-bind="{{router.params.id}}" />
@@ -631,7 +631,7 @@ $logs = $this->getParam('logs', null);
         <div class="text-fade text-size-xs margin-top-negative-small margin-bottom">Allowed Characters A-Z, a-z, 0-9, and non-leading underscore, hyphen and dot</div>
 
         <label for="string-length">Size</label>
-        <input id="string-length" name="size" type="number" class="margin-bottom" autocomplete="off" required value="255" data-cast-to="integer" />
+        <input id="string-length" name="size" type="number" class="margin-bottom" autocomplete="off" required value="255" data-cast-to="integer" x-model="size" />
 
         <div class="margin-bottom">
             <input x-model="required" name="required" class="button switch" type="checkbox" /> &nbsp; Required <span class="tooltip" data-tooltip="Mark whether this is a required attribute"><i class="icon-info-circled"></i></span>
@@ -643,7 +643,7 @@ $logs = $this->getParam('logs', null);
 
         <label for="xdefault">Default Value</label>
         <template x-if="!(array || required)">
-            <input name="xdefault" type="text" class="margin-bottom-large" autocomplete="off">
+            <input name="xdefault" type="text" class="margin-bottom-large" autocomplete="off" :maxlength="size">
         </template>
         <template x-if="(array || required)">
             <input name="xdefault" type="text" class="margin-bottom-large" autocomplete="off" disabled value="">
@@ -677,7 +677,7 @@ $logs = $this->getParam('logs', null);
         data-failure-param-alert-text="Failed to create attribute"
         data-failure-param-alert-classname="error"
         @reset="array = required = false"
-        x-data="{ array: false, required: false }">
+        x-data="{ array: false, required: false, min: null, max: null }">
 
         <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
         <input type="hidden" name="collectionId" data-ls-bind="{{router.params.id}}" />
@@ -697,18 +697,18 @@ $logs = $this->getParam('logs', null);
         <div class="row responsive thin">
             <div class="col span-6 margin-bottom-small">
                 <label for="integer-min">Min</label>
-                <input id="integer-min" type="number" step="1" class="full-width" name="min" autocomplete="off" data-cast-to="integer" />
+                <input id="integer-min" type="number" step="1" class="full-width" name="min" autocomplete="off" data-cast-to="integer" x-model="min" />
             </div>
             <div class="col span-6 margin-bottom-small">
                 <label for="integer-max">Max</label>
-                <input id="integer-max" type="number" step="1" class="full-width" name="max" autocomplete="off" data-cast-to="integer" />
+                <input id="integer-max" type="number" step="1" class="full-width" name="max" autocomplete="off" data-cast-to="integer" x-model="max" />
             </div>
         </div>
 
         <label for="integer-default">Default Value</label>
 
         <template x-if="!(array || required)">
-            <input name="xdefault" type="number" class="margin-bottom-large" autocomplete="off" data-cast-to="integer">
+            <input name="xdefault" type="number" class="margin-bottom-large" autocomplete="off" data-cast-to="integer" :min="min" :max="max">
         </template>
         <template x-if="(array || required)">
             <input name="xdefault" type="number" class="margin-bottom-large" autocomplete="off" data-cast-to="integer" disabled>
@@ -742,7 +742,7 @@ $logs = $this->getParam('logs', null);
         data-failure-param-alert-text="Failed to create attribute"
         data-failure-param-alert-classname="error"
         @reset="array = required = false"
-        x-data="{ array: false, required: false }">
+        x-data="{ array: false, required: false, min: null, max: null }">
 
         <input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
         <input type="hidden" name="collectionId" data-ls-bind="{{router.params.id}}" />
@@ -762,18 +762,18 @@ $logs = $this->getParam('logs', null);
         <div class="row responsive thin">
             <div class="col span-6 margin-bottom-small">
                 <label for="float-min">Min</label>
-                <input id="float-min" type="number" class="full-width" name="min" step="any" autocomplete="off" data-cast-to="float" />
+                <input id="float-min" type="number" class="full-width" name="min" step="any" autocomplete="off" data-cast-to="float" x-model="min" />
             </div>
             <div class="col span-6 margin-bottom-small">
                 <label for="float-max">Max</label>
-                <input id="float-max" type="number" class="full-width" name="max" step="any" autocomplete="off" data-cast-to="float" />
+                <input id="float-max" type="number" class="full-width" name="max" step="any" autocomplete="off" data-cast-to="float" x-model="max" />
             </div>
         </div>
 
         <label for="float-default">Default Value</label>
 
         <template x-if="!(array || required)">
-            <input name="xdefault" type="number" step="any" class="margin-bottom-large" autocomplete="off" data-cast-to="float">
+            <input name="xdefault" type="number" step="any" class="margin-bottom-large" autocomplete="off" data-cast-to="float" :min="min" :max="max">
         </template>
         <template x-if="(array || required)">
             <input name="xdefault" type="number" step="any" class="margin-bottom-large" autocomplete="off" data-cast-to="float" disabled>

app/views/console/database/document.phtml

@@ -104,6 +104,8 @@ $logs = $this->getParam('logs', null);
                                                                     :placeholder="attr.default"
                                                                     :name="attr.key"
                                                                     :required="attr.required"
+                                                                    :min="attr.min"
+                                                                    :max="attr.max"
                                                                     x-model="doc[attr.key]"
                                                                     data-cast-to="integer" />
                                                             </template>
@@ -114,6 +116,8 @@ $logs = $this->getParam('logs', null);
                                                                     :placeholder="attr.default"
                                                                     :name="attr.key"
                                                                     :required="attr.required"
+                                                                    :min="attr.min"
+                                                                    :max="attr.max"
                                                                     x-model="doc[attr.key]"
                                                                     data-cast-to="float" />
                                                             </template>
@@ -131,6 +135,7 @@ $logs = $this->getParam('logs', null);
                                                                     :placeholder="attr.default"
                                                                     :name="attr.key"
                                                                     :required="attr.required"
+                                                                    :maxlength="attr.size"
                                                                     x-model="doc[attr.key]"
                                                                     data-cast-to="string"></textarea>
                                                             </template>
@@ -197,6 +202,8 @@ $logs = $this->getParam('logs', null);
                                                                                 :placeholder="attr.default"
                                                                                 :name="attr.key"
                                                                                 :required="attr.required"
+                                                                                :min="attr.min"
+                                                                                :max="attr.max"
                                                                                 x-model="doc[attr.key][index]"
                                                                                 data-cast-to="integer" />
                                                                         </template>
@@ -207,6 +214,8 @@ $logs = $this->getParam('logs', null);
                                                                                 :placeholder="attr.default"
                                                                                 :name="attr.key"
                                                                                 :required="attr.required"
+                                                                                :min="attr.min"
+                                                                                :max="attr.max"
                                                                                 x-model="doc[attr.key][index]"
                                                                                 data-cast-to="float" />
                                                                         </template>
@@ -226,6 +235,7 @@ $logs = $this->getParam('logs', null);
                                                                                 :placeholder="attr.default"
                                                                                 :name="attr.key"
                                                                                 :required="attr.required"
+                                                                                :maxlength="attr.size"
                                                                                 x-model="doc[attr.key][index]"
                                                                                 data-cast-to="string"></textarea>
                                                                         </template>

public/dist/scripts/app-all.js

@@ -3746,7 +3746,7 @@ if(this.getFile(id)){this.updateFile(id,{name:file.name,completed:false,failed:f
 target.reset();try{const response=await sdk.storage.createFile(bucketId,fileId,file,read,write,(progress)=>{this.updateFile(id,{id:progress.$id,progress:Math.round(progress.progress),error:"",});id=progress.$id;const file=this.getFile(id)??{};if(file.cancelled===true){throw'USER_CANCELLED';}});const existingFile=this.getFile(id)??{};if(existingFile.cancelled){this.updateFile(id,{id:response.$id,name:response.name,failed:false,});id=response.$id;throw'USER_CANCELLED'}else{this.updateFile(id,{id:response.$id,name:response.name,progress:100,completed:true,failed:false,});id=response.$id;}
 document.dispatchEvent(new CustomEvent('storage.createFile'));}catch(error){if(error==='USER_CANCELLED'){await sdk.storage.deleteFile(bucketId,id);this.updateFile(id,{cancelled:false,failed:true,});this.removeFile(id);}else{this.updateFile(id,{id:id,failed:true,error:error.message??error});}
 document.dispatchEvent(new CustomEvent('storage.createFile'));}}});});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
-throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},3000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
+throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
 router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}else{return url;}}};keys=keys.split(",").map(element=>element.trim());return function(serviceForm,router,window){let url=window.location.href;keys.map(node=>{node=node.split("=");let key=node[0]||"";let name=node[1]||key;let value=getValue(key,"param",serviceForm);url=updateQueryString(name,value?value:null,url);});if(url!==window.location.href){window.history.pushState({},"",url);router.reset();}};},trigger:function(events){return function(document){events=events.trim().split(",");for(let i=0;i<events.length;i++){if(""===events[i]){continue;}

public/dist/scripts/app.js

@@ -696,7 +696,7 @@ if(this.getFile(id)){this.updateFile(id,{name:file.name,completed:false,failed:f
 target.reset();try{const response=await sdk.storage.createFile(bucketId,fileId,file,read,write,(progress)=>{this.updateFile(id,{id:progress.$id,progress:Math.round(progress.progress),error:"",});id=progress.$id;const file=this.getFile(id)??{};if(file.cancelled===true){throw'USER_CANCELLED';}});const existingFile=this.getFile(id)??{};if(existingFile.cancelled){this.updateFile(id,{id:response.$id,name:response.name,failed:false,});id=response.$id;throw'USER_CANCELLED'}else{this.updateFile(id,{id:response.$id,name:response.name,progress:100,completed:true,failed:false,});id=response.$id;}
 document.dispatchEvent(new CustomEvent('storage.createFile'));}catch(error){if(error==='USER_CANCELLED'){await sdk.storage.deleteFile(bucketId,id);this.updateFile(id,{cancelled:false,failed:true,});this.removeFile(id);}else{this.updateFile(id,{id:id,failed:true,error:error.message??error});}
 document.dispatchEvent(new CustomEvent('storage.createFile'));}}});});})(window);(function(window){"use strict";window.ls.view.add({selector:"data-service",controller:function(element,view,container,form,alerts,expression,window){let action=element.dataset["service"];let service=element.dataset["name"]||null;let event=expression.parse(element.dataset["event"]);let confirm=element.dataset["confirm"]||"";let loading=element.dataset["loading"]||"";let loaderId=null;let scope=element.dataset["scope"]||"sdk";let success=element.dataset["success"]||"";let failure=element.dataset["failure"]||"";let running=false;let callbacks={hide:function(){return function(){return element.style.opacity='0';};},reset:function(){return function(){if("FORM"===element.tagName){return element.reset();}
-throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},3000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
+throw new Error("This callback is only valid for forms");};},alert:function(text,classname){return function(alerts){alerts.add({text:text,class:classname||"success"},6000);};},redirect:function(url){return function(router){if(url==="/console"){window.location=url;return;}
 router.change(url||"/");};},reload:function(){return function(router){router.reload();};},state:function(keys){let updateQueryString=function(key,value,url){var re=new RegExp("([?&])"+key+"=.*?(&|#|$)(.*)","gi"),hash;if(re.test(url)){if(typeof value!=="undefined"&&value!==null){return url.replace(re,"$1"+key+"="+value+"$2$3");}else{hash=url.split("#");url=hash[0].replace(re,"$1$3").replace(/(&|\?)$/,"");if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}}else{if(typeof value!=="undefined"&&value!==null){var separator=url.indexOf("?")!==-1?"&":"?";hash=url.split("#");url=hash[0]+separator+key+"="+value;if(typeof hash[1]!=="undefined"&&hash[1]!==null){url+="#"+hash[1];}
 return url;}else{return url;}}};keys=keys.split(",").map(element=>element.trim());return function(serviceForm,router,window){let url=window.location.href;keys.map(node=>{node=node.split("=");let key=node[0]||"";let name=node[1]||key;let value=getValue(key,"param",serviceForm);url=updateQueryString(name,value?value:null,url);});if(url!==window.location.href){window.history.pushState({},"",url);router.reset();}};},trigger:function(events){return function(document){events=events.trim().split(",");for(let i=0;i<events.length;i++){if(""===events[i]){continue;}

public/scripts/views/service.js

@@ -34,7 +34,7 @@
 
         alert: function(text, classname) {
           return function(alerts) {
-            alerts.add({ text: text, class: classname || "success" }, 3000);
+            alerts.add({ text: text, class: classname || "success" }, 6000);
           };
         },