Skip to content

Commit

Permalink
Generic proofs misc (keybase#16812)
Browse files Browse the repository at this point in the history
* hide 'add other identities' if there aren't any other identities

* WIP show icon on revoke screen

* show icon on revoke page

* use styleSheetCreate in revoke

* stories

* fix nav1 and tweak input spacing
buoyad authored Apr 2, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent d5c0f8e commit 3393037
Showing 10 changed files with 242 additions and 182 deletions.
3 changes: 3 additions & 0 deletions shared/profile/generic/enter-username/index.js
Original file line number Diff line number Diff line change
@@ -252,6 +252,9 @@ const styles = Styles.styleSheetCreate({
},
input: Styles.platformStyles({
common: {marginRight: Styles.globalMargins.medium},
isElectron: {
marginTop: -1,
},
isMobile: {
top: 3,
},
1 change: 0 additions & 1 deletion shared/profile/profile.stories.js
Original file line number Diff line number Diff line change
@@ -71,7 +71,6 @@ const bioProps = {
onAddIdentity: Sb.action('onAddIdentity'),
onEditAvatar: Sb.action('onEditAvatarClick'),
reason: 'storybook',
showOtherIdentities: true,
suggestionKeys: [],
username: 'Chris',
}
3 changes: 3 additions & 0 deletions shared/profile/revoke/container.js
Original file line number Diff line number Diff line change
@@ -6,9 +6,11 @@ import * as Constants from '../../constants/profile'
import * as Waiting from '../../constants/waiting'
import {connect, getRouteProps, type RouteProps} from '../../util/container'
import type {PlatformsExpandedType} from '../../constants/types/more'
import type {SiteIconSet} from '../../constants/types/tracker2'

type OwnProps = RouteProps<
{
icon: SiteIconSet,
platform: PlatformsExpandedType,
platformHandle: string,
proofId: string,
@@ -18,6 +20,7 @@ type OwnProps = RouteProps<

const mapStateToProps = (state, ownProps) => ({
errorMessage: state.profile.revokeError,
icon: getRouteProps(ownProps, 'icon'),
isWaiting: Waiting.anyWaiting(state, Constants.waitingKey),
platform: getRouteProps(ownProps, 'platform'),
platformHandle: getRouteProps(ownProps, 'platformHandle'),
102 changes: 53 additions & 49 deletions shared/profile/revoke/index.js
Original file line number Diff line number Diff line change
@@ -5,10 +5,13 @@ import * as Styles from '../../styles'
import * as Constants from '../../constants/profile'
import {capitalize} from 'lodash-es'
import {subtitle as platformSubtitle} from '../../util/platforms'
import {SiteIcon} from '../generic/shared'
import type {PlatformsExpandedType} from '../../constants/types/more'
import type {SiteIconSet} from '../../constants/types/tracker2'
import Modal from '../modal'

type Props = {|
icon: SiteIconSet,
platform: PlatformsExpandedType,
platformHandle: string,
errorMessage?: ?string,
@@ -22,30 +25,29 @@ const Revoke = (props: Props) => {
return (
<Modal onCancel={props.onCancel} skipButton={true}>
{!!props.errorMessage && (
<Kb.Box style={styleErrorBanner}>
<Kb.Text center={!Styles.isMobile} style={styleErrorBannerText} type="BodySemibold">
<Kb.Box style={styles.errorBanner}>
<Kb.Text center={!Styles.isMobile} style={styles.errorBannerText} type="BodySemibold">
{props.errorMessage}
</Kb.Text>
</Kb.Box>
)}
<Kb.Box style={styleContentContainer}>
<Kb.PlatformIcon
platform={props.platform}
overlay={'icon-proof-broken'}
overlayColor={Styles.globalColors.red}
/>
<Kb.Text center={!Styles.isMobile} style={stylePlatformUsername} type="Header">
<Kb.Box style={styles.contentContainer}>
<Kb.Box style={styles.positionRelative}>
<SiteIcon set={props.icon} full={true} style={styles.siteIcon} />
<Kb.Icon type="icon-proof-broken" style={styles.revokeIcon} />
</Kb.Box>
<Kb.Text center={!Styles.isMobile} style={styles.platformUsername} type="Header">
{props.platformHandle}
</Kb.Text>
{!!platformHandleSubtitle && (
<Kb.Text style={stylePlatformSubtitle} type="Body">
<Kb.Text style={styles.platformSubtitle} type="Body">
{platformHandleSubtitle}
</Kb.Text>
)}
<Kb.Text center={!Styles.isMobile} style={styleDescriptionText} type="Header">
<Kb.Text center={!Styles.isMobile} style={styles.descriptionText} type="Header">
{formatMessage(props.platform)}
</Kb.Text>
<Kb.Text center={!Styles.isMobile} style={styleReminderText} type="Body">
<Kb.Text center={!Styles.isMobile} style={styles.reminderText} type="Body">
You can add it again later, if you change your mind.
</Kb.Text>
<Kb.ButtonBar>
@@ -67,46 +69,48 @@ const Revoke = (props: Props) => {
)
}

const styleErrorBanner = {
...Styles.globalStyles.flexBoxColumn,
alignItems: 'center',
backgroundColor: Styles.globalColors.red,
justifyContent: 'center',
minHeight: Styles.globalMargins.large,
padding: Styles.globalMargins.tiny,
width: '100%',
}

const styleErrorBannerText = {
color: Styles.globalColors.white,
maxWidth: 512,
}

const styleContentContainer = {
...Styles.globalStyles.flexBoxColumn,
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center',
margin: Styles.isMobile ? Styles.globalMargins.tiny : Styles.globalMargins.large,
maxWidth: 512,
...(Styles.isMobile ? {} : {textAlign: 'center'}),
}

const stylePlatformUsername = Styles.platformStyles({
common: {
color: Styles.globalColors.red,
textDecorationLine: 'line-through',
const styles = Styles.styleSheetCreate({
contentContainer: {
...Styles.globalStyles.flexBoxColumn,
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center',
margin: Styles.isMobile ? Styles.globalMargins.tiny : Styles.globalMargins.large,
maxWidth: 512,
...(Styles.isMobile ? {} : {textAlign: 'center'}),
},
descriptionText: {marginTop: Styles.globalMargins.medium},
errorBanner: {
...Styles.globalStyles.flexBoxColumn,
alignItems: 'center',
backgroundColor: Styles.globalColors.red,
justifyContent: 'center',
minHeight: Styles.globalMargins.large,
padding: Styles.globalMargins.tiny,
width: '100%',
},
isElectron: {
maxWidth: 400,
overflowWrap: 'break-word',
errorBannerText: {
color: Styles.globalColors.white,
maxWidth: 512,
},
platformSubtitle: {
color: Styles.globalColors.black_20,
},
platformUsername: Styles.platformStyles({
common: {
color: Styles.globalColors.red,
textDecorationLine: 'line-through',
},
isElectron: {
maxWidth: 400,
overflowWrap: 'break-word',
},
}),
positionRelative: {position: 'relative'},
reminderText: {marginTop: Styles.globalMargins.tiny},
revokeIcon: {bottom: -8, position: 'absolute', right: -10},
siteIcon: Styles.isMobile ? {height: 64, width: 64} : {height: 48, width: 48},
})
const stylePlatformSubtitle = {
color: Styles.globalColors.black_20,
}
const styleDescriptionText = {marginTop: Styles.globalMargins.medium}
const styleReminderText = {marginTop: Styles.globalMargins.tiny}

function formatMessage(platform: PlatformsExpandedType) {
if (platform === 'pgp') {
35 changes: 27 additions & 8 deletions shared/profile/revoke/index.stories.js
Original file line number Diff line number Diff line change
@@ -3,6 +3,11 @@ import * as React from 'react'
import {action, storiesOf} from '../../stories/storybook'
import Revoke from '.'

const makeIcons = (platform: string) => [
{path: `https://keybase.io/images/paramproofs/services/${platform}/logo_full_64.png`, width: 64},
{path: `https://keybase.io/images/paramproofs/services/${platform}/[email protected]`, width: 128},
]

const props = {
isWaiting: false,
onCancel: action('onCancel'),
@@ -12,6 +17,7 @@ const props = {

const propsTwitter = {
...props,
icon: makeIcons('twitter'),
platform: 'twitter',
platformHandle: 'alexrwendland',
}
@@ -27,16 +33,29 @@ const load = () => {
errorMessage={'There was an error revoking your proof. You can click the button to try again.'}
/>
))
.add('Reddit', () => <Revoke {...props} platform="reddit" />)
.add('GitHub', () => <Revoke {...props} platform="github" />)
.add('Hacker News', () => <Revoke {...props} platform="hackernews" />)
.add('Reddit', () => <Revoke {...props} platform="reddit" icon={makeIcons('reddit')} />)
.add('GitHub', () => <Revoke {...props} platform="github" icon={makeIcons('github')} />)
.add('Hacker News', () => <Revoke {...props} platform="hackernews" icon={makeIcons('hackernews')} />)
.add('Bitcoin', () => (
<Revoke {...props} platformHandle="1BjgMvwVkpmmJ5HFGZ3L3H1G6fcKLNGT5h" platform="btc" />
<Revoke
{...props}
platformHandle="1BjgMvwVkpmmJ5HFGZ3L3H1G6fcKLNGT5h"
platform="btc"
icon={makeIcons('btc')}
/>
))
.add('DNS', () => (
<Revoke {...props} platform="dns" platformHandle="chriscoyne.com" icon={makeIcons('web')} />
))
.add('Website', () => (
<Revoke {...props} platform="http" platformHandle="chriscoyne.com" icon={makeIcons('web')} />
))
.add('HTTPS', () => (
<Revoke {...props} platform="https" platformHandle="chriscoyne.com" icon={makeIcons('web')} />
))
.add('Zcash', () => (
<Revoke {...props} platform="zcash" platformHandle="1234-fake" icon={makeIcons('zcash')} />
))
.add('DNS', () => <Revoke {...props} platform="dns" platformHandle="chriscoyne.com" />)
.add('Website', () => <Revoke {...props} platform="http" platformHandle="chriscoyne.com" />)
.add('HTTPS', () => <Revoke {...props} platform="https" platformHandle="chriscoyne.com" />)
.add('Zcash', () => <Revoke {...props} platform="zcash" platformHandle="1234-fake" />)
}

export default load
23 changes: 13 additions & 10 deletions shared/profile/routes.js
Original file line number Diff line number Diff line change
@@ -37,6 +37,17 @@ const profileRoute = () => {
component: ProveEnterUsername,
})

const profileGenericEnterUsername = {
children: {
profileGenericProofSuccess: {
component: GenericProofSuccess,
tags: makeLeafTags({layerOnTop: !isMobile, renderTopmostOnly: true}),
},
},
component: GenericEnterUsername,
tags: makeLeafTags({layerOnTop: !isMobile, renderTopmostOnly: true}),
}

return makeRouteDefNode({
children: {
addToTeam: {
@@ -59,23 +70,15 @@ const profileRoute = () => {
component: EditAvatar,
tags: makeLeafTags({layerOnTop: !isMobile}),
},
profileGenericEnterUsername,
profileNonUser: {
children: {profile: profileRoute},
component: NonUserProfile,
},
profilePgp: pgpRoutes,
profileProofsList: {
children: {
profileGenericEnterUsername: {
children: {
profileGenericProofSuccess: {
component: GenericProofSuccess,
tags: makeLeafTags({layerOnTop: !isMobile, renderTopmostOnly: true}),
},
},
component: GenericEnterUsername,
tags: makeLeafTags({layerOnTop: !isMobile, renderTopmostOnly: true}),
},
profileGenericEnterUsername,
},
component: ProofsList,
tags: makeLeafTags({layerOnTop: !isMobile, renderTopmostOnly: true}),
69 changes: 40 additions & 29 deletions shared/profile/user/container.js
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ import {memoize} from '../../util/memoize'
import type {RouteProps} from '../../route-tree/render-route'
import type {Response} from 'react-native-image-picker'
import ProfileSearch from '../search/bar'
import flags from '../../util/feature-flags'

type OwnProps = RouteProps<{username: string}, {}>
const emptySet = I.OrderedSet()
@@ -72,35 +73,45 @@ const followToArray = memoize((followers, following) => ({
following: following.toArray(),
}))

const mergeProps = (stateProps, dispatchProps, ownProps) => ({
assertionKeys: stateProps._assertions
? stateProps._assertions
.sort((a, b) => a.priority - b.priority)
.keySeq()
.toArray()
: null,
backgroundColorType: stateProps.backgroundColorType,
followThem: stateProps.followThem,
followersCount: stateProps.followersCount,
followingCount: stateProps.followingCount,
onAddIdentity: dispatchProps.onAddIdentity,
onBack: dispatchProps.onBack,
onEditAvatar: stateProps.userIsYou ? dispatchProps._onEditAvatar : null,
onReload: () => dispatchProps._onReload(stateProps.username, stateProps.userIsYou),
onSearch: dispatchProps.onSearch,
reason: stateProps.reason,
showOtherIdentities: stateProps.userIsYou, // TODO: gate on available providers
state: stateProps.state,
suggestionKeys: stateProps._suggestionKeys
? stateProps._suggestionKeys
.filter(s => !s.belowFold)
.map(s => s.assertionKey)
.toArray()
: null,
userIsYou: stateProps.userIsYou,
username: stateProps.username,
...followToArray(stateProps.followers, stateProps.following),
})
const mergeProps = (stateProps, dispatchProps, ownProps) => {
let onAddIdentity = null
if (
stateProps.userIsYou &&
flags.proofProviders &&
stateProps._suggestionKeys &&
stateProps._suggestionKeys.some(s => s.belowFold)
) {
onAddIdentity = dispatchProps.onAddIdentity
}
return {
assertionKeys: stateProps._assertions
? stateProps._assertions
.sort((a, b) => a.priority - b.priority)
.keySeq()
.toArray()
: null,
backgroundColorType: stateProps.backgroundColorType,
followThem: stateProps.followThem,
followersCount: stateProps.followersCount,
followingCount: stateProps.followingCount,
onAddIdentity,
onBack: dispatchProps.onBack,
onEditAvatar: stateProps.userIsYou ? dispatchProps._onEditAvatar : null,
onReload: () => dispatchProps._onReload(stateProps.username, stateProps.userIsYou),
onSearch: dispatchProps.onSearch,
reason: stateProps.reason,
state: stateProps.state,
suggestionKeys: stateProps._suggestionKeys
? stateProps._suggestionKeys
.filter(s => !s.belowFold)
.map(s => s.assertionKey)
.toArray()
: null,
userIsYou: stateProps.userIsYou,
username: stateProps.username,
...followToArray(stateProps.followers, stateProps.following),
}
}

const connected = Container.namedConnect<OwnProps, _, _, _, _>(
mapStateToProps,
Loading

0 comments on commit 3393037

Please sign in to comment.