serverless-helpdesk/index.html at main · cjgragasin/serverless-helpdesk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IT Helpdesk - Submit a Ticket</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: #232f3e;
    display: flex;
    color: white;
    justify-content: center;
    padding: 50px;
  }
  .card {
    background: #31414f;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 400px;
  }
  h2 { color: #ff9900; }
  label { display: block; margin-top: 15px; font-weight: bold; }
  input, select, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
  }
  button {
    margin-top: 20px;
    background: #ff9900;
    color: rgb(255, 255, 255);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
  }
  button:hover { background: #e88b00; }
  #result {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    display: none;
  }
  .success { background: #d4edda; color: #155724; }
  .error { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>

<div class="card">
  <h2>🎫 IT Helpdesk</h2>
  <p>Submit a ticket and our team will get back to you.</p>

  <form id="ticketForm">
    <label>Name</label>
    <input type="text" id="name" required>

    <label>Email</label>
    <input type="email" id="email" required>

    <label>Issue Type</label>
    <select id="issue_type" required>
      <option value="">Select...</option>
      <option value="Password Reset">Password Reset</option>
      <option value="Software Installation">Software Installation</option>
      <option value="Hardware Issue">Hardware Issue</option>
      <option value="Network/VPN">Network/VPN</option>
      <option value="Other">Other</option>
    </select>

    <label>Description</label>
    <textarea id="description" rows="4" required></textarea>

    <button type="submit">Submit Ticket</button>
  </form>

  <div id="result"></div>
</div>

<script>
const API_URL = "https://ka6g52sns0.execute-api.ap-southeast-1.amazonaws.com/prodHelpDesk/tickets";

document.getElementById("ticketForm").addEventListener("submit", async function(e) {
  e.preventDefault();

  const data = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    issue_type: document.getElementById("issue_type").value,
    description: document.getElementById("description").value
  };

  const resultDiv = document.getElementById("result");
  resultDiv.style.display = "block";
  resultDiv.className = "";
  resultDiv.textContent = "Submitting...";

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data)
    });

    const result = await response.json();

    if (response.ok) {
      resultDiv.className = "success";
      resultDiv.textContent = `✅ Ticket created! Your Ticket ID: ${result.ticket_id}`;
      document.getElementById("ticketForm").reset();
    } else {
      resultDiv.className = "error";
      resultDiv.textContent = "❌ Something went wrong. Please try again.";
    }
  } catch (err) {
    resultDiv.className = "error";
    resultDiv.textContent = "❌ Network error: " + err.message;
  }
});
</script>

</body>
</html>