Can't set defaultValue using react.rb - react.rb

My code is
input(type: "text", name: "name", defalut_value: obj.name)
and I try this too
input(type: "text", name: "name", defalutValue: obj.name)
I always got
<input type="text" name="name" data-reactid=".0.1.1.1.1">
with no "defalutValue"

Short answer: try defaultValue (not defalutValue) (you had a typo in the string)
Long answer:
React only passes along standard attributes or data attributes (like "data-foo") to built in tags everything else is scrubbed off. Standard attributes that have dashes, should be camel cased (i.e. defaultValue.)
The camel casing is a bit inconsistent and is planned to be fixed in 0.9 BTW
For now the rules are:
1) for built in tags, only standard attributes or attributes beginning with "data-..." are passed along.
2) if the html attribute has a dash (like default-value) the react attribute will be camel cased (like defaultValue) except for data- tags.
3) For application defined components you need to use a legal ruby variable name, and class and style attributes are handled specially.
Here is a working example http://goo.gl/abv28C

Related

Display markdown safely as HTML in Vue3

So I have a set of strings, with some "custom markdown" that I have created. My intention is to render these strings as HTML in the frontend. Let's say, I have this string:
This is a string <color>that I need</color> to\nrender <caution>safely in the browser</caution>. This is some trailing text
I would be expecting to get something like:
This is a string <span class="primaryColor">that I need</span> to<br>render <div class="caution">safely in the browser</div>. This is some trailing text
And the way I do it right now is with some basic Regex:
toHtml = text
.replace(/<color>(.*)<\/color>/gim, "<span class='primaryColor'>$1</span>")
.replace(/\\n/g, "<br>")
.replace(/<caution>(.*)<\/caution>/gims, "<div class='caution'>$1</div>")
This works fine and returns the correct string. And then for printing, in the template I just:
<div id="container" v-html="result"></div>
My problem is that at some point I expect users to be able to enter this strings themselves, and that would be displayed to other users too. So for sure, I am gonna be vulnerable to XSS attacks.
Is there any alternative I can use to avoid this? I have been looking at https://github.com/Vannsl/vue-3-sanitize which looks like a good way of just allowing the div, span and br tags that I am using, and set the allowed attributes to be only class for all the tags. Would this be safe enough? Is there something else I should do?
In that case, I believe it will not be necessary to sanitize it in the backend too, right? Meaning, there will be no way for the web browser to execut malicious code, even if the string in the server contains <script>malicious code</script>, right?
My problem is that at some point I expect users to be able to enter this strings themselves
So, Do we have a form input for the users to enter the string which you mentioned in the post ? If Yes, My suggestion is that you can sanitize the user input at first place before passing to the backend. So that in backend itself no malicious code should be stored.
Hence, By using string.replace() method. You can first replace the malicious tags for ex. <script>, <a, etc. from the input string and then store that in a database.
Steps you can follow :
Create a blacklist variable which will contain the regex of non-allowed characters/strings.
By using string.replace(), replace all the occurrence of the characters available in the string as per the blacklist regex with the empty string.
Store the sanitized string in database.
So that, You will not get worried about the string coming from backend and you can bind that via v-html without any harm.

How The Form Validation Is Done In JHIpster Front End?

I need to modify a form validation because some of the inputs are generated by the system instead of human input, those input fields will be filled in a controller. In other words, its DTO has fewer fields with validation constraints than the entity class. I am investigating
$v.myEntity.$invalid
I have a look at all related typescript files and don't see how it is done. Vue is the framework for the front end. I assume that it is the same for the front end regardless of the Javascript framework.
JHipster + Vue uses vuelidate for form validation. Look for an object called validations near the top of your .component.ts files.
Something like this:
const validations: any = {
testEntity: {
testField: {
required,
},
},
};
For example, to make testField no longer required on the front end, remove required, on that .component.ts and the required keyword on the corresponding input on your .vue file.
Remember to also remove the #NotNull on the entity DTO so it's not rejected, and then you can fill it up with whatever you need on the server side.

What is the meaning of 's' in {l s='Accept PayPal' mod='paypal'}

I'm new to Prestashop. While learning I found this
{l s='Accept PayPal' mod='paypal'}
I'm curious what does s means in the above statement. I know l is for the language but I don't know the meaning of s.
s means string and is the string to be translated.
l() is a custom Smarty function that we added in PrestaShop to make templates (.tpl files) translatable.
We registered it in /config/smarty.config.inc.php on line 86:
smartyRegisterFunction($smarty, 'function', 'l', 'smartyTranslate', false);
And then added it to \config\smartyfront.config.inc.php and config\smartyadmin.config.inc.php:
function smartyTranslate($params, $smarty)
You can use the following parameters:
mod To be used only within module templates (.tpl) files, with the name of the related module
Example: {l s='My module text' mod='mymodulename'}
js To be used within JavaScript code blocks, the translated content will be escaped
Example: var my_var = '{l s='Delete' d='Admin.Actions' js=1}';
pdf To be used in reference to a pdf file
Example: {l s='Note' d='Shop.Pdf' pdf='true'}
d To be used in reference to a specific translation file
Example: {l s='No menu' d='Admin.Advparameters.Feature'}
sprintf To be used if you have variables within the translated string
Example: {l s='My variable is %s' sprintf=[$my_var|escape:'html':'UTF-8']}
You can find more information in the PrestaShop 1.7 documentation here.
the "s" just mean "string", and "l" is "language", so why to not use "m" instead of "mod" ;)

Email validation passes without domain extension

I am using Aurelia-Validation in my project and trying to validate email address. When I add an email example#g, it passes the validation. Shouldn't email validation have .com, .net, etc extension at the end to pass the validation? See the plunker link as an example.
Here is the screenshot to show what I mean:
This is a bit nit-picky, but like emix already pointed out in comments, the validation regex used by aurelia-validation is currently the widely accepted standard as specified by WHATWG. This is the same regex as documented on MDN and w3.org.
Mozilla seems to follow this specification for validating input type="email" at least. I couldn't find any official sources on chrome or edge though.
The JavaScript version of that regex is:
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
In simple terms this translates to:
(required) before the # symbol, any number of alphanumeric characters and (certain) symbols
(required) after the # symbol, between 1 and 63 alphanumeric characters or hyphens (and cannot start or end with a hyphen)
(optional) same as 2 (but starting with a period), repeated for any number of times
If you want to restrict this validation to emails which are routable in the internet, simply change the asterisk * at the end of the regex to a plus +. That keeps the regex identical except there must now be at least one segment starting with a period.
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/
Made change to my validation rule with below code:
Original code:
ValidationRules.ensure('setEmail')
.displayName('Email')
.required()
.email()
.on(this);
Modified code with matches pattern:
ValidationRules.ensure('setEmail')
.displayName('Email')
.required()
.email()
.matches(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)
.on(this);
See the screenshot:
Invalid:
Valid:
In the latest versions I think we can use Validators.pattern(REGEX_VALID_EMAIL) instead of Validators.email in the formControl validator.
and REGEX_VALID_EMAIL can be the following.
const REGEX_VALID_EMAIL = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/
;

JSONAPIAdapter - Use camel case instead of dasherized case

Is there a quick and easy way to use camel case when serializing a JsonApi model? By default is is using dasherized case for both url and field names.
Look at EmberJS guides for an example how to make user-profile-related adapter hit user_profile instead:
export default DS.JSONAPIAdapter.extend({
pathForType: function(type) {
return Ember.String.underscore(type);
}
});
Requests for person would now target /person/1. Requests for user-profile would now target /user_profile/1
If you need to serialize attributes, not just the model names, you can find related section to the topic at the very same place, direct link here.
Since the example above uses Ember.String.underscore(), I am attaching a link to very useful String helpers Ember provides by default, Ember.String API:
camelize
capitalize
classify
dasherize
decamelize
htmlSafe
loc
underscore
w