@ -1,8 +1,7 @@
import React , { FC , useEffect , useState } from 'react'
import { useSelector , useDispatch } from 'react-redux'
import { useParams , useHistory } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIdCard , faCheckCircle , faKey , faShieldAlt } from '@fortawesome/free-solid-svg-icons'
import { faIdCard , faCheckCircle , faKey , faShieldAlt , faLink , faAddressBook , faCodeBranch } from '@fortawesome/free-solid-svg-icons'
import { handleApiError } from 'src/api/errors'
import { fetchApp , updateApp } from 'src/actions/apps'
@ -13,7 +12,7 @@ import { getEntity } from 'src/selectors/entities'
import { getForm } from 'src/selectors/forms'
import { getIsFetching } from 'src/selectors/requests'
import { useAuthenticationCheck , useDeepCompareEffect } from 'src/hooks'
import { useAuthenticationCheck , useDeepCompareEffect , useTheme } from 'src/hooks'
import { setTitle , valueFromForm } from 'src/utils'
import { AppState , AppThunkDispatch , EntityType , App , Form , NotificationType , RequestKey } from 'src/types'
@ -21,12 +20,12 @@ import Title from 'src/components/title'
import Section from 'src/components/section'
import HorizontalRule from 'src/components/horizontal-rule'
import Loading from 'src/components/pages/loading'
import FieldLabel from 'src/components/controls/field-label'
import TextField from 'src/components/controls/text-field'
import TextareaField from 'src/components/controls/textarea-field'
import ImageField from 'src/components/controls/image-field'
import CoverImageField from 'src/components/controls/cover-image-field'
import IconImageField from 'src/components/controls/icon-image-field'
import StaticField from 'src/components/controls/static-field'
import PrimaryButton from 'src/components/controls/primary-button'
interface Params {
@ -36,6 +35,7 @@ interface Params {
const EditApp : FC = ( ) = > {
useAuthenticationCheck ( )
const theme = useTheme ( )
const { id } = useParams < Params > ( )
const fetching = useSelector < AppState , boolean > ( state = > getIsFetching ( state , RequestKey . UpdateApp ) )
const app = useSelector < AppState , App | undefined > ( state = > getEntity < App > ( state , EntityType . App , id ) )
@ -125,7 +125,7 @@ const EditApp: FC = () => {
}
}
const privateKeyDisplay = showPrivateKey ? app . privateKey : ''
const privateKeyDisplay = showPrivateKey ? app . privateKey : '******** '
return (
< div >
@ -134,48 +134,18 @@ const EditApp: FC = () => {
< HorizontalRule / >
< div >
< div className = "field" >
< FieldLabel > Public Key < / FieldLabel >
< div className = "control-container" >
< input className = "input" type = "text" value = { app . publicKey } readOnly / >
< span className = "icon is-small is-left" >
< FontAwesomeIcon icon = { faKey } / >
< / span >
< / div >
< / div >
< br / >
< div className = "field" >
< p className = "control" >
< button className = "button" onClick = { ( ) = > setShowPrivateKey ( ! showPrivateKey ) } >
< span className = "icon is-small is-left" >
< FontAwesomeIcon icon = { faShieldAlt } / >
< / span >
< / button >
< / p >
< p className = "control is-expanded" >
< input className = "input" type = "text" value = { privateKeyDisplay } placeholder = "Private Key" readOnly / >
< / p >
< / div >
< StaticField label = "Public Key" icon = { faKey } value = { app . publicKey } / >
< StaticField label = "Private Key" icon = { faShieldAlt } value = { privateKeyDisplay } / >
< a style = { { display : 'block' , fontSize : '0.75rem' , color : theme.secondary , marginTop : '-2rem' } } onClick = { ( ) = > setShowPrivateKey ( ! showPrivateKey ) } > { showPrivateKey ? 'Hide' : 'Show' } < / a >
< HorizontalRule / >
< div className = "field" >
< FieldLabel > ID < / FieldLabel >
< div className = "control-container" >
< div className = "icon" >
< FontAwesomeIcon icon = { faIdCard } / >
< / div >
< div className = "control" >
< input className = "input" type = "text" value = { app . id } readOnly / >
< / div >
< / div >
< / div >
< TextField name = "name" label = "Name" placeholder = "App Name" / >
< StaticField label = "ID" icon = { faIdCard } / >
< TextField name = "name" label = "Name" icon = { faIdCard } placeholder = "App Name" / >
< TextareaField name = "about" label = "About" placeholder = "Description of this app" / >
< TextField name = "websiteUrl" label = "Website" placeholder = "Website URL (optional)" / >
< TextField name = "companyName" label = "Company" placeholder = "Your company or organization (optional)" / >
< TextField name = "version" label = "Version" placeholder = "Current Version of the app (ex: 0.0.1beta5)" help = { ` Last Version: ${ app . version } ` } / >
< TextField name = "websiteUrl" label = "Website" icon = { faLink } placeholder = "Website URL (optional)" / >
< TextField name = "companyName" label = "Company" icon = { faAddressBook } placeholder = "Your company or organization (optional)" / >
< TextField name = "version" label = "Version" icon = { faCodeBranch } placeholder = "Current Version of the app (ex: 0.0.1beta5)" help = { ` Last Version: ${ app . version } ` } / >
< HorizontalRule / >
< ImageField name = "image" / >
@ -183,8 +153,8 @@ const EditApp: FC = () => {
< IconImageField name = "iconImage" / >
< HorizontalRule / >
< TextField name = "composerUrl" label = "Composer URL" placeholder = "URL for the composer web page" / >
< TextField name = "rendererUrl" label = "Renderer URL" placeholder = "URL for the renderer template" / >
< TextField name = "composerUrl" label = "Composer URL" icon = { faLink } placeholder = "URL for the composer web page" / >
< TextField name = "rendererUrl" label = "Renderer URL" icon = { faLink } placeholder = "URL for the renderer template" / >
< br / > < br / >
< PrimaryButton text = "Save" icon = { faCheckCircle } loading = { fetching } onClick = { ( ) = > handleUpdate ( ) } / >
Dwayne Harris
5 years ago