GithubHelp home page GithubHelp logo

twilio / authy-form-helpers Goto Github PK

View Code? Open in Web Editor NEW
83.0 23.0 39.0 445 KB

Authy javascripts and css file to help create quick forms for the authy api

Ruby 4.36% CSS 36.01% CoffeeScript 59.64%

authy-form-helpers's Introduction

Authy Forms Helpers

This javascripts and stylesheets help you build your Registration and Verification forms to use Authy quicker. They include:

  1. An awesome countries dropdown that selects between country name and country code

  2. Some javascripts validations on tokens and cellphones

  3. A tooltip you can use to add a help message when you ask for the token

CDN

You can copy manually the javascripts and stylesheets into your project or you can simply use authy website to serve them:

Compressed CSS: https://www.authy.com/form.authy.min.css"
Compressed JS: https://www.authy.com/form.authy.min.js"

Add this in your HTML <head>

<link href="https://www.authy.com/form.authy.min.css" media="screen" rel="stylesheet" type="text/css">
<script src="https://www.authy.com/form.authy.min.js" type="text/javascript"></script>

or you can use CloudFlare CDN:

Compressed CSS: //cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.css
Compressed JS:  //cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.js

<link href="//cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.css" media="screen" rel="stylesheet" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/authy-form-helpers/2.3/form.authy.min.js" type="text/javascript"></script>

Registration form (user enabling two factor)

In this form you need the country code and the user cellphone

Get the Countries Dropdown:

Add authy-countries id to the Country input.

<select id="authy-countries"></select>

To see a demo open sample/register.html and look at the Country input.

Display the country code as number

Add data-show-as="number" to the Country input.

<select id="authy-countries" data-show-as="number"></select>
Set the default country code

Add data-value="+{country_code}" to the Country input.

<select id="authy-countries" data-value="+57"></select>
Cellphone validations:

Add authy-cellphone id to the cellphone input.

<input id="authy-cellphone"  type="text" value=""/>

To see a demo open sample/register.html and look at the cellphone input.

Two-factor verification form

On this form the user enters his token which he gets from his cellphone

Token validation

To see a demo open sample/login.html and look at the cellphone input.

Add authy-token id to the input.

<input id="authy-token"  type="text" value=""/>

To see a demo open sample/login.html and look at the cellphone input.

Authy input logo

To see a demo open sample/login.html and look at the cellphone input.

Add authy-token id to the input.

<input id="authy-token"  type="text" value=""/>

To see a demo open sample/login.html and look at the cellphone input.

Help tooltip

First set the help message you want:

var authyUI = Authy.UI.instance();
authyUI.setTooltip("Two-Factor", "Get this token from your cellphone");

Add authy-help id to the link.

<a href="#" id="authy-help">help</a>

To see a demo open sample/login.html and look at the cellphone input.

Need help?

Contact us via https://support.authy.com

Copyright

Copyright (c) 2013-2020 Authy Inc. See LICENSE.txt for further details.

authy-form-helpers's People

Contributors

dcu avatar hafichuk avatar moisesvw avatar plasma avatar sarcilav avatar securitysimon avatar senekis avatar serargz avatar strml avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

authy-form-helpers's Issues

window.onload gets overwritten while using with another library

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.

Disable autocomplete on input fields

Authy's form input fields have autocomplete enabled.

untitled

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);">

Cannot modify .countries-input css

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?

Flag CSS selectors are too broad

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-"].

iOS Version

Hello,

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

Bad phone validation (Hong Kong, New Zealand, etc.)

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

placeholder attr not working for country code input

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:
image

Here it is rendered in the browser:
image

js developer version needed

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

Uncaught ReferenceError: autocomplete is not defined

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) {

data-value not working

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.

Require external list of country codes

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.

Several suggested improvements

  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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.