add button to load function URLs from Lambda API (#12)

whummer · HarshCasper · web-flow · commit e4d2067fb3d2 · 2023-10-05T06:54:08.000+02:00
---------
Co-authored-by: HarshCasper &lt;erbeusgriffincasper@gmail.com&gt;
diff --git a/bin/deploy.sh b/bin/deploy.sh
@@ -66,7 +66,7 @@ else
         cd package
         zip -r ../lambda.zip *;
     )
-fi 
+fi
 
 awslocal lambda create-function \
     --function-name resize \
diff --git a/website/app.js b/website/app.js
@@ -12,7 +12,7 @@
 
     let imageItemTemplate = Handlebars.compile($("#image-item-template").html());
 
-    $("#configForm").submit(function (event) {
+    $("#configForm").submit(async function (event) {
         if (event.preventDefault)
             event.preventDefault();
         else
@@ -22,7 +22,24 @@
 
         let action = $(this).find("button[type=submit]:focus").attr('name');
 
-        if (action == "save") {
+        if (action == "load") {
+            let baseUrl = `${document.location.protocol}//${document.location.host}`;
+            if (baseUrl.indexOf("file://") >= 0) {
+                baseUrl = `http://localhost:4566`;
+            }
+            baseUrl = baseUrl.replace("://webapp.s3.", "://");
+            const headers = {authorization: "AWS4-HMAC-SHA256 Credential=test/20231004/us-east-1/lambda/aws4_request, ..."};
+            const loadUrl = async (funcName, resultElement) => {
+                const url = `${baseUrl}/2021-10-31/functions/${funcName}/urls`;
+                const result = await $.ajax({url, headers}).promise();
+                const funcUrl = JSON.parse(result).FunctionUrlConfigs[0].FunctionUrl;
+                $(`#${resultElement}`).val(funcUrl);
+                localStorage.setItem(resultElement, funcUrl);
+            }
+            await loadUrl("presign", "functionUrlPresign");
+            await loadUrl("list", "functionUrlList");
+            alert("Function URL configurations loaded");
+        } else if (action == "save") {
             localStorage.setItem("functionUrlPresign", $("#functionUrlPresign").val());
             localStorage.setItem("functionUrlList", $("#functionUrlList").val());
             alert("Configuration saved");
diff --git a/website/index.html b/website/index.html
@@ -10,6 +10,7 @@
         crossorigin="anonymous">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"
         rel="stylesheet">
+  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
 </head>
 <body>
 
@@ -43,6 +44,7 @@ <h5 class="card-text">
             <input type="text" class="form-control" id="functionUrlList" autocomplete="false"/>
           </div>
           <div class="mb-3">
+            <button type="submit" name="load" class="btn btn-primary mb-3">Load from API</button>
             <button type="submit" name="save" class="btn btn-primary mb-3">Apply</button>
             <button type="submit" name="clear" class="btn btn-secondary mb-3">Clear</button>
           </div>
@@ -65,7 +67,8 @@ <h5 class="card-title">Form</h5>
           and then forwards the POST request directly to S3.
           Resizing the image to max 400x400 pixels happens asynchronously through S3 bucket notifications.
           If the resizing of an image fails, then an SNS message will be sent, which will trigger an SES email
-          notification. You can find those by visiting <a href="//localhost.localstack.cloud:4566/_aws/ses">http://localhost.localstack.cloud:4566/_aws/ses</a>
+          notification. You can find those by visiting
+          <a href="//localhost.localstack.cloud:4566/_aws/ses">http://localhost.localstack.cloud:4566/_aws/ses</a>
         </p>
         <form id="uploadForm" action="#" method="post">
           <div class="mb-3">
@@ -98,7 +101,7 @@ <h1 class="h4">List your files <i class="bi bi-image"></i></h1>
     <p class="mt-2">
         The images you uploaded should be shown here.
         When the refresh action is triggered, the browser makes a request to the <code>list</code> Lambda URL
-        which returns a JSON document of all items in the images and the resized images bucket. The Javascript
+        which returns a JSON document of all items in the images and the resized images bucket. The JavaScript
         then populates the list below using a Handlebars template.
       </p>
     <hr>

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ else`
`66`	`66`	`cd package`
`67`	`67`	`zip -r ../lambda.zip *;`
`68`	`68`	`)`
`69`		`-fi`
	`69`	`+fi`
`70`	`70`
`71`	`71`	`awslocal lambda create-function \`
`72`	`72`	`--function-name resize \`