Skip to content

Commit ee8d771

Browse files
natalialuzuriaganatalialuzuriaga
committed
Add exemption checklist functionality to form
Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
1 parent 8efc8ef commit ee8d771

3 files changed

Lines changed: 192 additions & 76 deletions

File tree

‎css/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ textarea {
6464

6565
.step-number {
6666
margin-top: 10px;
67-
background-color: #005ea2;
67+
background-color: #337AB7;
6868
color: white;
6969
font-weight: bold;
7070
width: 30px;

‎index.html‎

Lines changed: 179 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,191 @@
11
<html>
2-
<head>
3-
<meta charset="utf-8">
4-
<!-- USWDS not working -->
5-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
6-
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
7-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
8-
<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
9-
<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
10-
<!-- <link rel="stylesheet" href="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.css"> -->
11-
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
12-
<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
13-
<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
14-
<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
15-
<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
162

17-
<link rel="icon" type="image/x-icon" href="favicon.ico">
18-
19-
<!-- Uses bootstrap for now -->
20-
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
21-
<link rel="stylesheet" href="css/styles.css">
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- USWDS not working -->
6+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
7+
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
8+
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/css/uswds.min.css"> -->
9+
<!-- <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.form.min.css"> -->
10+
<!-- <link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css"> -->
11+
<!-- <link rel="stylesheet" href="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.css"> -->
12+
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.11.2/js/uswds.min.js"></script> -->
13+
<!-- <script src="https://cdn.form.io/formiojs/formio.form.min.js"></script> -->
14+
<!-- <script src="https://cdn.form.io/uswds/uswds.min.js"></script> -->
15+
<!-- <script src="https://cdn.form.io/formiojs/formio.full.js"></script> -->
16+
<!-- <script src="https://cdn.form.io/js/formio.embed.js"></script> -->
2217

23-
<!-- Working Form.io CDN -->
24-
<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>
25-
<link href="https://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.min.css" rel="stylesheet">
18+
<link rel="icon" type="image/x-icon" href="favicon.ico">
2619

27-
<!-- Render the form -->
28-
<script src="js/generateFormComponents.js"></script>
29-
<script src="js/formDataToJson.js"></script>
30-
<script src="js/autoGenerateFields.js"></script>
31-
<script type="text/javascript">
32-
createFormComponents()
33-
.then((components) => {
34-
Formio.createForm(document.getElementById("formio"), {
35-
display: "form",
36-
theme: "primary",
37-
settings: {
38-
pdf: {
39-
id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
40-
src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
41-
},
20+
<!-- Uses bootstrap for now -->
21+
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
22+
<link rel="stylesheet" href="css/styles.css">
23+
24+
<!-- Working Form.io CDN -->
25+
<script src="https://unpkg.com/formiojs@4.21.6/dist/formio.full.min.js"></script>
26+
<link href="https://cdn.jsdelivr.net/npm/formiojs@4.21.6/dist/formio.full.min.css" rel="stylesheet">
27+
28+
<!-- Render the form -->
29+
<script src="js/generateFormComponents.js"></script>
30+
<script src="js/formDataToJson.js"></script>
31+
<script src="js/autoGenerateFields.js"></script>
32+
<script type="text/javascript">
33+
createFormComponents()
34+
.then((components) => {
35+
Formio.createForm(document.getElementById("formio"), {
36+
display: "form",
37+
theme: "primary",
38+
settings: {
39+
pdf: {
40+
id: "1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
41+
src: "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0",
4242
},
43-
components: components,
44-
}).then(function (form) {
45-
window.formIOInstance = form;
46-
form.on("submit", function (submission) {
47-
console.log("form submission here:", submission);
48-
createCodeJson(submission.data);
49-
});
43+
},
44+
components: components,
45+
}).then(function (form) {
46+
window.formIOInstance = form;
47+
form.on("submit", function (submission) {
48+
console.log("form submission here:", submission);
49+
createCodeJson(submission.data);
5050
});
51-
})
52-
.catch((error) => {
53-
console.error("Error creating components:", error);
5451
});
55-
</script>
56-
</head>
57-
<body>
58-
<div id="form-header"></div>
52+
})
53+
.catch((error) => {
54+
console.error("Error creating components:", error);
55+
});
56+
</script>
57+
</head>
5958

60-
<div id="notification" style="display: none;">
61-
<p id="notification-message"></p>
62-
</div>
63-
64-
<div id="auto-generation">
65-
<p id="auto-generation-header"></p>
66-
<form id="github-url-form">
67-
<label for="repo-url">GitHub Repository URL</label><br>
68-
<input type="text" id="repo-url" name="repo-url"><br>
69-
<input type="submit" id="repo-url-button" value="Submit">
70-
</form>
71-
</div>
59+
<body>
60+
<div id="form-header"></div>
61+
62+
<div id="exemptions">
63+
<p id="exemptions-header"></p>
64+
<form id="exemptions-checklist">
65+
<fieldset class="usa-fieldset">
66+
<!-- <legend class="usa-legend">Answer the series of questions below to determine the maturity model tier of
67+
your project:</legend> -->
68+
<h5>Security & Privacy</h5>
69+
<div class="form-check">
70+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
71+
<label class="form-check-label" for="flexCheckDefault">
72+
Is the source code classified or developed primarily for use in a national security system?
73+
</label>
74+
</div>
75+
<div class="form-check">
76+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
77+
<label class="form-check-label" for="flexCheckDefault">
78+
Is the source code created by an agency or part of an agency that is an element of the
79+
intelligence community, as defined in section 3(4) of the National Security Act of 1947.</label>
80+
</div>
81+
<div class="form-check">
82+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
83+
<label class="form-check-label" for="flexCheckDefault">
84+
Is the source code exempt under section 552(b) of title 5, USC (commonly known as the "Freedom
85+
of Information Act").
86+
</label>
87+
</div>
88+
<div class="form-check">
89+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
90+
<label class="form-check-label" for="flexCheckDefault">
91+
Does the source code create an identifiable risk to the privacy of an individual?</label>
92+
</div>
93+
<div class="form-check">
94+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
95+
<label class="form-check-label" for="flexCheckDefault">
96+
Is the source code exempted by the CIO?</label>
97+
</div>
98+
<h5>National Security and Intelligence</h5>
99+
<div class="form-check">
100+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
101+
<label class="form-check-label" for="flexCheckDefault">
102+
Is the source code primarily for use in national security systems, as defined in Section 11103
103+
of title 40, USC?
104+
</label>
105+
</div>
106+
<div class="form-check">
107+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
108+
<label class="form-check-label" for="flexCheckDefault">
109+
Is the source code created by an agency or part of an agency that is an element of the
110+
intelligence community, as defined in section 3(4) of the National Security Act of 1947?
111+
</label>
112+
</div>
113+
<div class="form-check">
114+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
115+
<label class="form-check-label" for="flexCheckDefault">
116+
Is the source code exempt under section 552(b) of title 5, USC (commonly known as the
117+
"Freedom of Information Act")?
118+
</label>
119+
</div>
120+
<h5>Export and Regulatory Compliance</h5>
121+
<div class="form-check">
122+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
123+
<label class="form-check-label" for="flexCheckDefault">
124+
Is the project prohibited under Export Administration Regulations?
125+
</label>
126+
</div>
127+
<div class="form-check">
128+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
129+
<label class="form-check-label" for="flexCheckDefault">
130+
Is the project prohibited under International Traffic in Arms Regulations (ITAR)?
131+
</label>
132+
</div>
133+
<div class="form-check">
134+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
135+
<label class="form-check-label" for="flexCheckDefault">
136+
Is the project prohibited under Regulations of the Transportation Security Administration
137+
related to the protection of sensitive
138+
information?
139+
</label>
140+
</div>
141+
<div class="form-check">
142+
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
143+
<label class="form-check-label" for="flexCheckDefault">
144+
Is the project prohibited under Federal laws and regulations governing the sharing of
145+
classified
146+
information?
147+
</label>
148+
</div>
149+
</fieldset>
150+
<button type="submit" class="usa-button">
151+
Submit
152+
</button>
153+
</form>
154+
</div>
72155

73-
<div id="formio"></div>
156+
<div id="notification" style="display: none;">
157+
<p id="notification-message"></p>
158+
</div>
74159

75-
<div id="output">
76-
<label for="json-result">Your JSON Metadata </label>
77-
<textarea class="form-control" rows="10" id="json-result" readonly></textarea>
78-
<button type="button" class="btn btn-outline" href="#" onclick="copyToClipboard(event)">Copy</button>
79-
<button type="button" class="btn btn-outline" href="#" onclick="downloadFile(event)">Download</button>
80-
<button type="button" class="btn btn-outline" href="#" onclick="createProjectPR(event)">Create Pull Request</button>
81-
<button type="button" class="btn btn-outline" href="#" onclick="emailFile(event)">Email</button>
160+
<div id="auto-generation">
161+
<p id="auto-generation-header"></p>
162+
<form id="github-url-form">
163+
<label for="repo-url">GitHub Repository URL</label><br>
164+
<input type="text" id="repo-url" name="repo-url"><br>
165+
<input type="submit" id="repo-url-button" value="Submit">
166+
</form>
167+
</div>
168+
169+
<div id="form-subheader">
170+
<div class="step-header">
171+
<div class="step-number">3</div>
172+
<h3>Complete the entire form to generate the code.json file</h3>
82173
</div>
174+
</div>
175+
<br>
176+
177+
<div id="formio"></div>
178+
179+
<div id="output">
180+
<label for="json-result">Your JSON Metadata </label>
181+
<textarea class="form-control" rows="10" id="json-result" readonly></textarea>
182+
<button type="button" class="btn btn-outline" href="#" onclick="copyToClipboard(event)">Copy</button>
183+
<button type="button" class="btn btn-outline" href="#" onclick="downloadFile(event)">Download</button>
184+
<button type="button" class="btn btn-outline" href="#" onclick="createProjectPR(event)">Create Pull
185+
Request</button>
186+
<button type="button" class="btn btn-outline" href="#" onclick="emailFile(event)">Email</button>
187+
</div>
188+
189+
</body>
83190

84-
</body>
85-
</html>
191+
</html>

‎js/generateFormComponents.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,12 +247,21 @@ function createComponent(fieldName, fieldObject, requiredArray) {
247247
// Adds heading containing schema information
248248
function createFormHeading(title, description) {
249249
const container = document.getElementById('form-header');
250-
container.innerHTML = `<h1>${title}</h1>\n<h2>${description}</h2>`;
250+
container.innerHTML = `
251+
<h1>${title}</h1>\n
252+
<h2>${description}</h2>\n
253+
<h3>Complete the form below to create a code.json file for your project:</h3>\n
254+
`;
255+
}
256+
257+
function createExemptionsBox() {
258+
const container = document.getElementById("exemptions-header")
259+
container.innerHTML = `<div class="step-header"><div class="step-number">1</div><h3>Is my project exempted from the SHARE IT Act?</h3></div> \n <h4> Answer the series of questions below to determine if your project falls under the 4 exemption categories according to the SHARE IT Act. </h4>`
251260
}
252261

253262
function createAutoGenerationBox() {
254263
const container = document.getElementById("auto-generation-header")
255-
container.innerHTML = `<h3>Auto Generate Fields</h3> \n <h4> Please enter your repositories GitHub URL in order to automatically pre-fill some of the fields in this form! </h4> \n <h6> <i>This currently only works on <b>public</b> repositories</i> </h6>`
264+
container.innerHTML = `<div class="step-header"><div class="step-number">2</div><h3>Auto Generate Fields</h3></div> \n <h4> Please enter your repositories GitHub URL in order to automatically pre-fill some of the fields in this form! </h4> \n <h6> <i>This currently only works on <b>public</b> repositories</i> </h6>`
256265
}
257266

258267
// Iterates through each json field and creates component array for Form.io
@@ -301,6 +310,7 @@ async function createFormComponents() {
301310
console.log("JSON Data:", jsonData);
302311

303312
createFormHeading(jsonData["title"], jsonData["description"]);
313+
createExemptionsBox()
304314
createAutoGenerationBox()
305315

306316
components = createAllComponents(jsonData);

0 commit comments

Comments
 (0)