dwyl · LimSongWei · Aug 9, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022
diff --git a/.github/workflows/Zap-Baseline-Scan.yml b/.github/workflows/Zap-Baseline-Scan.yml
@@ -0,0 +1,27 @@
+name: Zap-Baseline-Scan
+on:
+ push:
+ branches:
+ - master
+ - 'Chee-Yuan'
+ - 'Daniel-Heng'
+ - 'Johnny-Chuan'
+jobs:
+ check-vulneabilities:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: '14'
+ - name: action-git-diff-suggestions
+ uses: getsentry/action-git-diff-suggestions@v1
+ - name: ZAP Scan
+ uses: zaproxy/[email protected]
+ with:
+ target: 'https://www.zaproxy.org'
+
+
+
+
+
diff --git a/.github/workflows/codacy-static-analysis.yaml b/.github/workflows/codacy-static-analysis.yaml
@@ -0,0 +1,34 @@
+name: Codacy Static Analysis
+
+on: 
+ push:
+ branches:
+ - master
+ - 'Chee-Yuan'
+ - 'Daniel-Heng'
+ - 'Johnny-Chuan'
+
+jobs:
+ codacy-static-scan:
+ name: Codacy Security Scan
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@main
+
+ - name: Run Codacy Analysis CLI
+ uses: codacy/codacy-analysis-cli-action@master
+ with:
+ output: results.sarif
+ format: sarif
+ # Adjust severity of non-security issues
+ gh-code-scanning-compat: true
+ # Force 0 exit code to allow SARIF file generation
+ # This will handover control about PR rejection to the GitHub side
+ max-allowed-issues: 2147483647
+
+ # Upload the SARIF file generated in the previous step
+ - name: Upload SARIF results file
+ uses: github/codeql-action/upload-sarif@main
+ with:
+ sarif_file: results.sarif
diff --git a/background-image.jpg b/background-image.jpg
diff --git a/dwyl_logo.png b/dwyl_logo.png
diff --git a/index.html b/index.html
@@ -1,75 +1,93 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="contact form example">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="contact form example">
  <title>Contact Form Example</title>
 </head>
 
-<body>
- <h2 class="content-head is-center">Contact Us!</h2>
- <aside>
-  <p>
-  We would <em>love</em> to hear from you! </p>
-  <p>Please use the <b><em>Contact Form</em></b>
-  to send us a message.
-  </p>
- </aside>
-
-<!-- START HERE -->
- <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- <!-- Style The Contact Form How Ever You Prefer -->
- <link rel="stylesheet" href="style.css">
+<body style="background-image: url('background-image.jpg'); background-size: cover;">
+ <div style="display:inline-block; width: 20%"> </div>
+ <div class="form-container">
+ <div class="header">
+ <img src="dwyl_logo.png" alt="dwyl_logo" />
+ <h2 class="content-head">Contact Us!</h2>
+ </div>
+ <aside>
+  <p>
+ We would <em>love</em> to hear from you! </p>
+ <p>Please use the <b><em>Contact Form</em></b>
+  to send us a message.
+  </p>
+  <p></p>
+  </aside>
 
- <form class="gform pure-form pure-form-stacked" method="POST" data-email="[email protected]"
- action="https://script.google.com/macros/s/AKfycbwMxYDrufp73bKdU8gMvxFDdHRuzcR4IKQUB33B7GqwyfyZS04/exec">
- <!-- change the form action to your script url -->
+ <!-- START HERE -->
+ <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+ <!-- Style The Contact Form How Ever You Prefer -->
+ <link rel="stylesheet" href="style.css">
 
- <div class="form-elements">
- <fieldset class="pure-group">
- <label for="name">Name: </label>
- <input id="name" name="name" placeholder="What your Mom calls you" />
- </fieldset>
+ <form class="gform pure-form pure-form-stacked" method="POST" data-email="[email protected]"
+ action="https://script.google.com/macros/s/AKfycbwMxYDrufp73bKdU8gMvxFDdHRuzcR4IKQUB33B7GqwyfyZS04/exec">
+ <!-- change the form action to your script url -->
 
- <fieldset class="pure-group">
- <label for="message">Message: </label>
- <textarea id="message" name="message" rows="10"
- placeholder="Tell us what's on your mind..."></textarea>
- </fieldset>
+ <div class="form-elements">
+ <fieldset class="pure-group">
+  <label for="name">Name: </label>
+  <input id="name" name="name" placeholder="What your Mom calls you" />
+  </fieldset>
 
- <fieldset class="pure-group">
- <label for="email"><em>Your</em> Email Address:</label>
- <input id="email" name="email" type="email" value=""
- required placeholder="[email protected]"/>
- </fieldset>
+ <fieldset class="pure-group">
+ <label for="message">Message: </label>
+ <textarea id="message" name="message" rows="10" placeholder="Tell us what's on your mind..."></textarea>
+ </fieldset>
 
- <fieldset class="pure-group">
- <label for="color">Favourite Color: </label>
- <input id="color" name="color" placeholder="green" />
- </fieldset>
+  <fieldset class="pure-group">
+  <label for="email"><em>Your</em> Email Address:</label>
+  <input id="email" name="email" type="email" value="" required placeholder="[email protected]" />
+  </fieldset>
 
- <fieldset class="pure-group honeypot-field">
- <label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty to submit the form! Otherwise, we assume the user is a spam bot.</label>
- <input id="honeypot" type="text" name="honeypot" value="" />
- </fieldset>
+  <fieldset class="pure-group">
+  <label for="color">Favourite Color: </label>
+  <input id="color" name="color" placeholder="green" />
+  </fieldset>
 
- <button class="button-success pure-button button-xlarge">
- <i class="fa fa-paper-plane"></i>&nbsp;Send</button>
- </div>
+ <fieldset class="pure-group honeypot-field">
+ <label for="honeypot">To help avoid spam, utilize a Honeypot technique with a hidden text field; must be empty
+ to submit the form! Otherwise, we assume the user is a spam bot.</label>
+ <input id="honeypot" type="text" name="honeypot" value="" />
+ </fieldset>
 
- <!-- Customise the Thankyou Message People See when they submit the form: -->
- <div class="thankyou_message" style="display:none;">
- <h2><em>Thanks</em> for contacting us!
- We will get back to you soon!</h2>
- </div>
+ <button class="button-success pure-button button-xlarge" onclick="checker()">
+ <i class="fa fa-paper-plane"></i>&nbsp;Send
+ <span class="tooltiptext">Press this button after confirming all the information has been filled in
+ correctly.</span>
+ </button>
+ </div>
 
- </form>
+ <!-- Customise the Thankyou Message People See when they submit the form: -->
+ <div class="thankyou_message" style="display:none;">
+ <h2><em>Thanks</em> for contacting us!
+ We will get back to you soon!</h2>
+ </div>
 
- <!-- Submit the Form to Google Using "AJAX" -->
- <script data-cfasync="false" src="form-submission-handler.js"></script>
-<!-- END -->
+ </form>
 
+ <!-- Submit the Form to Google Using "AJAX" -->
+ <script data-cfasync="false" src="form-submission-handler.js"></script>
+ <script>
+ function checker() {
+ var result = confirm('Are you sure?');
+ if (result = false) {
+ event.preventDefault();
+ }
+ }
+ </script>
+ <!-- END -->
+ </div>
 </body>
-</html>
+
+</html>
diff --git a/style.css b/style.css
@@ -1,40 +1,86 @@
 body {
  margin: 2em;
+ background-color: #44545c;
 }
+
+.header img {
+ float: left;
+ top: 10px;
+ width: 60px;
+ height: 60px;
+ padding-bottom: 40px;
+}
+
 aside {
-  background: #1f8dd6; /* same color as selected state on site menu */
-  padding: 0.3em 1em;
-  border-radius: 3px;
-  color: #fff;
-  margin-bottom: 2em;
+ background: #4dbfa9;
+ padding: 0.3em 1em;
+ border-radius: 3px;
+ color: #fff;
+ margin-bottom: 2em;
 }
+
 textarea {
  width: 100%;
 }
+
 .content-head {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 2em 0 1em;
 }
+
 .is-center {
  text-align: center;
 }
+
 .button-success {
  color: white;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- background: rgb(28, 184, 65); /* this is a green */
+ background: rgb(28, 184, 65);
+ /* this is a green */
+}
+
+.tooltiptext {
+ visibility: hidden;
+ background-color: #4dbfa9;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px;
+ font-size: 15px;
+ right: 135px;
+
+ /* Position the tooltip */
+ position: absolute;
+ z-index: 1;
+}
+
+.button-success:hover .tooltiptext {
+ visibility: visible;
 }
+
 .button-xlarge {
  font-size: 125%;
 }
+
 button {
  float: right;
 }
-#name, #email {
+
+#name,
+#email {
  width: 50%;
 }
+
 .honeypot-field {
  display: none;
 }
+
+.form-container {
+ background: rgba(255, 255, 255, 0.8);
+ width: 700px;
+ display: inline-block;
+ padding: 0px 35px 20px 35px;
+}