import Modal from 'flarum/components/Modal';
import Button from 'flarum/components/Button';
import saveConfig from 'flarum/utils/saveConfig';

export default class FacebookSettingsModal extends Modal {
  constructor(...args) {
    super(...args);

    this.appId = m.prop(app.config['facebook.app_id'] || '');
    this.appSecret = m.prop(app.config['facebook.app_secret'] || '');
  }

  className() {
    return 'FacebookSettingsModal Modal--small';
  }

  title() {
    return 'Facebook Settings';
  }

  content() {
    return (
      <div className="Modal-body">
        <div className="Form">
          <div className="Form-group">
            <label>App ID</label>
            <input className="FormControl" value={this.appId()} oninput={m.withAttr('value', this.appId)}/>
          </div>

          <div className="Form-group">
            <label>App Secret</label>
            <input className="FormControl" value={this.appSecret()} oninput={m.withAttr('value', this.appSecret)}/>
          </div>

          <div className="Form-group">
            <Button
              type="submit"
              className="Button Button--primary FacebookSettingsModal-save"
              loading={this.loading}>
              Save Changes
            </Button>
          </div>
        </div>
      </div>
    );
  }

  onsubmit(e) {
    e.preventDefault();

    this.loading = true;

    saveConfig({
      'facebook.app_id': this.appId(),
      'facebook.app_secret': this.appSecret()
    }).then(
      () => this.hide(),
      () => {
        this.loading = false;
        m.redraw();
      }
    );
  }
}

@@ -4,385 +4,129 @@
 ort 
-Modal from 'flarum/components/Modal';%0Aimport Button from 'flarum/components/Button';%0Aimport saveConfig from 'flarum/utils/saveConfig';%0A%0Aexport default class FacebookSettingsModal extends Modal %7B%0A  constructor(...args) %7B%0A    super(...args);%0A%0A    this.appId = m.prop(app.config%5B'facebook.app_id'%5D %7C%7C '');%0A    this.appSecret = m.prop(app.config%5B'facebook.app_secret'%5D %7C%7C '');%0A  %7D%0A
+SettingsModal from 'flarum/components/SettingsModal';%0A%0Aexport default class FacebookSettingsModal extends SettingsModal %7B
 %0A  c
@@ -247,15 +247,12 @@
 %0A%0A  
-content
+form
 () %7B
@@ -267,80 +267,10 @@
 urn 
-(%0A      %3Cdiv className=%22Modal-body%22%3E%0A        %3Cdiv className=%22Form%22%3E%0A    
+%5B%0A
     
@@ -300,36 +300,32 @@
 group%22%3E%0A        
-    
 %3Clabel%3EApp ID%3C/l
@@ -330,36 +330,32 @@
 /label%3E%0A        
- 
-   
 %3Cinput className
@@ -373,77 +373,49 @@
 ol%22 
-value
+bidi
 =%7Bthis.
-appId()%7D oninput=%7Bm.withAttr('value', this.appId
+setting('facebook.app_id'
 )%7D/%3E%0A
-    
     
@@ -418,32 +418,33 @@
       %3C/div%3E
+,
 %0A%0A      
     %3Cdiv cla
@@ -423,36 +423,32 @@
  %3C/div%3E,%0A%0A      
-    
 %3Cdiv className=%22
@@ -464,28 +464,24 @@
 p%22%3E%0A        
-    
 %3Clabel%3EApp S
@@ -498,28 +498,24 @@
 el%3E%0A        
- 
-   
 %3Cinput class
@@ -537,690 +537,71 @@
 ol%22 
-value=%7Bthis.appSecret()%7D oninput=%7Bm.withAttr('value', this.appSecret)%7D/%3E%0A          %3C/div%3E%0A%0A          %3Cdiv className=%22Form-group%22%3E%0A            %3CButton%0A              type=%22submit%22%0A              className=%22Button Button--primary FacebookSettingsModal-save%22%0A              loading=%7Bthis.loading%7D%3E%0A              Save Changes%0A            %3C/Button%3E%0A          %3C/div%3E%0A        %3C/div%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  onsubmit(e) %7B%0A    e.preventDefault();%0A%0A    this.loading = true;%0A%0A    saveConfig(%7B%0A      'facebook.app_id': this.appId(),%0A      'facebook.app_secret': this.appSecret()%0A    %7D).then(%0A      () =%3E this.hide(),%0A      () =%3E %7B%0A        this.loading = false;%0A        m.redraw();%0A      %7D%0A    )
+bidi=%7Bthis.setting('facebook.app_secret')%7D/%3E%0A      %3C/div%3E%0A    %5D
 ;%0A  

Use SettingsModal component