Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Add Autofill support #3241

Merged
merged 10 commits into from
Aug 24, 2016
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Add Autofill support
fix #860

auditors: @bridiver, @bbondy
  • Loading branch information
darkdh committed Aug 24, 2016
commit e67b46d7256cb11b20916db3b65c97456f457d57
19 changes: 19 additions & 0 deletions app/extensions/brave/about-autofill.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<html>
<head>
<meta charset="utf-8">
<meta name="availableLanguages" content="">
<meta name="defaultLanguage" content="en-US">
<meta name='theme-color' content='#ff5000'>
<title data-l10n-id="autofillTitle"></title>
<script src='js/about.js'></script>
<script src="ext/l20n.min.js" async></script>
<link rel="localization" href="locales/{locale}/autofill.properties">
</head>
<body>
<div id="appContainer"/>
</body>
</html>
12 changes: 12 additions & 0 deletions app/extensions/brave/locales/en-US/app.properties
Original file line number Diff line number Diff line change
@@ -177,3 +177,15 @@ allSiteCookies=All site cookies
clear=Clear
clearDataWarning=Warning: Selected data, back to the day you installed Brave will be cleared and cannot be undone.
clearBrowsingData=Clear browsing data
nameOnCard=Name
creditCardNumber=Card Number
expirationDate=Expiration date
nameOnAddress=Name
organization=Organization
streetAddress=Street Address
city=City
state=State
postalCode=Postal Code
country=Country
phone=Phone
email=Email
19 changes: 19 additions & 0 deletions app/extensions/brave/locales/en-US/autofill.properties
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
autofillTitle=Autofill Settings
addresses=Addresses
creditCards=Credit Cards
addAddress=Add Address
addCreditCard=Add Credit Card
nameOnCard=Name on card
creditCardNumber=Credit card number
expirationDate=Expiration date
noCreditCardsSaved=No saved credit cards
nameOnAddress=Name
organization=Organization
streetAddress=Street Address
city=City
state=State
postalCode=Postal Code
country=Country
phone=Phone
email=Email
noAddressesSaved=No saved addresses
3 changes: 3 additions & 0 deletions app/extensions/brave/locales/en-US/preferences.properties
Original file line number Diff line number Diff line change
@@ -172,3 +172,6 @@ allSiteCookies=All site cookies
passwordsAndForms=Passwords and Forms
tabSettings=Tab Settings
clearBrowsingDataNow=Clear Browsing Data Now...
autofillSettings=Autofill Settings
manageAutofillData=Manage Autofill Data...
enableAutofill=Enable Autofill
53 changes: 53 additions & 0 deletions app/filtering.js
Original file line number Diff line number Diff line change
@@ -579,3 +579,56 @@ module.exports.setDefaultZoomLevel = (zoom) => {
ses.userPrefs.setDefaultZoomLevel(zoom)
}
}

module.exports.addAutofillAddress = (detail) => {
let guidMap = {}
for (let partition in registeredSessions) {
let ses = registeredSessions[partition]
let guid = ses.autofill.addProfile({
full_name: detail.name,
company_name: detail.organization,
street_address: detail.streetAddress,
city: detail.city,
state: detail.state,
postal_code: detail.postalCode,
country_code: detail.country,
phone: detail.phone,
email: detail.email
})
guidMap[partition] = guid
}
return guidMap
}

module.exports.removeAutofillAddress = (guid) => {
for (let partition in registeredSessions) {
let ses = registeredSessions[partition]
if (guid[partition] !== undefined) {
ses.autofill.removeProfile(guid[partition])
}
}
}

module.exports.addAutofillCreditCard = (detail) => {
let guidMap = {}
for (let partition in registeredSessions) {
let ses = registeredSessions[partition]
let guid = ses.autofill.addCreditCard({
name: detail.name,
card_number: detail.card,
expiration_month: detail.month,
expiration_year: detail.year
})
guidMap[partition] = guid
}
return guidMap
}

module.exports.removeAutofillCreditCard = (guid) => {
for (let partition in registeredSessions) {
let ses = registeredSessions[partition]
if (guid[partition] !== undefined) {
ses.autofill.removeCreditCard(guid[partition])
}
}
}
10 changes: 10 additions & 0 deletions app/index.js
Original file line number Diff line number Diff line change
@@ -61,6 +61,7 @@ const spellCheck = require('./spellCheck')
const ledger = require('./ledger')
const flash = require('../js/flash')
const contentSettings = require('../js/state/contentSettings')
const privacy = require('../js/state/privacy')

// Used to collect the per window state when shutting down the application
let perWindowState = []
@@ -392,6 +393,7 @@ app.on('ready', () => {
return loadedPerWindowState
}).then((loadedPerWindowState) => {
contentSettings.init()
privacy.init()
Extensions.init()
Filtering.init()
SiteHacks.init()
@@ -747,6 +749,14 @@ app.on('ready', () => {
}
})

ipcMain.on(messages.REMOVE_AUTOFILL_ADDRESS, (e, address) => {
appActions.removeAutofillAddress(address)
})

ipcMain.on(messages.REMOVE_AUTOFILL_CREDIT_CARD, (e, card) => {
appActions.removeAutofillCreditCard(card)
})

// Setup the crash handling
CrashHerald.init()

28 changes: 28 additions & 0 deletions js/about/aboutActions.js
Original file line number Diff line number Diff line change
@@ -129,6 +129,34 @@ const AboutActions = {

createWallet: function () {
ipc.send(messages.LEDGER_CREATE_WALLET)
},

setLedgerEnabled: function (enabled) {
ipc.send(messages.LEDGER_ENABLE, enabled)
},

addAutofillAddress: function () {
ipc.sendToHost(messages.ADD_AUTOFILL_ADDRESS)
},

removeAutofillAddress: function (address) {
ipc.send(messages.REMOVE_AUTOFILL_ADDRESS, address)
},

editAutofillAddress: function (address) {
ipc.sendToHost(messages.EDIT_AUTOFILL_ADDRESS, address)
},

addAutofillCreditCard: function () {
ipc.sendToHost(messages.ADD_AUTOFILL_CREDIT_CARD)
},

removeAutofillCreditCard: function (card) {
ipc.send(messages.REMOVE_AUTOFILL_CREDIT_CARD, card)
},

editAutofillCreditCard: function (card) {
ipc.sendToHost(messages.EDIT_AUTOFILL_CREDIT_CARD, card)
}
}
module.exports = AboutActions
204 changes: 204 additions & 0 deletions js/about/autofill.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const messages = require('../constants/messages')
const Immutable = require('immutable')
const ImmutableComponent = require('../components/immutableComponent')
const aboutActions = require('./aboutActions')
const Button = require('../components/button')

const ipc = window.chrome.ipc

require('../../less/about/autofill.less')
require('../../node_modules/font-awesome/css/font-awesome.css')

class AddressItem extends ImmutableComponent {
constructor () {
super()
this.onDelete = this.onDelete.bind(this)
this.onEdit = this.onEdit.bind(this)
}

onDelete () {
aboutActions.removeAutofillAddress(this.props.address.toJS())
}

onEdit () {
aboutActions.editAutofillAddress(this.props.address.toJS())
}

render () {
const address = this.props.address
return <tr className='autofillItem'>
<td className='autofillActions'>
<span className='autofillAction fa fa-times' title='Delete address'
onClick={this.onDelete}>
</span>
</td>
<td className='addressName'>{address.get('name')}</td>
<td className='organization'>{address.get('organization')}</td>
<td className='streetAddress'>{address.get('streetAddress')}</td>
<td className='city'>{address.get('city')}</td>
<td className='state'>{address.get('state')}</td>
<td className='postalCode'>{address.get('postalCode')}</td>
<td className='country'>{address.get('country')}</td>
<td className='phone'>{address.get('phone')}</td>
<td className='email'>{address.get('email')}</td>
<td className='autofillActions'>
<span className='autofillAction fa fa-pencil-square-o' title='Edit address'
onClick={this.onEdit}>
</span>
</td>
</tr>
}
}

class CreditCardItem extends ImmutableComponent {
constructor () {
super()
this.onDelete = this.onDelete.bind(this)
this.onEdit = this.onEdit.bind(this)
}

onDelete () {
aboutActions.removeAutofillCreditCard(this.props.creditCard.toJS())
}

onEdit () {
aboutActions.editAutofillCreditCard(this.props.creditCard.toJS())
}

render () {
const creditCard = this.props.creditCard
return <tr className='autofillItem'>
<td className='autofillActions'>
<span className='autofillAction fa fa-times' title='Delete creditCard'
onClick={this.onDelete}>
</span>
</td>
<td className='creditCardName'>{creditCard.get('name')}</td>
<td className='creditCardNumber'>{creditCard.get('card')}</td>
<td className='creditCardPExpirationDate'>
{creditCard.get('month') + '/' + creditCard.get('year')}
</td>
<td className='autofillActions'>
<span className='autofillAction fa fa-pencil-square-o' title='Edit creditCard'
onClick={this.onEdit}>
</span>
</td>
</tr>
}
}

class AboutAutofill extends React.Component {
constructor () {
super()
this.state = {
addressesDetails: new Immutable.List(),
creditCardsDetails: new Immutable.List()
}
ipc.on(messages.AUTOFILL_ADDRESSES_UPDATED, (e, detail) => {
if (detail) {
this.setState({
addressesDetails: Immutable.fromJS(detail)
})
}
})
ipc.on(messages.AUTOFILL_CREDIT_CARDS_UPDATED, (e, detail) => {
if (detail) {
this.setState({
creditCardsDetails: Immutable.fromJS(detail)
})
}
})
this.onAddAddress = this.onAddAddress.bind(this)
this.onAddCreditCard = this.onAddCreditCard.bind(this)
}

onAddAddress () {
aboutActions.addAutofillAddress()
}

onAddCreditCard () {
aboutActions.addAutofillCreditCard()
}

get isAddresssEmpty () {
return !this.state.addressesDetails || !this.state.addressesDetails.size
}

get isCreditCardsEmpty () {
return !this.state.creditCardsDetails || !this.state.creditCardsDetails.size
}

render () {
var savedAddresssPage = this.isAddresssEmpty
? <div><span data-l10n-id='noAddressesSaved' /></div>
: <div>
<h2 data-l10n-id='addresses' />
<div className='autofillPageContent'>
<table className='autofillList'>
<thead>
<tr>
<th></th>
<th data-l10n-id='nameOnAddress'></th>
<th data-l10n-id='organization'></th>
<th data-l10n-id='streetAddress'></th>
<th data-l10n-id='city'></th>
<th data-l10n-id='state'></th>
<th data-l10n-id='postalCode'></th>
<th data-l10n-id='country'></th>
<th data-l10n-id='phone'></th>
<th data-l10n-id='email'></th>
</tr>
</thead>
<tbody>
{
this.state.addressesDetails.sort((a, b) => {
return a.get('name') > b.get('name') ? 1 : -1
}).map((item) =>
<AddressItem address={item} />)
}
</tbody>
</table>
</div>
</div>

var savedCreditCardsPage = this.isCreditCardsEmpty
? <div><span data-l10n-id='noCreditCardsSaved' /></div>
: <div>
<h2 data-l10n-id='creditCards' />
<div className='autofillPageContent'>
<table className='autofillList'>
<thead>
<tr>
<th></th>
<th data-l10n-id='nameOnCard'></th>
<th data-l10n-id='creditCardNumber'></th>
<th data-l10n-id='expirationDate'></th>
</tr>
</thead>
<tbody>
{
this.state.creditCardsDetails.sort((a, b) => {
return a.get('name') > b.get('name') ? 1 : -1
}).map((item) =>
<CreditCardItem creditCard={item} />)
}
</tbody>
</table>
</div>
</div>
return <div className='autofillPage'>
<h1 data-l10n-id='autofillTitle' />
{savedAddresssPage}
<Button l10nId='addAddress' className='primaryButton' onClick={this.onAddAddress} />
{savedCreditCardsPage}
<Button l10nId='addCreditCard' className='primaryButton' onClick={this.onAddCreditCard} />
</div>
}
}

module.exports = <AboutAutofill />
Loading