Feat/pinning settings (#1535) (#1557)

* feat: add pinning services service modal

* chore: update translation for service modal

public/locales/en/settings.json

@@ -23,9 +23,10 @@
  "title": "Select a pinning service provider.",
  "description": "Don’t see your pinning service provider? <1>Add a custom one.<1>"
  },
- "pinningCustomModal": {
+ "pinningServiceModal": {
  "title": "Configure a custom pinning service.",
  "description": "Want to make your custom pinning service available to others? <1>Learn how.<1>",
+ "service": "Service",
  "nickname": "Nickname",
  "nicknamePlaceholder": "Name for your service",
  "apiEndpoint": "API endpoint",

src/components/button/Button.css

@@ -16,3 +16,8 @@
  box-shadow: initial;
  cursor: default;
 }
+
+.Button.link:focus {
+ outline: none;
+ box-shadow: none;
+}

src/components/pinning-manager/pinning-manager-modal/PinningManagerModal.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
 import { withTranslation, Trans } from 'react-i18next'
-import PinningCustomModal from '../pinning-manager-custom-modal/PinningManagerCustomModal'
+import PinningServiceModal from '../pinning-manager-service-modal/PinningManagerServiceModal'
 import './PinningManagerModal.css'
 
 // Components
@@ -12,7 +12,8 @@ import Overlay from '../../overlay/Overlay'
 
 const PinningManagerModal = ({ t, tReady, onLeave, className, availablePinningServices, ...props }) => {
  const [isModalOpen, setModalOpen] = useState(false)
- const onModalOpen = () => setModalOpen(true)
+
+ const onCustomModalOpen = () => setModalOpen({ type: 'CUSTOM' })
  const onModalClose = () => setModalOpen(false)
 
  return (
@@ -21,15 +22,15 @@ const PinningManagerModal = ({ t, tReady, onLeave, className, availablePinningSe
  <p>{ t('pinningModal.title') }</p>
  <div className='pa2 pinningManagerModalContainer'>
  { availablePinningServices.map(({ icon, name }) => (
- <button className="flex items-center pinningManagerModalItem pa1 hoverable-button" key={name}>
+ <button className="flex items-center pinningManagerModalItem pa1 hoverable-button" key={name} onClick={() => setModalOpen({ name, icon })}>
  <img className="mr3" src={icon} alt={name} width={42} height={42} style={{ objectFit: 'contain' }} />
  <p>{ name }</p>
  </button>
  ))}
  </div>
  <p className='flex items-center justify-center'>
  <Trans i18nKey="pinningModal.description" t={t}>
- Don’t see your pinning service provider? <Button className='pv0' type='link' onClick={onModalOpen}>Add a custom one.</Button>
+ Don’t see your pinning service provider? <Button className='pv0' type='link' onClick={onCustomModalOpen}>Add a custom one.</Button>
  </Trans>
  </p>
  </ModalBody>
@@ -38,8 +39,8 @@ const PinningManagerModal = ({ t, tReady, onLeave, className, availablePinningSe
  <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('actions.cancel')}</Button>
  </ModalActions>
 
- <Overlay show={isModalOpen} onLeave={onModalClose} hidden>
- <PinningCustomModal className='outline-0' onLeave={onModalClose} t={t} />
+ <Overlay show={!!isModalOpen} onLeave={onModalClose} hidden>
+ <PinningServiceModal className='outline-0' service={isModalOpen} onLeave={onModalClose} t={t} />
  </Overlay>
  </Modal>
  )

src/components/pinning-manager/pinning-manager-custom-modal/PinningManagerCustomModal.css → src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.css

@@ -1,16 +1,16 @@
 
-.pinningManagerCustomModalContainer {
+.pinningManagerServiceModalContainer {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  align-items: center;
  justify-content: center;
  padding: 20px 54px 0;
 }
 
-.pinningManagerCustomModalContainer > * {
+.pinningManagerServiceModalContainer > * {
  margin-bottom: 26px;
 }
 
-.pinningManagerCustomModalContainer .white::placeholder {
+.pinningManagerServiceModalContainer .white::placeholder {
  color: #fff;
 }

src/components/pinning-manager/pinning-manager-custom-modal/PinningManagerCustomModal.js → src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js

@@ -8,9 +8,9 @@ import { useForm } from 'react-hook-form'
 // Components
 import { Modal, ModalBody, ModalActions } from '../../modal/Modal'
 import Button from '../../button/Button'
-import './PinningManagerCustomModal.css'
+import './PinningManagerServiceModal.css'
 
-const PinningManagerCustomModal = ({ t, onLeave, className, tReady, ...props }) => {
+const PinningManagerServiceModal = ({ t, onLeave, className, service, tReady, ...props }) => {
  const { register, errors, handleSubmit } = useForm()
  const inputClass = 'w-100 lh-copy f5 ph2 pv1 input-reset ba b--black-20 br1 focus-outline'
  const onSubmit = data => alert(`This is a WIP feature, with data: ${JSON.stringify(data)}`)
@@ -19,39 +19,51 @@ const PinningManagerCustomModal = ({ t, onLeave, className, tReady, ...props })
  <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '34em' }}>
  <form onSubmit={handleSubmit(onSubmit)}>
  <ModalBody>
- <p>{ t('pinningCustomModal.title') }</p>
+ <p>{ t('pinningServiceModal.title') }</p>
+
+ <div className='pa2 pinningManagerServiceModalContainer'>
+ { service.icon && service.name && (
+ <>
+ <label>
+ { t('pinningServiceModal.service') }
+ </label>
+ <div class="flex w-100 items-center">
+ <img className="mr3" src={service.icon} alt={service.name} height={42} style={{ objectFit: 'contain' }} />
+ <span>{ service.name }</span>
+ </div>
+ </>
+ )}
 
- <div className='pa2 pinningManagerCustomModalContainer' >
  <label htmlFor="cm-nickname">
- { t('pinningCustomModal.nickname') }
+ { t('pinningServiceModal.nickname') }
  </label>
  <div className='relative'>
  <input id='cm-nickname'
  name='nickname'
  ref={ register({ required: true }) }
  type='text'
  className={ classNames(inputClass, errors.nickname ? 'bg-red white' : 'charcoal') }
- placeholder={ t('pinningCustomModal.nicknamePlaceholder') }
+ placeholder={ t('pinningServiceModal.nicknamePlaceholder') }
  />
  {errors.nickname && (<ErrorMsg text={ t('errors.nickname') }/>)}
  </div>
 
  <label htmlFor="cm-apiEndpoint">
- { t('pinningCustomModal.apiEndpoint') }
+ { t('pinningServiceModal.apiEndpoint') }
  </label>
  <div className='relative'>
  <input id='cm-apiEndpoint'
  name='apiEndpoint'
  ref={ register({ required: true, pattern: 'http(s){0,1}://.*' }) }
  type='url'
  className={ classNames(inputClass, errors.apiEndpoint ? 'bg-red white' : 'charcoal') }
- placeholder={ t('pinningCustomModal.apiEndpointPlaceholder') }
+ placeholder={ t('pinningServiceModal.apiEndpointPlaceholder') }
  />
  {errors.apiEndpoint && (<ErrorMsg text={ t('errors.apiEndpoint') }/>)}
  </div>
 
  <label htmlFor="cm-secretApiKey">
- { t('pinningCustomModal.secretApiKey') }
+ { t('pinningServiceModal.secretApiKey') }
  </label>
  <div className='relative'>
  <input id='cm-secretApiKey'
@@ -67,8 +79,8 @@ const PinningManagerCustomModal = ({ t, onLeave, className, tReady, ...props })
 
  </div>
  <p className='f6'>
- <Trans i18nKey="pinningCustomModal.description" t={t}>
- Want to make your custom pinning service available to others?
+ <Trans i18nKey="pinningServiceModal.description" t={t}>
+  Want to make your custom pinning service available to others?
  <a href='https://docs.ipfs.io/how-to/work-with-pinning-services/' rel='noopener noreferrer' target="_blank" className='pv0' type='link'>Learn how.</a>
  </Trans>
  </p>
@@ -84,18 +96,18 @@ const PinningManagerCustomModal = ({ t, onLeave, className, tReady, ...props })
  )
 }
 
-PinningManagerCustomModal.propTypes = {
+PinningManagerServiceModal.propTypes = {
  t: PropTypes.func.isRequired,
  onLeave: PropTypes.func.isRequired
 }
 
-PinningManagerCustomModal.defaultProps = {
+PinningManagerServiceModal.defaultProps = {
  className: ''
 }
 
 const ErrorMsg = ({ text }) => (<p className='danger absolute f7' style={{ top: 26, left: 2 }}>{text}</p>)
 
 export default connect(
  // 'selectAvailablePinningServices',
- withTranslation('settings')(PinningManagerCustomModal)
+ withTranslation('settings')(PinningManagerServiceModal)
 )

src/reset.css

@@ -28,3 +28,7 @@ button.button-inside-focus:focus > *:first-child {
 button.hoverable-button:hover {
  background: #E8E9ED
 }
+
+button.hoverable-button:focus {
+ outline: none;
+}