chore: Include link to Imgur's TOS (#317)

* Include link to Imgur's TOS * Format js
FriendsOfFlarum · May 20, 2022 · e66100c · e66100c
1 parent cb994e7
commit e66100c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/js/src/admin/components/UploadPage.js b/js/src/admin/components/UploadPage.js
@@ -10,6 +10,8 @@ import Stream from 'flarum/common/utils/Stream';
 import ExtensionPage from 'flarum/admin/components/ExtensionPage';
 import ItemList from 'flarum/common/utils/ItemList';
 import InspectMimeModal from './InspectMimeModal';
+import icon from 'flarum/common/helpers/icon';
+import Link from 'flarum/common/components/Link';
 
 /* global m */
 
@@ -334,16 +336,20 @@ export default class UploadPage extends ExtensionPage {
     if (this.uploadMethodOptions['imgur'] !== undefined) {
       items.add(
         'imgur',
-        m('.imgur', [
-          m('fieldset', [
-            m('legend', app.translator.trans('fof-upload.admin.labels.imgur.title')),
-            m('label', app.translator.trans('fof-upload.admin.labels.imgur.client_id')),
-            m('input.FormControl', {
-              value: this.values.imgurClientId() || '',
-              oninput: withAttr('value', this.values.imgurClientId),
-            }),
-          ]),
-        ])
+        <div className="imgur">
+          <fieldset>
+            <legend>{app.translator.trans('fof-upload.admin.labels.imgur.title')}</legend>
+            <p>
+              {icon('fas fa-exclamation-circle')}{' '}
+              {app.translator.trans('fof-upload.admin.labels.imgur.tos', {
+                a: <Link href="https://imgur.com/tos" external={true} target="_blank" />,
+              })}
+            </p>
+            <label>{app.translator.trans('fof-upload.admin.labels.imgur.client_id')}</label>
+            <input className="FormControl" value={this.values.imgurClientId() || ''} oninput={withAttr('value', this.values.imgurClientId)} />
+          </fieldset>
+        </div>,
+        100
       );
     }
 
@@ -369,7 +375,8 @@ export default class UploadPage extends ExtensionPage {
               oninput: withAttr('value', this.values.qiniuBucket),
             }),
           ]),
-        ])
+        ]),
+        80
       );
     }
 
@@ -423,7 +430,8 @@ export default class UploadPage extends ExtensionPage {
             }),
             m('.helpText', app.translator.trans('fof-upload.admin.help_texts.s3_acl')),
           ]),
-        ])
+        ]),
+        60
       );
     }
 

diff --git a/resources/less/admin.less b/resources/less/admin.less
@@ -16,4 +16,10 @@
         width: 49%;
         float: left;
     }
+
+    .imgur {
+        .icon {
+            color: #ffcc00;
+        }
+    }
 }
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -48,6 +48,7 @@ fof-upload:
       imgur:
         client_id: Imgur client ID
         title: Imgur image storage settings
+        tos: It is your responsibility to ensure your forum users adhere to Imgur's <a>Terms of service</a>
       local:
         cdn_url: Content Delivery URL (prefixes files)
         title: Local storage settings