Feat/pinning settings (#1535)

public/locales/en/settings.json

@@ -20,9 +20,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;
+}