16 |
17 |
18 |
16 |
17 |
18 |
18 |
19 |
20 |
22 |
23 |
24 |
29 |
61 | {{todo.title}}
62 |
63 | {{todo.description}}
64 |
65 | Due Date: {{todo.dateDue}}
66 |
67 |
68 |
69 |
190 |
191 |
192 | This site is a sample todo-list app created for training purposes. More details here.
193 |
16 |
17 |
18 | 
';
704 | const botIcon = '
';
705 | // Choose icon based on sender
706 | const icon = sender === 'user' ? '👤 ' : botIcon; // Human icon for user, robot icon for bot
707 |
708 | // Set the innerHTML to include the icon and text
709 | // Note: When using innerHTML, ensure your content is safe to prevent XSS vulnerabilities
710 | messageElement.innerHTML = icon + text;
711 |
712 | chatMessages.appendChild(messageElement);
713 | chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to the latest message
714 | }
715 |
716 |
717 | function displayTypingIndicator() {
718 | const chatMessages = document.getElementById('chatMessages');
719 | let typingIndicator = document.getElementById('typingIndicator');
720 |
721 | // If the typing indicator doesn't already exist, create it.
722 | if (!typingIndicator) {
723 | typingIndicator = document.createElement('div');
724 | typingIndicator.classList.add('message', 'typing');
725 | typingIndicator.id = 'typingIndicator';
726 | typingIndicator.textContent = '...';
727 | chatMessages.appendChild(typingIndicator);
728 | }
729 |
730 | chatMessages.scrollTop = chatMessages.scrollHeight; // Auto-scroll to the latest message
731 | }
732 |
733 | function removeTypingIndicator() {
734 | const typingIndicator = document.getElementById('typingIndicator');
735 | if (typingIndicator) {
736 | typingIndicator.remove();
737 | }
738 | }
739 |
740 | function sendMessage() {
741 | const userInput = document.getElementById('userInput');
742 | const message = userInput.value.trim();
743 | if (message === '') return; // Prevent sending empty messages
744 | userInput.value = ''; // Clear the input field
745 |
746 | displayMessage(message, 'user'); // Display the user message in the chat
747 |
748 | displayTypingIndicator(); // Display the typing indicator
749 |
750 | try {
751 | var userID = localStorage.getItem('userID');
752 | const sessionTokensString = localStorage.getItem('sessionTokens');
753 | const sessionTokens = JSON.parse(sessionTokensString);
754 | const IdToken = sessionTokens.IdToken;
755 | const idJwt = IdToken.jwtToken;
756 |
757 | const websocket = new WebSocket('wss://bum4o4rx48.execute-api.us-east-1.amazonaws.com/production/');
758 | const payload = {
759 | action: 'invokeBedrockAgent',
760 | userID: userID,
761 | human: message
762 | };
763 | console.log("invoking bedrock agent with payload: " + JSON.stringify(payload));
764 |
765 | websocket.onopen = function() {
766 | websocket.send(JSON.stringify(payload));
767 | };
768 |
769 | websocket.onmessage = function(event) {
770 | const data = JSON.parse(event.data);
771 | removeTypingIndicator(); // Remove the typing indicator
772 | displayMessage(data.response, 'bot'); // Display the bot response
773 | websocket.close(); // Close the WebSocket connection after receiving the response
774 | };
775 |
776 | websocket.onerror = function(event) {
777 | console.error('Error:', event);
778 | removeTypingIndicator(); // Ensure to remove the typing indicator even on error
779 | displayMessage("Sorry, there was an error. Please try again.", 'bot');
780 | };
781 |
782 | websocket.onclose = function() {
783 | // WebSocket connection closed
784 | };
785 |
786 | } catch (err) {
787 | alert("An error occurred. Please try again!");
788 | console.log(err.message);
789 | }
790 | }
--------------------------------------------------------------------------------
/frontend/js/script_new.js:
--------------------------------------------------------------------------------
1 | var todoApiEndpoint = 'https://j3cv37qhud.execute-api.us-east-1.amazonaws.com/dev/';
2 | var todoFilesApiEndpoint = 'https://4oumdscha7.execute-api.us-east-1.amazonaws.com/dev/';
3 | var cognitoUserPoolId = 'us-east-1_fM3BzKm1u';
4 | var cognitoUserPoolClientId = '4ajb6clml9vft00cof689o6c0p';
5 | var cognitoIdentityPoolId = 'us-east-1:bbb155cb-c623-42bd-898e-57fcb4f76357';
6 | var bucketName = 'hpf-todo-app-files';
7 | var awsRegion = 'us-east-1';
8 |
9 | var gridScope;
10 | var descriptionScope;
11 |
12 | function loggedInDisplay() {
13 | $("#signInButton").addClass("d-none");
14 | $("#signOutButton").removeClass("d-none");
15 | }
16 |
17 | function loggedOutDisplay() {
18 | $("#signInButton").removeClass("d-none");
19 | $("#signOutButton").addClass("d-none");
20 | }
21 |
22 | function initializeStorage() {
23 | var identityPoolId = cognitoUserPoolId;//
24 | var userPoolId = cognitoUserPoolId; //
25 | var clientId = cognitoUserPoolClientId;//
26 | var loginPrefix = 'cognito-idp.' + awsRegion + '.amazonaws.com/' + identityPoolId;
27 |
28 | localStorage.setItem('identityPoolId', identityPoolId);
29 | localStorage.setItem('userPoolId', userPoolId);
30 | localStorage.setItem('clientId', clientId);
31 | localStorage.setItem('loginPrefix', loginPrefix);
32 | }
33 |
34 | function updateModalText(descriptionTodo) {
35 | applyDescriptionScope(descriptionTodo);
36 | if (descriptionTodo.completed == true) {
37 | markCompleted();
38 | } else {
39 | markNotCompleted();
40 | }
41 | }
42 |
43 | function markCompleted() {
44 | $("#completedButton").addClass("d-none");
45 | $("#alreadyCompletedButton").removeClass("d-none");
46 | }
47 |
48 | function markNotCompleted() {
49 | $("#completedButton").removeClass("d-none");
50 | $("#alreadyCompletedButton").addClass("d-none");
51 | }
52 |
53 | function showAddFilesForm(){
54 | $("#addFilesForm").removeClass("d-none");
55 | }
56 |
57 | function hideAddFilesForm(){
58 | $("#addFilesForm").addClass("d-none");
59 | $("#fileinput").replaceWith($("#fileinput").val('').clone(true));
60 | }
61 |
62 | function addFileName () {
63 | var fileName = document.getElementById('fileinput').files[0].name;
64 | document.getElementById('fileName').innerHTML = fileName;
65 | }
66 |
67 | function applyGridScope(todosList) {
68 | gridScope.todos = todosList;
69 | gridScope.$apply();
70 | }
71 |
72 | function applyDescriptionScope(todo) {
73 | descriptionScope.descriptionTodo = todo;
74 | descriptionScope.$apply();
75 | }
76 |
77 | function register() {
78 | event.preventDefault();
79 |
80 | var poolData = {
81 | UserPoolId : cognitoUserPoolId,
82 | ClientId : cognitoUserPoolClientId
83 | };
84 | var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
85 |
86 | var attributeList = [];
87 |
88 |
89 | var email = document.getElementById('email').value;
90 | var pw = document.getElementById('pwd').value;
91 | var confirmPw = document.getElementById('confirmPwd').value;
92 | var dataEmail = {
93 | Name : 'email',
94 | Value : email
95 | };
96 |
97 | var attributeEmail = new AmazonCognitoIdentity.CognitoUserAttribute(dataEmail);
98 |
99 | attributeList.push(attributeEmail);
100 |
101 | if (pw === confirmPw) {
102 | userPool.signUp(email, pw, attributeList, null, function(err, result){
103 | if (err) {
104 | alert(err.message);
105 | return;
106 | }
107 | cognitoUser = result.user;
108 | console.log(cognitoUser);
109 | localStorage.setItem('email', email);
110 | window.location.replace('confirm.html');
111 | });
112 | } else {
113 | alert('Passwords do not match.')
114 | };
115 | }
116 |
117 | function confirm() {
118 | event.preventDefault();
119 |
120 | var confirmCode = document.getElementById('confirmCode').value;
121 |
122 | var poolData = {
123 | UserPoolId : cognitoUserPoolId,
124 | ClientId : cognitoUserPoolClientId
125 | };
126 |
127 | var userName = localStorage.getItem('email');
128 |
129 | var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
130 | var userData = {
131 | Username : userName,
132 | Pool : userPool
133 | };
134 |
135 | var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
136 | cognitoUser.confirmRegistration(confirmCode, true, function(err, result) {
137 | if (err) {
138 | alert(err.message);
139 | return;
140 | }
141 | window.location.replace("index.html");
142 | });
143 | }
144 |
145 | function login(){
146 | var userPoolId = localStorage.getItem('userPoolId');
147 | var clientId = localStorage.getItem('clientId');
148 | var identityPoolId = localStorage.getItem('identityPoolId');
149 | var loginPrefix = localStorage.getItem('loginPrefix');
150 |
151 | AWSCognito.config.region = awsRegion;
152 | AWSCognito.config.credentials = new AWS.CognitoIdentityCredentials({
153 | IdentityPoolId: identityPoolId // your identity pool id here
154 | });
155 | AWSCognito.config.update({accessKeyId: 'anything', secretAccessKey: 'anything'})
156 |
157 | AWS.config.region = awsRegion; // Region
158 | AWS.config.credentials = new AWS.CognitoIdentityCredentials({
159 | IdentityPoolId: identityPoolId
160 | });
161 |
162 | var poolData = {
163 | UserPoolId : userPoolId, // Your user pool id here
164 | ClientId : clientId // Your client id here
165 | };
166 | var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
167 |
168 | var username = $('#username').val();
169 | var password = $('#password').val();
170 |
171 | var authenticationData = {
172 | Username: username,
173 | Password: password
174 | };
175 |
176 | var authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails(authenticationData);
177 |
178 | var userData = {
179 | Username : username,
180 | Pool : userPool
181 | };
182 | var cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
183 | console.log(cognitoUser);
184 |
185 | cognitoUser.authenticateUser(authenticationDetails, {
186 | onSuccess: function (result) {
187 | var accessToken = result.getAccessToken().getJwtToken();
188 | console.log('Authentication successful', accessToken);
189 | var sessionTokens =
190 | {
191 | IdToken: result.getIdToken(),
192 | AccessToken: result.getAccessToken(),
193 | RefreshToken: result.getRefreshToken()
194 | };
195 | localStorage.setItem('sessionTokens', JSON.stringify(sessionTokens))
196 | localStorage.setItem('userID', username);
197 | //localStorage.setItem('password', password);
198 | window.location = './home.html';
199 | },
200 | onFailure: function(err) {
201 | console.log('failed to authenticate');
202 | console.log(JSON.stringify(err));
203 | alert('Failed to Log in.\nPlease check your credentials.');
204 | },
205 | });
206 | }
207 |
208 | function checkLogin(redirectOnRec, redirectOnUnrec){
209 | var userPoolId = localStorage.getItem('userPoolId');
210 | var clientId = localStorage.getItem('clientId');
211 | var identityPoolId = localStorage.getItem('identityPoolId');
212 | var loginPrefix = localStorage.getItem('loginPrefix');
213 |
214 | var poolData = {
215 | UserPoolId : userPoolId, // Your user pool id here
216 | ClientId : clientId // Your client id here
217 | };
218 | var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
219 | var cognitoUser = userPool.getCurrentUser();
220 |
221 | if (cognitoUser != null) {
222 | console.log("user exists");
223 | if (redirectOnRec) {
224 | window.location = './home.html';
225 | loggedInDisplay();
226 | } else {
227 | $("#body").css({'visibility':'visible'});
228 | }
229 | } else {
230 | if (redirectOnUnrec) {
231 | window.location = './index.html'
232 | }
233 | }
234 | }
235 |
236 | function refreshAWSCredentials() {
237 | var userPoolId = localStorage.getItem('userPoolId');
238 | var clientId = localStorage.getItem('clientId');
239 | var identityPoolId = localStorage.getItem('identityPoolId');
240 | var loginPrefix = localStorage.getItem('loginPrefix');
241 |
242 | var poolData = {
243 | UserPoolId : userPoolId, // Your user pool id here
244 | ClientId : clientId // Your client id here
245 | };
246 | var userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);
247 | var cognitoUser = userPool.getCurrentUser();
248 |
249 | if (cognitoUser != null) {
250 | cognitoUser.getSession(function(err, result) {
251 | if (result) {
252 | console.log('You are now logged in.');
253 | cognitoUser.refreshSession(result.getRefreshToken(), function(err, result) {
254 |
255 | if (err) {//throw err;
256 | console.log('In the err: '+err);
257 | }
258 | else{
259 | localStorage.setItem('awsConfig', JSON.stringify(AWS.config));
260 | var sessionTokens =
261 | {
262 | IdToken: result.getIdToken(),
263 | AccessToken: result.getAccessToken(),
264 | RefreshToken: result.getRefreshToken()
265 | };
266 | localStorage.setItem("sessionTokens", JSON.stringify(sessionTokens));
267 |
268 | }
269 | });
270 |
271 | }
272 | });
273 | }
274 | }
275 |
276 | function logOut() {
277 | localStorage.clear();
278 | document.location.reload();
279 | window.location = './index.html';
280 | }
281 |
282 | function getTodos(callback) {
283 | try{
284 | var userID = localStorage.getItem('userID');
285 | var todoApi = todoApiEndpoint + userID +'/todos';
286 |
287 | var sessionTokensString = localStorage.getItem('sessionTokens');
288 | var sessionTokens = JSON.parse(sessionTokensString);
289 | var IdToken = sessionTokens.IdToken;
290 | var idJwt = IdToken.jwtToken;
291 |
292 | $.ajax({
293 | url : todoApi,
294 | type : 'GET',
295 | headers : {'Authorization' : idJwt },
296 | success : function(response) {
297 | console.log("successfully loaded todos for " + userID);
298 | callback(response.todos);
299 | },
300 | error : function(response) {
301 | console.log("could not retrieve todos list.");
302 | if (response.status == "401") {
303 | refreshAWSCredentials();
304 | }
305 | }
306 | });
307 | }catch(err) {
308 | alert("You need to be signed in. Redirecting you to the sign in page!");
309 | loggedOutDisplay();
310 | console.log(err.message);
311 | }
312 | }
313 |
314 | function getTodo(todoID, callback) {
315 | var userID = localStorage.getItem('userID');
316 | var todoApi = todoApiEndpoint + userID +'/todos/' + todoID;
317 |
318 | var sessionTokensString = localStorage.getItem('sessionTokens');
319 | var sessionTokens = JSON.parse(sessionTokensString);
320 | var IdToken = sessionTokens.IdToken;
321 | var idJwt = IdToken.jwtToken;
322 |
323 | $.ajax({
324 | url : todoApi,
325 | type : 'GET',
326 | headers : {'Authorization' : idJwt },
327 | success : function(response) {
328 | console.log('todoID: ' + todoID);
329 | callback(response);
330 | },
331 | error : function(response) {
332 | console.log("could not retrieve todo.");
333 | if (response.status == "401") {
334 | refreshAWSCredentials();
335 | }
336 | }
337 | });
338 | }
339 |
340 | function addTodo(dateDue, title, description){
341 | var userID = localStorage.getItem('userID');
342 | var todoApi = todoApiEndpoint + userID + "/todos/add";
343 |
344 | var sessionTokensString = localStorage.getItem('sessionTokens');
345 | var sessionTokens = JSON.parse(sessionTokensString);
346 | var IdToken = sessionTokens.IdToken;
347 | var idJwt = IdToken.jwtToken;
348 |
349 | todo = {
350 | title: title,
351 | description: description,
352 | dateDue: dateDue,
353 | }
354 |
355 | $.ajax({
356 | url : todoApi,
357 | type : 'POST',
358 | headers : {'Content-Type': 'application/json', 'Authorization' : idJwt},
359 | dataType: 'json',
360 | data : JSON.stringify(todo),
361 | success : function(response) {
362 | console.log("todo added!")
363 | window.location.reload();
364 | $("#success-addTodo").show();
365 | $("#success-addTodo").html("Todo successfully added (^_^)");
366 | },
367 | error : function(response) {
368 | console.log("could not add todo");
369 | $("#error-addTodo").show();
370 | $("#error-addTodo").html("Could not add todo (x_x) ");
371 | console.log(response);
372 |
373 | }
374 | });
375 | }
376 |
377 | function completeTodo(todoID, callback) {
378 | try {
379 | var userID = localStorage.getItem('userID');
380 | var todoApi = todoApiEndpoint + userID + "/todos/" + todoID + "/complete";
381 |
382 | var sessionTokensString = localStorage.getItem('sessionTokens');
383 | var sessionTokens = JSON.parse(sessionTokensString);
384 | var IdToken = sessionTokens.IdToken;
385 | var idJwt = IdToken.jwtToken;
386 |
387 | $.ajax({
388 | url : todoApi,
389 | async : false,
390 | type : 'POST',
391 | headers : {'Authorization' : idJwt },
392 | success : function(response) {
393 | console.log("marked as completed: " + todoID)
394 | callback();
395 | },
396 | error : function(response) {
397 | console.log("could not completed todo");
398 | if (response.status == "401") {
399 | refreshAWSCredentials();
400 | }
401 | }
402 | });
403 | } catch(err) {
404 | alert("You must be logged in");
405 | console.log(err.message);
406 | }
407 | }
408 |
409 | function addTodoNotes(todoID, notes) {
410 | try {
411 | var userID = localStorage.getItem('userID');
412 | var todoApi = todoApiEndpoint + userID + "/todos/" + todoID + "/addnotes";
413 |
414 | var sessionTokensString = localStorage.getItem('sessionTokens');
415 | var sessionTokens = JSON.parse(sessionTokensString);
416 | var IdToken = sessionTokens.IdToken;
417 | var idJwt = IdToken.jwtToken;
418 |
419 | inputNotes = {
420 | notes: notes,
421 | }
422 | $.ajax({
423 | url : todoApi,
424 | type : 'POST',
425 | headers : {'Content-Type': 'application/json','Authorization' : idJwt },
426 | dataType: 'json',
427 | data: JSON.stringify(inputNotes),
428 | success : function(response) {
429 | console.log("added notes for: " + todoID)
430 | },
431 | error : function(response) {
432 | console.log("could not add notes");
433 | if (response.status == "401") {
434 | refreshAWSCredentials();
435 | }
436 | }
437 | });
438 | } catch(err) {
439 | alert("You must be logged in to save notes");
440 | console.log(err.message);
441 | }
442 | }
443 |
444 | function addTodoFiles(todoID, files) {
445 | try{
446 | var userID = localStorage.getItem('userID');
447 | var todoFilesApi = todoFilesApiEndpoint + todoID + "/files/upload";
448 |
449 | var sessionTokensString = localStorage.getItem('sessionTokens');
450 | var sessionTokens = JSON.parse(sessionTokensString);
451 | var IdToken = sessionTokens.IdToken;
452 | var idJwt = IdToken.jwtToken;
453 |
454 | if (!files.length) {
455 | alert("You need to choose a file to upload.");
456 | };
457 |
458 | var fileObj = new FormData();
459 | var file = files[0];
460 | var sizeInKB = file.size/1024;
461 | console.log('uploading a file of ' + sizeInKB)
462 | if (sizeInKB > 2048) {
463 | alert("File size exceeds the limit of 2MB.");
464 | };
465 | //fileObj.append(file.name, file);
466 | var fileObj = {
467 | fileName: file.name,
468 | fileBody: file
469 | };
470 | console.log(fileObj);
471 | $.ajax({
472 | url : todoFilesApi,
473 | type : 'POST',
474 | headers : {'Authorization' : idJwt },
475 | contentType: false,
476 | processData: false,
477 | data: fileObj,
478 | success : function(response) {
479 | console.log("added file for todo: " + todoID)
480 | hideAddFilesForm();
481 | },
482 | error : function(response) {
483 | console.log("could not add file for todo: " + todoID);
484 | if (response.status == "401") {
485 | refreshAWSCredentials();
486 | }
487 | }
488 | });
489 | } catch(err) {
490 | alert("You must be logged in to add todo attachment");
491 | console.log(err.message);
492 | }
493 |
494 | }
495 |
496 | function uploadTodoFileS3(todoID, bucket, filesToUp){
497 | var userID = localStorage.getItem('userID');
498 | var todoFilesApi = todoFilesApiEndpoint + todoID + "/files/upload";
499 | var sessionTokensString = localStorage.getItem('sessionTokens');
500 | var sessionTokens = JSON.parse(sessionTokensString);
501 | var IdToken = sessionTokens.IdToken;
502 | var idJwt = IdToken.jwtToken;
503 | if (!filesToUp.length) {
504 | alert("You need to choose a file to upload.");
505 | }
506 | else{
507 | //var fileObj = new FormData();
508 | var file = filesToUp[0];
509 | var fileName = file.name;
510 | var filePath = userID + '/' + todoID + '/' + fileName;
511 | var fileUrl = 'https://' + awsRegion + '.amazonaws.com/' + bucketName + '/' + filePath;
512 | var sizeInKB = file.size/1024;
513 | console.log('uploading a file of ' + sizeInKB)
514 | if (sizeInKB > 2048) {
515 | alert("File size exceeds the limit of 2MB.");
516 | }
517 | else{
518 | var params = {
519 | Key: filePath,
520 | Body: file,
521 | ACL: 'public-read'
522 | };
523 | bucket.upload(params, function(err, data) {
524 | if (err) {
525 | console.log(err, err.stack);
526 | alert("Failed to upload file " + fileName);
527 | } else {
528 | console.log(fileName + ' successfully uploaded file for ' + todoID);
529 | var fileObj = {
530 | 'fileName': fileName,
531 | 'filePath': fileUrl
532 | }
533 | $.ajax({
534 | url : todoFilesApi,
535 | type : 'POST',
536 | headers : {'Content-Type': 'application/json', 'Authorization' : idJwt },
537 | contentType: 'json',
538 | data: JSON.stringify(fileObj),
539 | success : function(response) {
540 | console.log("dynamodb table updated with filePath " + fileName)
541 |
542 | },
543 | error : function(response) {
544 | console.log("could not update dynamodb table: " + fileName);
545 | if (response.status == "401") {
546 | refreshAWSCredentials();
547 | }
548 | }
549 | });
550 | hideAddFilesForm();
551 | }
552 | })
553 | }
554 | }
555 | }
556 |
557 | function addTodoFiles(todoID, files) {
558 | var userPoolId = localStorage.getItem('userPoolId');
559 | var clientId = localStorage.getItem('clientId');
560 | var identityPoolId = localStorage.getItem('identityPoolId');
561 | var loginPrefix = localStorage.getItem('loginPrefix');
562 |
563 | try{
564 | AWS.config.update({
565 | region: awsRegion,
566 | credentials: new AWS.CognitoIdentityCredentials({
567 | IdentityPoolId: identityPoolId
568 | })
569 | });
570 | var s3 = new AWS.S3({
571 | apiVersion: '2006-03-01',
572 | params: {Bucket: bucketName}
573 | });
574 | uploadTodoFileS3(todoID, s3, files);
575 |
576 | }
577 | catch(err) {
578 | //alert("You must be logged in to add todo attachment");
579 | console.log(err.message);
580 | }
581 | }
--------------------------------------------------------------------------------
/frontend/register.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
17 |
18 | 
{{descriptionTodo.title}}
99 | 
Add a new todo