Get display values from database

js/about/autofill.js

@@ -79,7 +79,9 @@ class CreditCardItem extends ImmutableComponent {
         </span>
       </td>
       <td className='creditCardName'>{creditCard.get('name')}</td>
-      <td className='creditCardNumber'>{creditCard.get('card')}</td>
+      <td className='creditCardNumber'>{
+        creditCard.get('card') !== undefined ? '***' + creditCard.get('card').slice(-4) : null
+      }</td>
       <td className='creditCardPExpirationDate'>
         {creditCard.get('month') + '/' + creditCard.get('year')}
       </td>

js/components/autofillCreditCardPanel.js

@@ -58,11 +58,8 @@ class AutofillCreditCardPanel extends ImmutableComponent {
   onClick (e) {
     e.stopPropagation()
   }
-  get displayNameOnCard () {
-    return this.props.currentDetail.get('name')
-  }
-  get displayCreditCardNumber () {
-    return this.props.currentDetail.get('card')
+  get displayMonth () {
+    return this.props.currentDetail.get('month').replace('0', '')
   }
   render () {
     var ExpMonth = []
@@ -87,11 +84,12 @@ class AutofillCreditCardPanel extends ImmutableComponent {
           </div>
           <div id='creditCardNumber' className='formRow'>
             <label data-l10n-id='creditCardNumber' htmlFor='creditCardNumber' />
-            <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCardChange} value={this.displayCreditCardNumber} />
+            <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCardChange}
+              value={this.props.currentDetail.get('card')} />
           </div>
           <div id='expirationDate' className='formRow'>
             <label data-l10n-id='expirationDate' htmlFor='expirationDate' />
-            <select value={this.props.currentDetail.get('month')}
+            <select value={this.displayMonth}
               onChange={this.onExpMonthChange} className='formSelect' >
               {ExpMonth}
             </select>

js/components/frame.js

@@ -106,8 +106,44 @@ class Frame extends ImmutableComponent {
     } else if (location === 'about:flash') {
       this.webview.send(messages.BRAVERY_DEFAULTS_UPDATED, this.braveryDefaults)
     } else if (location === 'about:autofill') {
-      this.webview.send(messages.AUTOFILL_ADDRESSES_UPDATED, this.props.autofillAddresses.toJS())
-      this.webview.send(messages.AUTOFILL_CREDIT_CARDS_UPDATED, this.props.autofillCreditCards.toJS())
+      const partition = FrameStateUtil.getPartition(this.frame)
+      if (this.props.autofillAddresses) {
+        const addresses = this.props.autofillAddresses.toJS()
+        let list = []
+        for (let index in addresses) {
+          const address = currentWindow.webContents.session.autofill.getProfile(addresses[index][partition])
+          let addressDetail = {
+            name: address.full_name,
+            organization: address.company_name,
+            streetAddress: address.street_address,
+            city: address.city,
+            state: address.state,
+            postalCode: address.postal_code,
+            country: address.country_code,
+            phone: address.phone,
+            email: address.email,
+            guid: addresses[index]
+          }
+          list.push(addressDetail)
+        }
+        this.webview.send(messages.AUTOFILL_ADDRESSES_UPDATED, list)
+      }
+      if (this.props.autofillCreditCards) {
+        const creditCards = this.props.autofillCreditCards.toJS()
+        let list = []
+        for (let index in creditCards) {
+          const creditCard = currentWindow.webContents.session.autofill.getCreditCard(creditCards[index][partition])
+          let creditCardDetail = {
+            name: creditCard.name,
+            card: creditCard.card_number,
+            month: creditCard.expiration_month,
+            year: creditCard.expiration_year,
+            guid: creditCards[index]
+          }
+          list.push(creditCardDetail)
+        }
+        this.webview.send(messages.AUTOFILL_CREDIT_CARDS_UPDATED, list)
+      }
     }
 
     // send state to about pages
@@ -671,7 +707,7 @@ class Frame extends ImmutableComponent {
           windowActions.setAutofillAddressDetail(e.args[0], e.args[0])
           break
         case messages.ADD_AUTOFILL_CREDIT_CARD:
-          windowActions.setAutofillCreditCardDetail({month: '1', year: new Date().getFullYear()}, {})
+          windowActions.setAutofillCreditCardDetail({month: '1', year: new Date().getFullYear().toString()}, {})
           break
         case messages.EDIT_AUTOFILL_CREDIT_CARD:
           windowActions.setAutofillCreditCardDetail(e.args[0], e.args[0])

js/stores/appStore.js

@@ -548,25 +548,23 @@ const handleAppAction = (action) => {
         }
         appState = appState.setIn(['autofill', 'addresses'],
           appState.getIn(['autofill', 'addresses']).filterNot((address) => {
-            return Immutable.is(address, action.originalDetail)
+            return Immutable.is(address, action.originalDetail.get('guid'))
           }))
-        if (action.originalDetail.toJS().guid !== undefined) {
-          Filtering.removeAutofillAddress(action.originalDetail.toJS().guid)
+        if (action.originalDetail.get('guid') !== undefined) {
+          Filtering.removeAutofillAddress(action.originalDetail.get('guid'))
         }
 
         let addresses = appState.getIn(['autofill', 'addresses'])
         const guid = Filtering.addAutofillAddress(action.detail.toJS())
-        let detail = action.detail
-        detail = detail.set('guid', Immutable.fromJS(guid))
-        appState = appState.setIn(['autofill', 'addresses'], addresses.push(Immutable.fromJS(detail)))
+        appState = appState.setIn(['autofill', 'addresses'], addresses.push(Immutable.fromJS(guid)))
         break
       }
     case AppConstants.APP_REMOVE_AUTOFILL_ADDRESS:
       {
         const Filtering = require('../../app/filtering')
         appState = appState.setIn(['autofill', 'addresses'],
           appState.getIn(['autofill', 'addresses']).filterNot((address) => {
-            return Immutable.is(address, Immutable.fromJS(action.detail))
+            return Immutable.is(address, Immutable.fromJS(action.detail.guid))
           }))
         Filtering.removeAutofillAddress(action.detail.guid)
         break
@@ -579,25 +577,23 @@ const handleAppAction = (action) => {
         }
         appState = appState.setIn(['autofill', 'creditCards'],
           appState.getIn(['autofill', 'creditCards']).filterNot((card) => {
-            return Immutable.is(card, action.originalDetail)
+            return Immutable.is(card, action.originalDetail.get('guid'))
           }))
-        if (action.originalDetail.toJS().guid !== undefined) {
-          Filtering.removeAutofillCreditCard(action.originalDetail.toJS().guid)
+        if (action.originalDetail.get('guid') !== undefined) {
+          Filtering.removeAutofillCreditCard(action.originalDetail.get('guid'))
         }
 
         let creditCards = appState.getIn(['autofill', 'creditCards'])
         const guid = Filtering.addAutofillCreditCard(action.detail.toJS())
-        let detail = action.detail
-        detail = detail.set('guid', Immutable.fromJS(guid))
-        appState = appState.setIn(['autofill', 'creditCards'], creditCards.push(Immutable.fromJS(detail)))
+        appState = appState.setIn(['autofill', 'creditCards'], creditCards.push(Immutable.fromJS(guid)))
         break
       }
     case AppConstants.APP_REMOVE_AUTOFILL_CREDIT_CARD:
       {
         const Filtering = require('../../app/filtering')
         appState = appState.setIn(['autofill', 'creditCards'],
           appState.getIn(['autofill', 'creditCards']).filterNot((card) => {
-            return Immutable.is(card, Immutable.fromJS(action.detail))
+            return Immutable.is(card, Immutable.fromJS(action.detail.guid))
           }))
         Filtering.removeAutofillCreditCard(action.detail.guid)
         break