update: added Auth/Headers support (#4)

Rooyca · Sep 23, 2023 · 685e873 · 685e873
1 parent 9ac5359
commit 685e873
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -72,12 +72,13 @@ The plugin has a few settings that you can configure:
 - **Output format**: Choose between JSON block or Obsidian variable.
 - **Request Method**: Choose between GET, POST, PUT & DELETE.
 - **Request Data**: The data to send with the request. Data should by in JSON format.
+- **Header Data**: The header data to send with the request. Data should by in JSON format. (`{"Content-Type": "application/json", "Authorization": "Bearer TOKEN"}`)
 - **Response Data**: The response data to display. If empty all data will be display. You can use a right arrow `->` to access nested objects. For example, if you want to show the `title` from the `user` object, you can do that like this: `user -> title`.
 
 ## To-do
 
 - [x] Add more request types (POST, PUT, DELETE)
-- [ ] ~Add support for authentication~
+- [ ] Add support for authentication
 - [x] Add customizability for modal output (e.g. show only specific fields, change color scheme, add custom CSS)
 - [x] Add customizability for variable output (e.g. show only specific fields, change variable name)
 

diff --git a/main.ts b/main.ts
@@ -6,6 +6,7 @@ interface LoadAPIRSettings {
 	FormatOut: string;
 	MethodRequest: string;
 	DataRequest: string;
+	HeaderRequest: string;
 	DataResponse: string;
 	URLs: string[];
 	Name: string;
@@ -16,6 +17,7 @@ const DEFAULT_SETTINGS: LoadAPIRSettings = {
 	FormatOut: 'json',
 	MethodRequest: 'GET',
 	DataRequest: '',
+	HeaderRequest: '{"Content-Type": "application/json"}',
 	DataResponse: '',
 	URLs: [],
 	Name: '',
@@ -87,7 +89,7 @@ export default class MainAPIR extends Plugin {
 			id: 'show-response-in-modal',
 			name: 'Show response in Modal',
 			callback: () => {
-				new ShowOutputModal(this.app, this.settings.URL, this.settings.MethodRequest, this.settings.DataRequest, this.settings.DataResponse).open();
+				new ShowOutputModal(this.app, this.settings.URL, this.settings.MethodRequest, this.settings.DataRequest, this.settings.HeaderRequest, this.settings.DataResponse).open();
 			}
 		});
 
@@ -161,27 +163,27 @@ export default class MainAPIR extends Plugin {
 }
 
 class ShowOutputModal extends Modal {
-  constructor(app: App, URL: string, MethodRequest: string, DataRequest: string, DataResponse: string) {
+  constructor(app: App, URL: string, MethodRequest: string, DataRequest: string, HeaderRequest: string, DataResponse: string) {
     super(app);
     this.props = {
       URL,
       MethodRequest,
       DataRequest,
+      HeaderRequest,
       DataResponse,
     };
   }
 
 onOpen() {
   const { contentEl } = this;
-  const { URL, MethodRequest, DataRequest, DataResponse } = this.props;
+  const { URL, MethodRequest, DataRequest, HeaderRequest, DataResponse } = this.props;
+  console.log(HeaderRequest)
 
   if (MethodRequest === "GET") {
     requestUrl({
     	url: URL,
       method: MethodRequest,
-      headers: {
-        'Content-Type': 'application/json'
-      }
+      headers: JSON.parse(HeaderRequest)
     })
       .then((data: JSON) => {
         if (DataResponse !== "") {
@@ -205,9 +207,7 @@ onOpen() {
     requestUrl({
     	url: URL,
       method: MethodRequest,
-      headers: {
-        'Content-Type': 'application/json'
-      },
+      headers: JSON.parse(HeaderRequest),
       body: DataRequest
     })
       .then((data: JSON)  => {
@@ -300,12 +300,22 @@ class APRSettings extends PluginSettingTab {
 	      .setName('Data to send')
 	      .setDesc("Data to send in the request")
 	      .addTextArea(text => text
-	      	.setPlaceholder('{"data": "data"}')
+	      	.setPlaceholder('{"data":"data"}')
 	      	.setValue(this.plugin.settings.DataRequest)
 	      	.onChange(async (value) => {
 	      		this.plugin.settings.DataRequest = value;
 	      		await this.plugin.saveSettings();
 	      }));
+	    new Setting(containerEl)
+	      .setName('Headers')
+	      .setDesc("Headers to send in the request")
+	      .addTextArea(text => text
+	      	.setPlaceholder('{"Content-Type": "application/json"}')
+	      	.setValue(this.plugin.settings.HeaderRequest)
+	      	.onChange(async (value) => {
+	      		this.plugin.settings.HeaderRequest = value;
+	      		await this.plugin.saveSettings();
+	      }));
 	    new Setting(containerEl)
 	      .setName('Data to show in modal')
 	      .setDesc("Write the name of the variable to show in the modal (space by comma)")
@@ -325,14 +335,15 @@ class APRSettings extends PluginSettingTab {
                 			new Notice("Name is empty");
                 			return;
 										}
-                		const {URL, FormatOut, MethodRequest, DataResponse, DataRequest} = this.plugin.settings;
+                		const {URL, FormatOut, MethodRequest, DataResponse, DataRequest, HeaderRequest} = this.plugin.settings;
                 		const {URLs} = this.plugin.settings;
                 		URLs.push({
                 			'URL': URL, 
                 			'Name': Name, 
                 			'FormatOut': FormatOut, 
                 			'MethodRequest': MethodRequest, 
-                			'DataRequest': DataRequest, 
+                			'DataRequest': DataRequest,
+                			'HeaderRequest': HeaderRequest, 
                 			'DataResponse': DataResponse
                 		});
                 		await this.plugin.saveSettings();