fix(onboarding): Make links in error messages clickable

This commit is contained in:
Ben Gotow 2016-03-10 12:00:05 -08:00
parent 9c8237caf3
commit 12b1609206
4 changed files with 32 additions and 6 deletions

View file

@ -2,7 +2,7 @@ React = require 'react'
_ = require 'underscore'
{ipcRenderer, dialog, remote} = require 'electron'
{RetinaImg} = require 'nylas-component-kit'
{EdgehillAPI, NylasAPI, APIError, Actions} = require 'nylas-exports'
{RegExpUtils, EdgehillAPI, NylasAPI, APIError, Actions} = require 'nylas-exports'
OnboardingActions = require './onboarding-actions'
NylasApiEnvironmentStore = require './nylas-api-environment-store'
@ -190,8 +190,26 @@ class AccountSettingsPage extends React.Component
</h2>
_renderErrorMessage: =>
if @state.errorMessage
<div className="errormsg">{@state.errorMessage ? ""}</div>
return unless @state.errorMessage
text = @state.errorMessage
result = RegExpUtils.urlRegex(matchEntireString: false).exec(text)
if result
link = result[0]
beforeText = text.substr(0, result.index)
afterText = text.substr(result.index + link.length)
return (
<div className="errormsg">
{beforeText}<a href={link}>{link}</a>{afterText}
</div>
)
else
return (
<div className="errormsg">
{text}
</div>
)
_fieldOnCurrentPage: (field) =>
!@state.provider.pages || field.page is @state.pageNumber

View file

@ -230,6 +230,9 @@
.errormsg {
color: #A33;
margin-bottom:5px;
a {
color: #A33;
}
}
form.settings {

View file

@ -106,8 +106,9 @@ class LinkEditor extends React.Component
_initialUrl: (props=@props) =>
initialUrl = props.linkToModify?.getAttribute('href') ? ""
if initialUrl.length is 0
if RegExpUtils.urlRegex().test(props.linkToModify?.textContent ? "")
initialUrl = props.linkToModify.textContent ? ""
textContent = props.linkToModify?.textContent ? ""
if RegExpUtils.urlRegex(matchEntireString: true).test(textContent)
initialUrl = textContent
return initialUrl

View file

@ -23,7 +23,11 @@ RegExpUtils =
# http://daringfireball.net/2010/07/improved_regex_for_matching_urls
# https://mathiasbynens.be/demo/url-regex
# This is the Gruber Regex.
urlRegex: -> new RegExp(/^\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))$/)
urlRegex: ({matchEntireString} = {}) ->
if matchEntireString
new RegExp(/^\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))$/)
else
new RegExp(/\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))$/)
# Test cases: https://regex101.com/r/jD5zC7/2
# Returns the following capturing groups: