twilio / authy-form-helpers Goto Github PK

Currently, there is no easy way to find out which country codes are supported by Authy. Documentation refers to the list of countries in this project but it does not mention if this list is authoritative.

My suggestion is sourcing the excellent countries project by @mledoze, specifically the json data file and simply pluck the columns you're interested in. If, by chance, you do not support all of the countries listed there or support others (my diff shows countries with calling codes 599 and 882 are supported by Authy but not available on the countries json file), then I'd recommend sourcing the file anyway, adding those extra calling codes and version that file so that it can be sourced by other projects too as authoritative.

The countries list is shown at the bottom of the page. When I check the styles I figured out that the calculated position is wrong. the value of left: is correct but the value of top is incorrect.

After waiting for document to be ready, I am trying to add Bootstrap classes to input.countries-input via jQuery's addClass, but it looks like it's being overriden. Is there no way to modify default styling?

Authy's form input fields have autocomplete enabled.

HTML in source

<input id="authy-token" type="text" value="" placeholder="Authy Token" name="token" autocomplete="on" class="form-control input-lg" style="background-color: rgb(242, 222, 222);">

The flag selectors [class^="flag-"],[class*="flag-"] (https://github.com/authy/authy-form-helpers/blob/master/src/flags.authy.css) apply to every CSS class containing the word flag-. Thus we have now images of all the flags on random places because some of our own CSS selectors contain the word ...flag-... too.

A suggestion would be to use the prefix authy and change them to [class^="authy-flag-"],[class*="authy-flag-"] or to remove the contains selector [class*="flag-"].

1. Google Chrome and IE (Windows) does not allow the click and drag of the scrollbar on the authy countries select box.
2. In example use of authy countries select box, should have "name" parameter specified.
   Also, javascript should have a default "name" parameter set if one isnt specified, otherwise it creates a "null" request parameter upon form submission.
3. form.authy.css does not include the authy countries CSS (form.authy.min.css does, however).
4. After selecting country, show the country code along with the selected country name in the input field.

The current phone number validation only allows for a minimum of 9 digits.

One of our Hong Kong customers recently emailed notifying us that Hong Kong numbers are usually 8 digits after the country code: http://en.wikipedia.org/wiki/Telephone_numbers_in_Hong_Kong

Furthermore, New Zealand's international phone number format for some cell phones uses 8 digits. We can get around the validation by using a 0 in front of our numbers (local format):
http://en.wikipedia.org/wiki/Telephone_numbers_in_New_Zealand

Hi,

I am using authy-forms.js (v2.2) along with another library called oppia-player (v0.0.2).

If I include authy-forms.js after oppia-player, the window.onload function of oppia-player gets overwritten by authy-forms.js. The following code snippet shows how I am including both libraries.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/oppia/0.0.2/oppia-player.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/authy-forms.js/2.2/form.authy.min.js"></script> 

A swapped inclusion causes the window.onload of authy-forms.js to get overwritten by oppia.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/authy-forms.js/2.2/form.authy.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/oppia/0.0.2/oppia-player.min.js"></script> 

I think, instead of directly writing to window.onload, a better approach would be to use addEventListener to avoid such scenarios.

Hi,

I'm running a SPA and I cant use this js as is.

Having the js run on onload is great for people unable to trigger a js function wherever its needed and I understand you help them.

But in my case its almost a no go (unless I extract your functions 1 by 1 and rewire the whole).

Do you plan to have another js file for non beginners with an init function passing the required fields?

I would gladly contribute, I guess this would lead to:

• a coffee file containing all common code
• the existing coffee file (requiring the common) and doing its onload magic
• a new coffee file (requiring the common) more js developer friendly with an init function

Thanks,

Ben

In version 2.3, even though I've included placeholder=Country in my select element, the placeholder text is not showing up in the browser.

Here's my html:
<select id='authy-countries' name='user[country_code]' placeholder='Country'></select>

Here is the DOM:

Here it is rendered in the browser:

How can I add for example .form-control to this input
I'm doing it like this now:

Authy.UI.instance();
$('.authy_phone_country_code .countries-input').addClass('form-control');

Setting data-value does not work. The generated input remains blank. Tried for multiple values. Manually selecting an option does set correct value.

Code:

Does not show a selection upon page loading.

Hello,

Is there an iOS version or a similar library that can help us do this?

I'm seeing this error when using the sample in Chrome 35.0.1916.99 beta-m

Uncaught ReferenceError: autocomplete is not defined form.authy.js:868

Looking at the code, I think line 868 should be:

if (autocompleteList) {

Guam's country code is 1 according to google
https://www.google.com/search?q=guam+country+code