mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-24 01:06:07 +08:00
136 lines
4.3 KiB
CoffeeScript
Executable file
136 lines
4.3 KiB
CoffeeScript
Executable file
{Utils, React, Actions} = require 'nylas-exports'
|
|
{ParticipantsTextField} = require 'nylas-component-kit'
|
|
PGPKeyStore = require './pgp-key-store'
|
|
EmailPopover = require './email-popover'
|
|
Identity = require './identity'
|
|
kb = require './keybase'
|
|
_ = require 'underscore'
|
|
|
|
module.exports =
|
|
class KeybaseUser extends React.Component
|
|
@displayName: 'KeybaseUserProfile'
|
|
|
|
@propTypes:
|
|
profile: React.PropTypes.instanceOf(Identity).isRequired
|
|
actionButton: React.PropTypes.node
|
|
displayEmailList: React.PropTypes.bool
|
|
|
|
@defaultProps:
|
|
actionButton: false
|
|
displayEmailList: true
|
|
|
|
constructor: (props) ->
|
|
super(props)
|
|
|
|
componentDidMount: ->
|
|
PGPKeyStore.getKeybaseData(@props.profile)
|
|
|
|
_addEmail: (email) =>
|
|
PGPKeyStore.addAddressToKey(@props.profile, email)
|
|
|
|
_addEmailClick: (event) =>
|
|
popoverTarget = event.target.getBoundingClientRect()
|
|
|
|
Actions.openPopover(
|
|
<EmailPopover profile={@props.profile} onPopoverDone={ @_popoverDone } />,
|
|
{originRect: popoverTarget, direction: 'left'}
|
|
)
|
|
|
|
_popoverDone: (addresses, identity) =>
|
|
if addresses.length < 1
|
|
# no email addresses added, noop
|
|
return
|
|
else
|
|
_.each(addresses, (address) =>
|
|
@_addEmail(address))
|
|
|
|
_removeEmail: (email) =>
|
|
PGPKeyStore.removeAddressFromKey(@props.profile, email)
|
|
|
|
render: =>
|
|
{profile} = @props
|
|
|
|
keybaseDetails = <div className="details"></div>
|
|
if profile.keybase_profile?
|
|
keybase = profile.keybase_profile
|
|
|
|
# profile picture
|
|
if keybase.thumbnail?
|
|
picture = <img className="user-picture" src={ keybase.thumbnail }/>
|
|
else
|
|
hue = Utils.hueForString("Keybase")
|
|
bgColor = "hsl(#{hue}, 50%, 45%)"
|
|
abv = "K"
|
|
picture = <div className="default-profile-image" style={{backgroundColor: bgColor}}>{abv}</div>
|
|
|
|
# full name
|
|
if keybase.components.full_name?.val?
|
|
fullname = keybase.components.full_name.val
|
|
else
|
|
fullname = username
|
|
username = false
|
|
|
|
# link to keybase profile
|
|
keybase_url = "keybase.io/#{keybase.components.username.val}"
|
|
if keybase_url.length > 25
|
|
keybase_string = keybase_url.slice(0, 23).concat('...')
|
|
else
|
|
keybase_string = keybase_url
|
|
username = <a href="https://#{keybase_url}">{keybase_string}</a>
|
|
|
|
# TODO: potentially display confirmation on keybase-user objects
|
|
###
|
|
possible_profiles = ["twitter", "github", "coinbase"]
|
|
profiles = _.map(possible_profiles, (possible) =>
|
|
if keybase.components[possible]?.val?
|
|
# TODO icon instead of weird "service: username" text
|
|
return (<span key={ possible }><b>{ possible }</b>: { keybase.components[possible].val }</span>)
|
|
)
|
|
profiles = _.reject(profiles, (profile) -> profile is undefined)
|
|
|
|
profiles = _.map(profiles, (profile) ->
|
|
return <span key={ profile.key }>{ profile } </span>)
|
|
profileList = (<span>{ profiles }</span>)
|
|
###
|
|
|
|
keybaseDetails = (<div className="details">
|
|
<div className="profile-name">
|
|
{ fullname }
|
|
</div>
|
|
<div className="profile-username">
|
|
{ username }
|
|
</div>
|
|
</div>)
|
|
else
|
|
# if no keybase profile, default image is based on email address
|
|
hue = Utils.hueForString(@props.profile.addresses[0])
|
|
bgColor = "hsl(#{hue}, 50%, 45%)"
|
|
abv = @props.profile.addresses[0][0].toUpperCase()
|
|
picture = <div className="default-profile-image" style={{backgroundColor: bgColor}}>{abv}</div>
|
|
|
|
# email addresses
|
|
if profile.addresses?.length > 0
|
|
emails = _.map(profile.addresses, (email) =>
|
|
# TODO make that remove button not terrible
|
|
return <li key={ email }>{ email } <small><a onClick={ => @_removeEmail(email) }>(X)</a></small></li>)
|
|
emailList = (<ul> { emails }
|
|
<a ref="addEmail" onClick={ @_addEmailClick }>+ Add Email</a>
|
|
</ul>)
|
|
|
|
emailListDiv = (<div className="email-list">
|
|
<ul>
|
|
{ emailList }
|
|
</ul>
|
|
</div>)
|
|
|
|
<div className="keybase-profile">
|
|
<div className="profile-photo-wrap">
|
|
<div className="profile-photo">
|
|
{ picture }
|
|
</div>
|
|
</div>
|
|
{ keybaseDetails }
|
|
{if @props.displayEmailList then emailListDiv}
|
|
{ @props.actionButton }
|
|
</div>
|