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

Commit 37dc528

Browse files
darkdhdarkdh
committed
Add Autofill support
fix #860 auditors: @bridiver, @bbondy
1 parent 30b00cc commit 37dc528

29 files changed

+1005
-3
lines changed

‎app/extensions/brave/about-autofill.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<!-- This Source Code Form is subject to the terms of the Mozilla Public
3+
- License, v. 2.0. If a copy of the MPL was not distributed with this
4+
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
5+
<html>
6+
<head>
7+
<meta charset="utf-8">
8+
<meta name="availableLanguages" content="">
9+
<meta name="defaultLanguage" content="en-US">
10+
<meta name='theme-color' content='#ff5000'>
11+
<title data-l10n-id="autofillTitle"></title>
12+
<script src='js/about.js'></script>
13+
<script src="ext/l20n.min.js" async></script>
14+
<link rel="localization" href="locales/{locale}/autofill.properties">
15+
</head>
16+
<body>
17+
<div id="appContainer"/>
18+
</body>
19+
</html>

‎app/extensions/brave/locales/en-US/app.properties

+12
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,15 @@ allSiteCookies=All site cookies
175175
clear=Clear
176176
clearDataWarning=Warning: Selected data, back to the day you installed Brave will be cleared and cannot be undone.
177177
clearBrowsingData=Clear browsing data
178+
nameOnCard=Name
179+
creditCardNumber=Card Number
180+
expirationDate=Expiration date
181+
nameOnAddress=Name
182+
organization=Organization
183+
streetAddress=Street Address
184+
city=City
185+
state=State
186+
postalCode=Postal Code
187+
country=Country
188+
phone=Phone
189+
email=Email

‎app/extensions/brave/locales/en-US/autofill.properties

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
autofillTitle=Autofill Settings
2+
addresses=Addresses
3+
creditCards=Credit Cards
4+
addAddress=Add Address
5+
addCreditCard=Add Credit Card
6+
nameOnCard=Name on card
7+
creditCardNumber=Credit card number
8+
expirationDate=Expiration date
9+
noCreditCardsSaved=No saved credit cards
10+
nameOnAddress=Name
11+
organization=Organization
12+
streetAddress=Street Address
13+
city=City
14+
state=State
15+
postalCode=Postal Code
16+
country=Country
17+
phone=Phone
18+
email=Email
19+
noAddressesSaved=No saved addresses

‎app/extensions/brave/locales/en-US/preferences.properties

+3
Original file line numberDiff line numberDiff line change
@@ -164,3 +164,6 @@ allSiteCookies=All site cookies
164164
passwordsAndForms=Passwords and Forms
165165
tabSettings=Tab Settings
166166
clearBrowsingDataNow=Clear Browsing Data Now...
167+
autofillSettings=Autofill Settings
168+
manageAutofillData=Manage Autofill Data...
169+
enableAutofill=Enable Autofill

‎app/filtering.js

+53
Original file line numberDiff line numberDiff line change
@@ -570,3 +570,56 @@ module.exports.setDefaultZoomLevel = (zoom) => {
570570
ses.userPrefs.setDefaultZoomLevel(zoom)
571571
}
572572
}
573+
574+
module.exports.addAutofillAddress = (detail) => {
575+
let guidMap = {}
576+
for (let partition in registeredSessions) {
577+
let ses = registeredSessions[partition]
578+
let guid = ses.autofill.addProfile({
579+
full_name: detail.name,
580+
company_name: detail.organization,
581+
street_address: detail.streetAddress,
582+
city: detail.city,
583+
state: detail.state,
584+
postal_code: detail.postalCode,
585+
country_code: detail.country,
586+
phone: detail.phone,
587+
email: detail.email
588+
})
589+
guidMap[partition] = guid
590+
}
591+
return guidMap
592+
}
593+
594+
module.exports.removeAutofillAddress = (guid) => {
595+
for (let partition in registeredSessions) {
596+
let ses = registeredSessions[partition]
597+
if (guid[partition] !== undefined) {
598+
ses.autofill.removeProfile(guid[partition])
599+
}
600+
}
601+
}
602+
603+
module.exports.addAutofillCreditCard = (detail) => {
604+
let guidMap = {}
605+
for (let partition in registeredSessions) {
606+
let ses = registeredSessions[partition]
607+
let guid = ses.autofill.addCreditCard({
608+
name: detail.name,
609+
card_number: detail.card,
610+
expiration_month: detail.month,
611+
expiration_year: detail.year
612+
})
613+
guidMap[partition] = guid
614+
}
615+
return guidMap
616+
}
617+
618+
module.exports.removeAutofillCreditCard = (guid) => {
619+
for (let partition in registeredSessions) {
620+
let ses = registeredSessions[partition]
621+
if (guid[partition] !== undefined) {
622+
ses.autofill.removeCreditCard(guid[partition])
623+
}
624+
}
625+
}

‎app/index.js

+10
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const ledger = require('./ledger')
6161
const flash = require('../js/flash')
6262
const contentSettings = require('../js/state/contentSettings')
6363
const FrameStateUtil = require('../js/state/frameStateUtil')
64+
const privacy = require('../js/state/privacy')
6465

6566
// Used to collect the per window state when shutting down the application
6667
let perWindowState = []
@@ -398,6 +399,7 @@ app.on('ready', () => {
398399
return loadedPerWindowState
399400
}).then((loadedPerWindowState) => {
400401
contentSettings.init()
402+
privacy.init()
401403
Extensions.init()
402404
Filtering.init()
403405
SiteHacks.init()
@@ -749,6 +751,14 @@ app.on('ready', () => {
749751
}
750752
})
751753

754+
ipcMain.on(messages.REMOVE_AUTOFILL_ADDRESS, (e, address) => {
755+
appActions.removeAutofillAddress(address)
756+
})
757+
758+
ipcMain.on(messages.REMOVE_AUTOFILL_CREDIT_CARD, (e, card) => {
759+
appActions.removeAutofillCreditCard(card)
760+
})
761+
752762
// Setup the crash handling
753763
CrashHerald.init()
754764

‎js/about/aboutActions.js

+24
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,30 @@ const AboutActions = {
133133

134134
setLedgerEnabled: function (enabled) {
135135
ipc.send(messages.LEDGER_ENABLE, enabled)
136+
},
137+
138+
addAutofillAddress: function () {
139+
ipc.sendToHost(messages.ADD_AUTOFILL_ADDRESS)
140+
},
141+
142+
removeAutofillAddress: function (address) {
143+
ipc.send(messages.REMOVE_AUTOFILL_ADDRESS, address)
144+
},
145+
146+
editAutofillAddress: function (address) {
147+
ipc.sendToHost(messages.EDIT_AUTOFILL_ADDRESS, address)
148+
},
149+
150+
addAutofillCreditCard: function () {
151+
ipc.sendToHost(messages.ADD_AUTOFILL_CREDIT_CARD)
152+
},
153+
154+
removeAutofillCreditCard: function (card) {
155+
ipc.send(messages.REMOVE_AUTOFILL_CREDIT_CARD, card)
156+
},
157+
158+
editAutofillCreditCard: function (card) {
159+
ipc.sendToHost(messages.EDIT_AUTOFILL_CREDIT_CARD, card)
136160
}
137161
}
138162
module.exports = AboutActions

‎js/about/autofill.js

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3+
* You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
const React = require('react')
6+
const messages = require('../constants/messages')
7+
const Immutable = require('immutable')
8+
const ImmutableComponent = require('../components/immutableComponent')
9+
const aboutActions = require('./aboutActions')
10+
const Button = require('../components/button')
11+
12+
const ipc = window.chrome.ipc
13+
14+
require('../../less/about/autofill.less')
15+
require('../../node_modules/font-awesome/css/font-awesome.css')
16+
17+
class AddressItem extends ImmutableComponent {
18+
constructor () {
19+
super()
20+
this.onDelete = this.onDelete.bind(this)
21+
this.onEdit = this.onEdit.bind(this)
22+
}
23+
24+
onDelete () {
25+
aboutActions.removeAutofillAddress(this.props.address.toJS())
26+
}
27+
28+
onEdit () {
29+
aboutActions.editAutofillAddress(this.props.address.toJS())
30+
}
31+
32+
render () {
33+
const address = this.props.address
34+
return <tr className='autofillItem'>
35+
<td className='autofillActions'>
36+
<span className='autofillAction fa fa-times' title='Delete address'
37+
onClick={this.onDelete}>
38+
</span>
39+
</td>
40+
<td className='addressName'>{address.get('name')}</td>
41+
<td className='organization'>{address.get('organization')}</td>
42+
<td className='streetAddress'>{address.get('streetAddress')}</td>
43+
<td className='city'>{address.get('city')}</td>
44+
<td className='state'>{address.get('state')}</td>
45+
<td className='postalCode'>{address.get('postalCode')}</td>
46+
<td className='country'>{address.get('country')}</td>
47+
<td className='phone'>{address.get('phone')}</td>
48+
<td className='email'>{address.get('email')}</td>
49+
<td className='autofillActions'>
50+
<span className='autofillAction fa fa-pencil-square-o' title='Edit address'
51+
onClick={this.onEdit}>
52+
</span>
53+
</td>
54+
</tr>
55+
}
56+
}
57+
58+
class CreditCardItem extends ImmutableComponent {
59+
constructor () {
60+
super()
61+
this.onDelete = this.onDelete.bind(this)
62+
this.onEdit = this.onEdit.bind(this)
63+
}
64+
65+
onDelete () {
66+
aboutActions.removeAutofillCreditCard(this.props.creditCard.toJS())
67+
}
68+
69+
onEdit () {
70+
aboutActions.editAutofillCreditCard(this.props.creditCard.toJS())
71+
}
72+
73+
render () {
74+
const creditCard = this.props.creditCard
75+
return <tr className='autofillItem'>
76+
<td className='autofillActions'>
77+
<span className='autofillAction fa fa-times' title='Delete creditCard'
78+
onClick={this.onDelete}>
79+
</span>
80+
</td>
81+
<td className='creditCardName'>{creditCard.get('name')}</td>
82+
<td className='creditCardNumber'>{creditCard.get('card')}</td>
83+
<td className='creditCardPExpirationDate'>
84+
{creditCard.get('month') + '/' + creditCard.get('year')}
85+
</td>
86+
<td className='autofillActions'>
87+
<span className='autofillAction fa fa-pencil-square-o' title='Edit creditCard'
88+
onClick={this.onEdit}>
89+
</span>
90+
</td>
91+
</tr>
92+
}
93+
}
94+
95+
class AboutAutofill extends React.Component {
96+
constructor () {
97+
super()
98+
this.state = {
99+
addressesDetails: new Immutable.List(),
100+
creditCardsDetails: new Immutable.List()
101+
}
102+
ipc.on(messages.AUTOFILL_ADDRESSES_UPDATED, (e, detail) => {
103+
if (detail) {
104+
this.setState({
105+
addressesDetails: Immutable.fromJS(detail)
106+
})
107+
}
108+
})
109+
ipc.on(messages.AUTOFILL_CREDIT_CARDS_UPDATED, (e, detail) => {
110+
if (detail) {
111+
this.setState({
112+
creditCardsDetails: Immutable.fromJS(detail)
113+
})
114+
}
115+
})
116+
this.onAddAddress = this.onAddAddress.bind(this)
117+
this.onAddCreditCard = this.onAddCreditCard.bind(this)
118+
}
119+
120+
onAddAddress () {
121+
aboutActions.addAutofillAddress()
122+
}
123+
124+
onAddCreditCard () {
125+
aboutActions.addAutofillCreditCard()
126+
}
127+
128+
get isAddresssEmpty () {
129+
return !this.state.addressesDetails || !this.state.addressesDetails.size
130+
}
131+
132+
get isCreditCardsEmpty () {
133+
return !this.state.creditCardsDetails || !this.state.creditCardsDetails.size
134+
}
135+
136+
render () {
137+
var savedAddresssPage = this.isAddresssEmpty
138+
? <div><span data-l10n-id='noAddressesSaved' /></div>
139+
: <div>
140+
<h2 data-l10n-id='addresses' />
141+
<div className='autofillPageContent'>
142+
<table className='autofillList'>
143+
<thead>
144+
<tr>
145+
<th></th>
146+
<th data-l10n-id='nameOnAddress'></th>
147+
<th data-l10n-id='organization'></th>
148+
<th data-l10n-id='streetAddress'></th>
149+
<th data-l10n-id='city'></th>
150+
<th data-l10n-id='state'></th>
151+
<th data-l10n-id='postalCode'></th>
152+
<th data-l10n-id='country'></th>
153+
<th data-l10n-id='phone'></th>
154+
<th data-l10n-id='email'></th>
155+
</tr>
156+
</thead>
157+
<tbody>
158+
{
159+
this.state.addressesDetails.sort((a, b) => {
160+
return a.get('name') > b.get('name') ? 1 : -1
161+
}).map((item) =>
162+
<AddressItem address={item} />)
163+
}
164+
</tbody>
165+
</table>
166+
</div>
167+
</div>
168+
169+
var savedCreditCardsPage = this.isCreditCardsEmpty
170+
? <div><span data-l10n-id='noCreditCardsSaved' /></div>
171+
: <div>
172+
<h2 data-l10n-id='creditCards' />
173+
<div className='autofillPageContent'>
174+
<table className='autofillList'>
175+
<thead>
176+
<tr>
177+
<th></th>
178+
<th data-l10n-id='nameOnCard'></th>
179+
<th data-l10n-id='creditCardNumber'></th>
180+
<th data-l10n-id='expirationDate'></th>
181+
</tr>
182+
</thead>
183+
<tbody>
184+
{
185+
this.state.creditCardsDetails.sort((a, b) => {
186+
return a.get('name') > b.get('name') ? 1 : -1
187+
}).map((item) =>
188+
<CreditCardItem creditCard={item} />)
189+
}
190+
</tbody>
191+
</table>
192+
</div>
193+
</div>
194+
return <div className='autofillPage'>
195+
<h1 data-l10n-id='autofillTitle' />
196+
{savedAddresssPage}
197+
<Button l10nId='addAddress' className='primaryButton' onClick={this.onAddAddress} />
198+
{savedCreditCardsPage}
199+
<Button l10nId='addCreditCard' className='primaryButton' onClick={this.onAddCreditCard} />
200+
</div>
201+
}
202+
}
203+
204+
module.exports = <AboutAutofill />

‎js/about/entry.js

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ switch (getBaseUrl(getSourceAboutUrl(window.location.href))) {
3838
break
3939
case 'about:history':
4040
element = require('./history')
41+
break
42+
case 'about:autofill':
43+
element = require('./autofill')
4144
}
4245

4346
if (element) {

0 commit comments

Comments
 (0)