This repository has been archived by the owner on Apr 21, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (129 loc) · 6.55 KB
/
index.html
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html>
<head>
<title>The Grommet (Internal) - Report a Problem</title>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules/@thegrommet/m2css/css/app.css">
<style>
.x-container { max-width: 960px; margin-left: auto; margin-right: auto; }
@media (max-width: 1000px) {
.x-container { max-width: unset; margin-left: 40px; margin-right: 40px; }
}
.x-form-group { display: block }
.x-form-label { font-size: 14px; padding-bottom: 2px; display: block }
.x-form-field { width: 100%; padding: 8px; font-size: 16px; border-radius: 2px; border: 1px solid #ccc; resize: none; }
.x-form-output { width: 100%; padding: 8px; font-size: 16px; border-radius: 2px; margin-bottom: 4px }
.x-form-output:empty::after { content: "\00A0" }
.x-form-field:invalid, .x-form-output:invalid, .x-form-output.has-error, .x-form-field.has-error { color: #800; }
@keyframes working {
from {
transform: translateX(-300%) scaleY(2);
}
50% {
transform: translateX(0%) scaleY(1);
}
to {
transform: translateX(300%) scaleY(2);
}
}
.btn.is-working {
font-size: 0px;
}
.btn.is-working>* { display: none }
.btn.is-working::before {
content: " ";
animation: 700ms infinite alternate linear working;
align-self: center;
width: 10px;
height: 10px;
background-color: white;
}
</style>
</head>
<body class='f-body x-container'>
<div class="flex-row flex-justify-center">
<h1 class='f-title flex-8-12 flex-6-8-tablet'>Report a Problem</h1>
</div>
<!--
<div class="flex-row flex-justify-center">
<div class="flex-8-12 flex-6-8-tablet m-t-l">
We're aware of the issue affecting the frobnicator, see slack for updates. — Aria
</div>
</div>
-->
<div class='flex-row flex-justify-center'>
<form id="report-form" action='https://yu5ocp27qf.execute-api.us-west-2.amazonaws.com/production/supportrequest' method='POST' class='flex-8-12 flex-6-8-tablet flex-row flex-wrap f-body'>
<div class="x-form-group flex-6-12 flex-6-8-tablet flex-8-8-phone m-t-l" >
<label for="reporter" class="x-form-label"> Your email address </label>
<input type="email" required id="reporter" name="reporter" class='x-form-field' placeholder="[email protected]">
</div>
<div class="x-form-group flex-12-12 flex-8-8-tablet flex-8-8-phone m-t-l" >
<label for="summary" class="x-form-label"> Brief summary of the problem</label>
<input type="text" required id="summary" name="summary" class='x-form-field' placeholder="This will become the ticket title in JIRA">
</div>
<div class="x-form-group flex-12-12 m-t-l">
<label for="description" class="x-form-label"> Describe the problem </label>
<textarea name="description" required class="x-form-field" rows=10 placeholder="What's wrong, what you expected, what you got instead, and any error numbers or details to help figure it out. Please include steps for reproduction."></textarea>
</div>
<fieldset class="m-t-l flex-12-12" style="border: none">
<legend>How urgently do you expect a reply?</legend>
<p><label><input type="radio" name="urgency" value="emergency"> Immediately</label></p>
<p><label><input type="radio" name="urgency" value="urgent"> Next business day</label></p>
<p><label><input type="radio" name="urgency" value="normal"> This week</label></p>
<p><label><input type="radio" name="urgency" value="low" checked> Standard — not urgent</label></p>
</fieldset>
<output class="x-form-output" name="message"></output>
<div class="flex-12-12 flex-row flex-justify-end">
<button type='submit' class='btn btn-m btn-txt btn-primary'>Send</button>
</div>
</form>
</div>
<script type="module">
const form = document.getElementById('report-form')
const reporter = form.elements.namedItem('reporter')
form.addEventListener('submit', () => {
localStorage.setItem('reporter', reporter.value)
})
const lastReporter = localStorage.getItem('reporter')
if (lastReporter) {
reporter.setAttribute('value', lastReporter)
reporter.value = lastReporter
}
</script>
<script type="module">
const form = document.getElementById('report-form')
const submit = form.querySelector('[type=submit]')
const output = form.elements.namedItem('message')
form.addEventListener('change', () => {
output.classList.remove('has-error')
output.value = ''
})
form.addEventListener('submit', async e => {
e.preventDefault()
const fd = new URLSearchParams(new FormData(form))
try {
output.classList.remove('has-error')
output.value = ''
submit.disabled = true
submit.classList.add('is-working')
const res = await fetch(form.action, { method: form.method, body: fd })
const result = await res.text()
submit.classList.remove('is-working')
submit.disabled = false
form.reset()
if (/text\/html/.test(res.headers.get('content-type'))) {
output.innerHTML = result
} else {
output.value = result
}
} catch (e) {
submit.disabled = false
submit.classList.remove('is-working')
output.classList.add('has-error')
output.value = e.message
console.warn(e)
}
})
</script>
</body>
</html>