· 6 years ago · Jan 29, 2020, 12:04 PM
1componentDidMount() {
2 if (this.props.crypt.tempState) {
3 let { inputText, inputFile, key, selectedTest, selectedGraph } = this.props.crypt.tempState
4 this.setState({ inputText, inputFile, key, selectedTest, selectedGraph })
5 }
6 else {
7 fetch(baseUrl + 'algorithm/crypt', {
8 headers: {
9 'Authorization': localStorage.getItem('token')
10 }
11 })
12 .then(res => res.ok && res.json())
13 .then(res => res.success && this.setState({ addonAlgos: res.algos }))
14 }
15 }
16 componentWillUnmount() {
17 this.props.createStateStore(this.state)
18 }
19 getSnapshotBeforeUpdate(prevProps, prevState) {
20 let height = this.algorithms.current
21 return height.scrollHeight - height.scrollTop
22 }
23 componentDidUpdate(prevProps, prevState, snapshot) {
24 if (snapshot !== null) {
25 let height = this.algorithms.current
26 height.scrollTop = height.scrollHeight - snapshot
27 }
28 }
29 // ADD-ON LANGUAGE MODAL TOGGLER
30 toggleAddonLanguageModal = () => this.setState({ addonLanguageModal: !this.state.addonLanguageModal })
31 toggleAlgoModal = () => this.setState({ algoModalOpen: !this.state.algoModalOpen })
32 toggleKeyValueModal = () => this.setState({ keyvalueModalOpen: !this.state.keyvalueModalOpen })
33 toggleApiModal = () => this.setState({ apiModalOpen: !this.state.apiModalOpen })
34 // TEXT INPUT CHANGE HANDLER
35 handleInputChange = (e) => {
36 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
37 let { name, value } = e.target
38 this.setState({ [name]: value })
39 name === 'inputCipherText' && this.setState({ inputFile1: null })
40 name = 'inputPlainText' && this.setState({ inputFile2: null })
41 }
42 handleNumberChange = e => {
43 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
44 let { name, value } = e.target
45 if (value === '' || parseInt(value) >= 1) this.setState({ [name]: value })
46 }
47 // FILE INPUT CHANGE HANDLER
48 handleFileChange = e => {
49 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
50 let { name, files } = e.target
51 this.setState({ [name]: files[0] })
52 name === 'inputFile1' && this.setState({ inputCipherText: '' })
53 name === 'inputFile2' && this.setState({ inputPlainText: '' })
54 }
55 handleAlgoType = (e) =>{
56 switch(this.state.algoType ){
57 case 'Double':
58 this.setState({
59 inputCipherText: '',
60 inputCipherTextOpen: true,
61 inputPlainTextOpen: false,
62 inputFile2: null,
63 keyFirst: '',
64 keyFirstOpen: true,
65 keySecond: '',
66 keySecondOpen: true,
67 nGram: '',
68 nGramOpen: false,
69 dictFile: null,
70 dictFileOpen: false,
71 algoTypeOpen: true,
72 period: '',
73 periodOpen: false,
74 keyword: '',
75 keywordOpen: false,
76 signLevel: '',
77 signLevelOpen: false,
78 language: '',
79 languageOpen: false,
80 matrixOpen: false,
81 stream1: '',
82 stream2: '',
83 streamOpen: false,
84 iterBtnOpen: true
85 })
86 break;
87 default:
88 this.setState({
89 inputCipherText: '',
90 inputCipherTextOpen: true,
91 inputPlainTextOpen: false,
92 inputFile2: null,
93 keyFirst: '',
94 keyFirstOpen: true,
95 keySecond: '',
96 keySecondOpen: false,
97 nGram: '',
98 nGramOpen: false,
99 dictFile: null,
100 dictFileOpen: false,
101 algoTypeOpen: true,
102 period: '',
103 periodOpen: false,
104 keyword: '',
105 keywordOpen: false,
106 signLevel: '',
107 signLevelOpen: false,
108 language: '',
109 languageOpen: false,
110 matrixOpen: false,
111 stream1: '',
112 stream2: '',
113 streamOpen: false,
114 iterBtnOpen: true
115 })
116 break;
117 }
118 }
119 // TEST SELECTOR
120 handleTestSelection = e => {
121 if (this.props.crypt.output || this.props.crypt.errMess || this.props.crypt.isExecuting) return;
122 this.setState({ selectedTest: e.target.id, algoTypeOpts: [], matrix: new Array(7).fill(new Array(7).fill('')) })
123 switch (testNames.indexOf(e.target.id)) {
124 case 0: case 3: case 6: case 8: case 12: case 19: case 23: case 24:
125 this.setState({
126 inputCipherText: '',
127 inputCipherTextOpen: true,
128 inputPlainTextOpen: false,
129 inputFile2: null,
130 keyFirst: '',
131 keyFirstOpen: false,
132 keySecond: '',
133 keySecondOpen: false,
134 nGram: '',
135 nGramOpen: false,
136 dictFile: null,
137 dictFileOpen: false,
138 algoType: '',
139 algoTypeOpen: false,
140 period: '',
141 periodOpen: false,
142 keyword: '',
143 keywordOpen: false,
144 signLevel: '',
145 signLevelOpen: false,
146 language: '',
147 languageOpen: false,
148 matrixOpen: false,
149 stream1: '',
150 stream2: '',
151 streamOpen: false,
152 iterBtnOpen: false
153 })
154 break;
155 case 7: case 37:
156 this.setState({
157 inputCipherText: '',
158 inputCipherTextOpen: true,
159 inputPlainTextOpen: true,
160 inputFile2: null,
161 inputFile2Open: true,
162 keyFirst: '',
163 keyFirstOpen: false,
164 keySecond: '',
165 keySecondOpen: false,
166 nGram: '',
167 nGramOpen: false,
168 dictFile: null,
169 dictFileOpen: false,
170 algoType: '',
171 algoTypeOpen: false,
172 period: '',
173 periodOpen: false,
174 keyword: '',
175 keywordOpen: false,
176 signLevel: '',
177 signLevelOpen: false,
178 language: '',
179 languageOpen: false,
180 matrixOpen: false,
181 stream1: '',
182 stream2: '',
183 streamOpen: false,
184 iterBtnOpen: false
185 })
186 break;
187 case 1: case 14:
188 if (testNames.indexOf(e.target.id) === 1) this.setState({ algoTypeOpts: algoTypeOpts.slice(0, 2) })
189 else this.setState({ algoTypeOpts: algoTypeOpts.slice(2, 4) })
190 this.setState({
191 inputCipherText: '',
192 inputCipherTextOpen: true,
193 inputPlainTextOpen: false,
194 inputFile2: null,
195 keyFirst: '',
196 keyFirstOpen: false,
197 keySecond: '',
198 keySecondOpen: false,
199 nGram: '',
200 nGramOpen: false,
201 dictFile: null,
202 dictFileOpen: false,
203 algoType: '',
204 algoTypeOpen: true,
205 period: '',
206 periodOpen: false,
207 keyword: '',
208 keywordOpen: false,
209 signLevel: '',
210 signLevelOpen: false,
211 language: '',
212 languageOpen: false,
213 matrixOpen: false,
214 stream1: '',
215 stream2: '',
216 streamOpen: false,
217 iterBtnOpen: false
218 })
219 break;
220 case 15:
221 this.setState({
222 inputCipherText: '',
223 inputCipherTextOpen: true,
224 inputPlainTextOpen: true,
225 inputFile2: null,
226 keyFirst: '',
227 keyFirstOpen: true,
228 keySecond: '',
229 keySecondOpen: false,
230 nGram: '',
231 nGramOpen: false,
232 dictFile: null,
233 dictFileOpen: false,
234 algoType: '',
235 algoTypeOpen: false,
236 period: '',
237 periodOpen: false,
238 keyword: '',
239 keywordOpen: false,
240 signLevel: '',
241 signLevelOpen: false,
242 language: '',
243 languageOpen: false,
244 matrixOpen: false,
245 stream1: '',
246 stream2: '',
247 streamOpen: false,
248 iterBtnOpen: false
249 })
250 break;
251 case 13: case 30:
252 this.setState({
253 inputCipherText: '',
254 inputCipherTextOpen: true,
255 inputPlainTextOpen: false,
256 inputFile2: null,
257 keyFirst: '',
258 keyFirstOpen: false,
259 keySecond: '',
260 keySecondOpen: false,
261 nGram: '',
262 nGramOpen: false,
263 dictFile: null,
264 dictFileOpen: false,
265 algoType: '',
266 algoTypeOpen: false,
267 period: '',
268 periodOpen: false,
269 keyword: '',
270 keywordOpen: false,
271 signLevel: '',
272 signLevelOpen: true,
273 language: '',
274 languageOpen: false,
275 matrixOpen: false,
276 stream1: '',
277 stream2: '',
278 streamOpen: false,
279 iterBtnOpen: false
280 })
281 break;
282 case 20:
283 this.setState({
284 inputCipherText: '',
285 inputCipherTextOpen: true,
286 inputPlainTextOpen: false,
287 inputFile2: null,
288 keyFirst: '',
289 keyFirstOpen: true,
290 keySecond: '',
291 keySecondOpen: false,
292 nGram: '',
293 nGramOpen: false,
294 dictFile: null,
295 dictFileOpen: false,
296 algoType: '',
297 algoTypeOpen: false,
298 period: '',
299 periodOpen: false,
300 keyword: '',
301 keywordOpen: false,
302 signLevel: '',
303 signLevelOpen: false,
304 language: '',
305 languageOpen: false,
306 matrixOpen: false,
307 stream1: '',
308 stream2: '',
309 streamOpen: false,
310 iterBtnOpen: false
311 })
312 break;
313 case 4: case 22: case 31: case 38:
314 this.setState({
315 inputCipherText: '',
316 inputCipherTextOpen: true,
317 inputPlainTextOpen: false,
318 inputFile2: null,
319 keyFirst: '',
320 keyFirstOpen: false,
321 keySecond: '',
322 keySecondOpen: true,
323 nGram: '',
324 nGramOpen: false,
325 dictFile: null,
326 dictFileOpen: false,
327 algoType: '',
328 algoTypeOpen: false,
329 period: '',
330 periodOpen: false,
331 keyword: '',
332 keywordOpen: false,
333 signLevel: '',
334 signLevelOpen: false,
335 language: '',
336 languageOpen: false,
337 matrixOpen: false,
338 stream1: '',
339 stream2: '',
340 streamOpen: false,
341 iterBtnOpen: false
342 })
343 break;
344 case 5:
345 this.setState({
346 inputCipherText: '',
347 inputCipherTextOpen: true,
348 inputPlainTextOpen: false,
349 inputFile2: null,
350 keyFirst: '',
351 keyFirstOpen: false,
352 keySecond: '',
353 keySecondOpen: false,
354 nGram: '',
355 nGramOpen: false,
356 dictFile: null,
357 dictFileOpen: false,
358 algoType: '',
359 algoTypeOpen: false,
360 period: '',
361 periodOpen: true,
362 keyword: '',
363 keywordOpen: false,
364 signLevel: '',
365 signLevelOpen: false,
366 language: '',
367 languageOpen: false,
368 matrixOpen: true,
369 stream1: '',
370 stream2: '',
371 streamOpen: false,
372 matrix: new Array(5).fill(new Array(5).fill('')),
373 iterBtnOpen: true,
374 })
375 break;
376 case 26:
377 this.setState({
378 inputCipherText: '',
379 inputCipherTextOpen: true,
380 inputPlainTextOpen: false,
381 inputFile2: null,
382 keyFirst: '',
383 keyFirstOpen: false,
384 keySecond: '',
385 keySecondOpen: false,
386 nGram: '',
387 nGramOpen: false,
388 dictFile: null,
389 dictFileOpen: false,
390 algoType: '',
391 algoTypeOpen: false,
392 period: '',
393 periodOpen: false,
394 keyword: '',
395 keywordOpen: false,
396 signLevel: '',
397 signLevelOpen: false,
398 language: '',
399 languageOpen: false,
400 matrixOpen: false,
401 stream1: '',
402 stream2: '',
403 streamOpen: false,
404 iterBtnOpen: true,
405 })
406 break;
407 case 27:
408 this.setState({
409 inputCipherText: '',
410 inputCipherTextOpen: true,
411 inputPlainTextOpen: false,
412 inputFile2: null,
413 keyFirst: '',
414 keyFirstOpen: false,
415 keySecond: '',
416 keySecondOpen: false,
417 nGram: '',
418 nGramOpen: true,
419 dictFile: null,
420 dictFileOpen: false,
421 algoType: '',
422 algoTypeOpen: false,
423 period: '',
424 periodOpen: false,
425 keyword: '',
426 keywordOpen: false,
427 signLevel: '',
428 signLevelOpen: false,
429 language: '',
430 languageOpen: false,
431 matrixOpen: false,
432 stream1: '',
433 stream2: '',
434 streamOpen: false,
435 iterBtnOpen: false
436 })
437 break;
438 case 29:
439 this.setState({
440 inputCipherText: '',
441 inputCipherTextOpen: true,
442 inputPlainTextOpen: false,
443 inputFile2: null,
444 keyFirst: '',
445 keyFirstOpen: false,
446 keySecond: '',
447 keySecondOpen: false,
448 nGram: '',
449 nGramOpen: false,
450 dictFile: null,
451 dictFileOpen: false,
452 algoType: '',
453 algoTypeOpen: false,
454 period: '',
455 periodOpen: false,
456 keyword: '',
457 keywordOpen: false,
458 signLevel: '',
459 signLevelOpen: false,
460 language: '',
461 languageOpen: false,
462 matrixOpen: true,
463 stream1: '',
464 stream2: '',
465 streamOpen: false,
466 matrix: new Array(5).fill(new Array(5).fill('')),
467 iterBtnOpen: true,
468 })
469 break;
470 case 9:
471 this.setState({ algoTypeOpts: algoTypeOpts.slice(10, 11) })
472 this.setState({
473 inputCipherText: '',
474 inputCipherTextOpen: true,
475 inputPlainTextOpen: false,
476 inputFile2: null,
477 keyFirst: '',
478 keyFirstOpen: false,
479 keySecond: '',
480 keySecondOpen: false,
481 nGram: '',
482 nGramOpen: false,
483 dictFile: null,
484 dictFileOpen: true,
485 algoType: '',
486 algoTypeOpen: true,
487 period: '',
488 periodOpen: false,
489 keyword: '',
490 keywordOpen: false,
491 signLevel: '',
492 signLevelOpen: false,
493 language: '',
494 languageOpen: false,
495 matrixOpen: false,
496 stream1: '',
497 stream2: '',
498 streamOpen: false,
499 iterBtnOpen: false
500 })
501 break;
502 case 2: case 10: case 11: case 16: case 17: case 18: case 21: case 25: case 28: case 33: case 35:
503 this.setState({
504 inputCipherText: '',
505 inputCipherTextOpen: true,
506 inputPlainTextOpen: false,
507 inputFile2: null,
508 keyFirst: '',
509 keyFirstOpen: false,
510 keySecond: '',
511 keySecondOpen: false,
512 nGram: '',
513 nGramOpen: false,
514 dictFile: null,
515 dictFileOpen: false,
516 algoType: '',
517 algoTypeOpen: false,
518 period: '',
519 periodOpen: false,
520 keyword: '',
521 keywordOpen: false,
522 signLevel: '',
523 signLevelOpen: false,
524 language: '',
525 languageOpen: false,
526 matrixOpen: false,
527 stream1: '',
528 stream2: '',
529 streamOpen: false,
530 iterBtnOpen: false
531 })
532 break;
533 case 32:
534 this.setState({
535 inputCipherText: '',
536 inputCipherTextOpen: true,
537 inputPlainTextOpen: false,
538 inputFile2: null,
539 keyFirst: '',
540 keyFirstOpen: false,
541 keySecond: '',
542 keySecondOpen: false,
543 nGram: '',
544 nGramOpen: false,
545 dictFile: null,
546 dictFileOpen: false,
547 algoType: '',
548 algoTypeOpen: false,
549 period: '',
550 periodOpen: false,
551 keyword: '',
552 keywordOpen: false,
553 signLevel: '',
554 signLevelOpen: false,
555 language: '',
556 languageOpen: true,
557 matrixOpen: false,
558 stream1: '',
559 stream2: '',
560 streamOpen: false,
561 iterBtnOpen: false
562 })
563 break;
564 case 34:
565 this.setState({
566 inputCipherText: '',
567 inputCipherTextOpen: false,
568 inputPlainTextOpen: false,
569 inputFile2: null,
570 keyFirst: '',
571 keyFirstOpen: false,
572 keySecond: '',
573 keySecondOpen: false,
574 nGram: '',
575 nGramOpen: false,
576 dictFile: null,
577 dictFileOpen: false,
578 algoType: '',
579 algoTypeOpen: false,
580 period: '',
581 periodOpen: false,
582 keyword: '',
583 keywordOpen: false,
584 signLevel: '',
585 signLevelOpen: false,
586 language: '',
587 languageOpen: false,
588 matrixOpen: false,
589 stream1: '',
590 stream2: '',
591 streamOpen: true,
592 iterBtnOpen: false
593 })
594 break;
595 case 36: this.setState({ algoTypeOpts: algoTypeOpts.slice(4, 10) })
596 this.setState({
597 inputCipherText: '',
598 inputCipherTextOpen: true,
599 inputPlainTextOpen: false,
600 inputFile2: null,
601 keyFirst: '',
602 keyFirstOpen: true,
603 keySecond: '',
604 keySecondOpen: false,
605 nGram: '',
606 nGramOpen: false,
607 dictFile: null,
608 dictFileOpen: false,
609 algoType: '',
610 algoTypeOpen: true,
611 period: '',
612 periodOpen: false,
613 keyword: '',
614 keywordOpen: false,
615 signLevel: '',
616 signLevelOpen: false,
617 language: '',
618 languageOpen: false,
619 matrixOpen: false,
620 stream1: '',
621 stream2: '',
622 streamOpen: false,
623 iterBtnOpen: false
624 })
625 break;
626 default:
627 break;
628 }
629 }
630 // MATRIX SELECTOR
631 handleMatrixSelection = (val) => {
632 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
633 if (!this.state.matrixOpen) return
634 this.setState({ matrix: new Array(val).fill(new Array(val).fill('')) })
635 }
636 // MATRIX INPUT CHANGE HANDLER
637 handleMatrixInputChange = e => {
638 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
639 let arr = e.target.value.split('')
640 let value = arr[0] ? arr[arr.length - 1].toUpperCase() : ''
641 let temp = e.target.name.split(':')
642 let i = parseInt(temp[0])
643 let j = parseInt(temp[1])
644 let { matrix } = this.state
645 if (value !== '' && matrix.filter(i => i.indexOf(value) > -1).length) value = ''
646 else this.setState({ matrix: [...matrix.slice(0, i), [...matrix[i].slice(0, j), value, ...matrix[i].slice(j + 1)], ...matrix.slice(i + 1)] })
647 let len = matrix.length
648 if (value !== '') {
649 if (i < len - 1 && j === len - 1) this[(i + 1) + ':' + 0].current.focus()
650 else if (i <= len - 1 && j < len - 1) this[i + ':' + (j + 1)].current.focus()
651 }
652 }
653 // EXECUTION HANDLER
654 handleExecution = () => {
655 let arr2 =this.state.keyFirst.split('-')
656 let keyonearray =this.state.keySecond.split('-')
657 let keysecondarray = this.state.keyFirst.split('-')
658 keysecondarray = keysecondarray.map(item=>item)
659 keyonearray = keyonearray.map(item=>item)
660 //console.log(keyonearray)
661 console.log( keyonearray.length,keyonearray.filter(item=> isNaN(item)).length )
662 let arr1 = this.state.language.split(',').map(Number)
663 if (this.props.crypt.output || this.props.crypt.isExecuting || this.props.crypt.errMess) return
664 if (!this.state.selectedTest) {
665 alert('Please select an algorithm!')
666 return;
667 }
668 if (this.state.inputCipherTextOpen && !this.state.inputFile1 && this.state.inputCipherText === '') {
669 alert('Please provide input file or cipher text!')
670 return;
671 }
672 if (this.state.inputPlainTextOpen && !this.state.inputFile2 && this.state.inputPlainText === '') {
673 alert('Please provide input file or plain text!')
674 return;
675 }
676 if (this.state.keyFirstOpen && this.state.keyFirst === '') {
677 alert('Please provide key length!')
678 return
679 }
680 if((this.state.languageOpen && arr1.filter(item=> isNaN(item)).length!=0 ) ){
681 alert('Invalid Find Desk value !: Example 1,2,3')
682 return;
683 }
684 if (this.state.keySecondOpen && this.state.keySecond === '') {
685 alert('Please provide key range!')
686 return
687 }
688 if (this.state.keySecondOpen && (keyonearray.filter(item=> isNaN(item)).length!=0 ) || ( keyonearray.length > 2 )) {
689 alert('Invalid Second key range! Example: 3-5, 1-2')
690 return;
691 }
692 if (this.state.keyFirstOpen && (keysecondarray.filter(item=>isNaN(item)).length!=0 ) ||(keysecondarray.length > 2 ) ) {
693 alert('Invalid First key range! Example: 3-5, 1-2')
694 return;
695 }
696
697 if(this.state.languageOpen && this.state.language.split(',').length < 54 ){
698 alert('Lenght is less then 54')
699 return;
700 }
701 if (this.state.keySecondOpen && parseInt(this.state.keySecond.split('-')[0]) > parseInt(this.state.keySecond.split('-')[1])) {
702 alert('Invalid key range! Starting key range should be lesser than ending key range! Example: 2-5')
703 return;
704 }
705 if (this.state.nGramOpen && this.state.nGram === '') {
706 alert('Please provide ngram!')
707 return
708 }
709 if (this.state.dictFileOpen && !this.state.dictFile) {
710 alert('Please provide a dictionary file!!')
711 return
712 }
713 if (this.state.algoTypeOpen && this.state.algoType === '') {
714 alert('Please provide algorithm type!!')
715 return
716 }
717 if (this.state.periodOpen && this.state.period === '') {
718 alert('Please provide period!')
719 return
720 }
721 if (this.state.keywordOpen && this.state.keyword === '') {
722 alert('Please provide keyword!')
723 return
724 }
725 if (this.state.streamOpen && (this.state.stream1 === '' || this.state.stream2 === '')) {
726 alert('Please provide stream address correctly!!')
727 return
728 }
729 if (this.state.signLevelOpen && this.state.signLevel === '') {
730 alert('Please provide significant level!')
731 return
732 }
733 if (this.state.languageOpen && this.state.language === '') {
734 alert('Please provide a language!')
735 return
736 }
737 if (this.state.matrixOpen && this.state.matrix.filter(i => i.indexOf('') > -1).length) {
738 alert('Please provide matrix value correctly!')
739 return
740 }
741 let fd = new FormData()
742 fd.append('crypto_algo', this.state.selectedTest)
743 fd.append('crypto_in_file', this.state.inputFile1)
744 this.state.inputCipherTextOpen && fd.append('crypto_text', this.state.inputCipherText)
745 this.state.inputPlainTextOpen && fd.append('crypto_plaintext', this.state.inputPlainText)
746 this.state.inputPlainTextOpen && fd.append('crypto_pt_file', this.state.inputFile2)
747 this.state.keyFirstOpen && fd.append('crypto_key_length', this.state.keyFirst)
748 this.state.keySecondOpen && fd.append('crypto_key_range', this.state.keySecond)
749 this.state.nGramOpen && fd.append('crypto_ngram_n', this.state.nGram)
750 this.state.dictFileOpen && fd.append('crypto_dictionary', this.state.dictFile)
751 this.state.algoTypeOpen && fd.append('crypto_algo_type', this.state.algoTypeOpts.indexOf(this.state.algoType) + 1)
752 this.state.periodOpen && fd.append('crypto_period', this.state.period)
753 this.state.keywordOpen && fd.append('crypto_keyword', this.state.keyword)
754 this.state.signLevelOpen && fd.append('crypto_sig_level', this.state.signLevel)
755 this.state.languageOpen && fd.append('crypto_language', this.state.language)
756 this.state.matrixOpen && fd.append('crypto_pol_alpha', this.state.matrix.map(i => i.join('')).join(''))
757 this.state.streamOpen && fd.append('crypto_stream1', this.state.stream1)
758 this.state.streamOpen && fd.append('crypto_stream2', this.state.stream2)
759 // for (let key of fd.entries()) console.log(key[0], key[1])
760 this.props.startExecution(fd)
761 }
762 // ITERATOR
763 handleNextItr = () => {
764 if (this.props.crypt.output && this.props.crypt.formData) {
765 // console.log('FormDaaaattttaaaa::',this.props.crypt.formData.FormData)
766 this.props.iterateNext(this.props.crypt.formData)
767 }
768 }
769 // FILE SAVE
770 handleFileSave = () => {
771 let { output } = this.props.crypt
772 if (output) {
773 let result = ''
774 result = result.concat(`Algorithm Name : ${this.state.selectedTest}\n`)
775 if (this.state.inputCipherTextOpen && !this.state.inputFile1) result = result.concat(`Input Cipher Text : ${this.state.inputCipherText}\n`)
776 if (this.state.inputCipherTextOpen && this.state.inputFile1) result = result.concat(`Input Cipher File : ${this.state.inputFile1.name}\n`)
777 if (this.state.inputPlainTextOpen && !this.state.inputFile1) result = result.concat(`Input Plain Text : ${this.state.inputPlainText}\n`)
778 if (this.state.inputPlainTextOpen && this.state.inputFile1) result = result.concat(`Input Plain File : ${this.state.inputFile2.name}\n`)
779 if (this.state.keyFirstOpen) result = result.concat(`Key Length : ${this.state.keyFirst}\n`)
780 if (this.state.keySecondOpen) result = result.concat(`Key Range : ${this.state.keySecond}\n`)
781 if (this.state.nGramOpen) result = result.concat(`N Gram : ${this.state.nGram}\n`)
782 if (this.state.dictFileOpen) result = result.concat(`Dictionary File : ${this.state.dictFile.name}\n`)
783 if (this.state.algoTypeOpen) result = result.concat(`Algorithm Type : ${this.state.algoType}\n`)
784 if (this.state.periodOpen) result = result.concat(`Period : ${this.state.period}\n`)
785 if (this.state.keywordOpen) result = result.concat(`Keyword : ${this.state.keyword}\n`)
786 if (this.state.signLevelOpen) result = result.concat(`Significant Level : ${this.state.signLevel}\n`)
787 if (this.state.languageOpen) result = result.concat(`Language : ${this.state.language}\n`)
788 if (this.state.matrixOpen) result = result.concat(`Matrix : ${this.state.matrix.map(i => i.join('')).join('')}\n`)
789 if (this.state.streamOpen) result = result.concat(`Stream 1 : ${this.state.stream1}\n`)
790 if (this.state.streamOpen) result = result.concat(`Stream 2: ${this.state.stream2}\n`)
791 switch (testNames.indexOf(this.state.selectedTest)) {
792 case 0: case 1: case 3: case 4: case 5: case 7: case 8: case 9: case 12: case 13: case 14: case 15: case 22: case 23: case 26:case 28: case 29: case 30: case 31: case 32: case 34: case 36: case 37: case 38:
793 output.forEach(item => {
794 for (let key in item) result = result.concat(key + ': ' + item[key] + '\n')
795 result = result.concat('\n\n')
796 })
797 break;
798 case 6:
799 result = output
800 break
801 case 19:
802 output['Plain Text'].forEach((item, i) => {
803 result = result.concat(`Plain Text ${i + 1}: ${item}\n`)
804 })
805 break;
806 case 24:
807 output.forEach(item => {
808 result = result.concat(item.name + ' : ' + item.frequency)
809 })
810 break;
811 case 27:
812 output.forEach(item => {
813 result = result.concat(item[0] + ' : ' + item[1] + '\n')
814 })
815 break;
816 default:
817 break;
818 }
819 saveFile(result, 'crypt-analysis.txt')
820 }
821 else alert('Nothing to save!')
822 }
823 // SAVE LOG
824 handleSaveLog = () => {
825 saveLog({
826 user: this.props.user,
827 breadCrumb: '/dashboard/lexicon/crypt-analysis',
828 moduleName: 'crypt-analysis'
829 })
830 }
831 // RESET ACTIVITY
832 handleReset = () => {
833 if (this.props.crypt.errMess || this.props.crypt.output) {
834 this.setState({
835 selectedTest: null,
836 inputCipherText: '',
837 inputCipherTextOpen: true,
838 inputFile1: null,
839 inputPlainText: '',
840 inputPlainTextOpen: false,
841 inputFile2: null,
842 keyFirst: '',
843 keyFirstOpen: false,
844 keySecond: '',
845 keySecondOpen: false,
846 nGram: '',
847 nGramOpen: false,
848 dictFile: null,
849 dictFileOpen: false,
850 algoTypeOpts: [],
851 algoType: '',
852 algoTypeOpen: false,
853 period: '',
854 periodOpen: false,
855 keyword: '',
856 keywordOpen: false,
857 stream1: '',
858 stream2: '',
859 streamOpen: false,
860 signLevel: '',
861 signLevelOpen: false,
862 language: '',
863 languageOpen: false,
864 matrix: new Array(7).fill(new Array(7).fill('')),
865 matrixOpen: false,
866 addonLanguages: [],
867 addonLanguageModal: false
868 })
869 this.props.resetExecution()
870 }
871 }
872 handleAddAlgo = () => {
873 let data = {
874 algoName: this.title.value,
875 api: this.ipAddress.value,
876 keyOpen: this.keyOpen.checked ? 1 : 0,
877 oldAlgo: this.state.selectedAlgo
878 }
879 fetch(baseUrl + 'algorithm/crypt', {
880 method: this.state.selectedAlgo ? 'PUT' : 'POST',
881 headers: {
882 'Authorization': localStorage.getItem('token'),
883 'Content-Type': 'application/json'
884 },
885 body: JSON.stringify(data)
886 })
887 .then(res => {
888 if (res.ok) return res.json()
889 else throw new Error(res.statusText)
890 })
891 .then(res => {
892 alert(res.status)
893 if (res.success) {
894 // Update
895 if (this.state.selectedAlgo) {
896 let { addonAlgos, selectedAlgo } = this.state
897 this.setState({
898 addonAlgos: addonAlgos.filter(item => item.algoName !== selectedAlgo).concat(data),
899 selectedAlgo: null,
900 keyOpen: false,
901 selectedTest: null
902 })
903 this.toggleAlgoModal()
904 }
905 // Add New
906 else {
907 this.setState({ addonAlgos: this.state.addonAlgos.concat(data) })
908 this.toggleApiModal()
909 this.toggleAlgoModal()
910 }
911 }
912 })
913 .catch(err => {
914 alert(err.message)
915 this.setState({ selectedAlgo: null })
916 })
917 }
918 handleDeleteAlgo = (algoName) => {
919 fetch(baseUrl + 'algorithm/crypt', {
920 method: 'DELETE',
921 headers: {
922 'Authorization': localStorage.getItem('token'),
923 'Content-Type': 'application/json'
924 },
925 body: JSON.stringify({ algoName: algoName })
926 })
927 .then(res => {
928 if (res.ok) return res.json()
929 else throw new Error(res.statusText)
930 })
931 .then(res => {
932 alert(res.status)
933 if (res.success) {
934 let { addonAlgos } = this.state
935 this.setState({
936 addonAlgos: addonAlgos.filter(item => item.algoName !== algoName),
937 keyOpen: false,
938 selectedTest: null
939 })
940 }
941 })
942 .catch(err => {
943 alert(err.message)
944 this.setState({ selectedAlgo: null })
945 })
946 }
947 // SHARE RESULT
948 shareResult = () => {
949 let { output } = this.props.crypt
950 if (!output) return;
951 if(output)
952 {
953 let result = ''
954 result = result.concat(`Algorithm Name : ${this.state.selectedTest}\n`)
955 if (this.state.inputCipherTextOpen && !this.state.inputFile1) result = result.concat(`Input Cipher Text : ${this.state.inputCipherText}\n`)
956 if (this.state.inputCipherTextOpen && this.state.inputFile1) result = result.concat(`Input Cipher File : ${this.state.inputFile1.name}\n`)
957 if (this.state.inputPlainTextOpen && !this.state.inputFile1) result = result.concat(`Input Plain Text : ${this.state.inputPlainText}\n`)
958 if (this.state.inputPlainTextOpen && this.state.inputFile1) result = result.concat(`Input Plain File : ${this.state.inputFile2.name}\n`)
959 if (this.state.keyFirstOpen) result = result.concat(`Key Length : ${this.state.keyFirst}\n`)
960 if (this.state.keySecondOpen) result = result.concat(`Key Range : ${this.state.keySecond}\n`)
961 if (this.state.nGramOpen) result = result.concat(`N Gram : ${this.state.nGram}\n`)
962 if (this.state.dictFileOpen) result = result.concat(`Dictionary File : ${this.state.dictFile.name}\n`)
963 if (this.state.algoTypeOpen) result = result.concat(`Algorithm Type : ${this.state.algoType}\n`)
964 if (this.state.periodOpen) result = result.concat(`Period : ${this.state.period}\n`)
965 if (this.state.keywordOpen) result = result.concat(`Keyword : ${this.state.keyword}\n`)
966 if (this.state.signLevelOpen) result = result.concat(`Significant Level : ${this.state.signLevel}\n`)
967 if (this.state.languageOpen) result = result.concat(`Language : ${this.state.language}\n`)
968 if (this.state.matrixOpen) result = result.concat(`Matrix : ${this.state.matrix.map(i => i.join('')).join('')}\n`)
969 if (this.state.streamOpen) result = result.concat(`Stream 1 : ${this.state.stream1}\n`)
970 if (this.state.streamOpen) result = result.concat(`Stream 2: ${this.state.stream2}\n`)
971 switch (testNames.indexOf(this.state.selectedTest)) {
972 case 0: case 1: case 3: case 4: case 5: case 7: case 8: case 9: case 12: case 13: case 14: case 15: case 22: case 23: case 26: case 28: case 29: case 30: case 31: case 32: case 34: case 36: case 37: case 38:
973 output.forEach(item => {
974 for (let key in item) result = result.concat(key + ': ' + item[key] + '\n')
975 result = result.concat('\n\n')
976 })
977 break;
978 case 6:
979 result = output
980 break
981 case 19:
982 output['Plain Text'].forEach((item, i) => {
983 result = result.concat(`Plain Text ${i + 1}: ${item}\n`)
984 })
985 break;
986 case 24:
987 output.forEach(item => {
988 result = result.concat(item.name + ' : ' + item.frequency)
989 })
990 break;
991 case 27:
992 output.forEach(item => {
993 result = result.concat(item[0] + ' : ' + item[1] + '\n')
994 })
995 break;
996 default:
997 break;
998 }
999 return result
1000 }
1001
1002 }
1003 render() {
1004 // ALGORITHMS RENDERING
1005 const RenderTestTypes = () => {
1006 let renderTestNames = testNames.map((test, i) => (
1007 <div className={i === 0 ? 'bordered-algo' : 'algo'} key={i}>
1008 <Input type='checkbox' id={test} name='tests' checked={this.state.selectedTest === test} onChange={this.handleTestSelection} />
1009 <Label htmlFor={test}>{test.toUpperCase()}</Label>
1010 </div>
1011 ))
1012 return <div className='col-12 algorithms' ref={this.algorithms} style={{ overflowX: 'hidden', overflowY: 'auto', height: 'calc(var(--vh, 1vh) *69.5)', marginTop: 'calc(var(--vw, 1vw) * .5)' }}>{renderTestNames}</div>
1013 }
1014 // OUTPUT RENDERING
1015 const RenderOutput = () => {
1016 let { output, errMess, isExecuting } = this.props.crypt
1017 let result = ''
1018 console.log("OUTPUT :: ",output)
1019 if (isExecuting) result = 'EXECUTING...'
1020 else if (errMess) {
1021 result = 'EXECUTION FAILED!'
1022 }
1023 else if (output) {
1024 result = result.concat('EXECUTION COMPLETED!\n\n')
1025 switch (testNames.indexOf(this.state.selectedTest)) {
1026 case 0: case 1: case 3: case 4: case 5: case 7: case 8:case 9: case 12: case 13: case 14: case 15: case 20: case 22: case 23: case 26: case 28: case 29: case 30: case 31: case 32: case 34: case 36: case 37: case 38:
1027 output.forEach(item => {
1028 for (let key in item) result = result.concat(key + ': ' + item[key] + '\n')
1029 result = result.concat('\n\n')
1030 })
1031 break;
1032 case 6:
1033 result = output
1034 break
1035 case 19:
1036 output['Plain Text'].forEach((item, i) => {
1037 result = result.concat(`Plain Text ${i + 1}: ${item}\n`)
1038 })
1039 break
1040 case 27:
1041 output.forEach(item => {
1042 result = result.concat(item[0] + ' : ' + item[1] + '\n')
1043 })
1044 break;
1045 default:
1046 break;
1047 }
1048 }
1049 else result = 'IDLE'
1050 if (this.state.selectedTest)
1051 return (
1052 <div className='row'>
1053 <div className='col-12'>
1054 {testNames.indexOf(this.state.selectedTest) !== 24 && <Input type='textarea' className='output pl-0' style={{ height: 'calc(var(--vh, 1vh)*40)', display: errMess || output ? 'block' : 'none' }} value={result} disabled />}
1055 {testNames.indexOf(this.state.selectedTest) === 24 && <Input type='textarea' className='output pl-0' style={{ height: 'calc(var(--vh, 1vh)*40)', display: errMess ? 'block' : 'none' }} value={result} disabled />}
1056 {output && testNames.indexOf(this.state.selectedTest) === 5 && <Button className='blue-button' onClick={this.handleNextItr} style={{ marginTop: 'calc(var(--vw, 1vw) * 1)' }}>NEXT ITERATION</Button>}
1057 {output && testNames.indexOf(this.state.selectedTest) === 29 && <Button className='blue-button' onClick={this.handleNextItr} style={{ marginTop: 'calc(var(--vw, 1vw) * 1)' }}>NEXT ITERATION</Button>}
1058 {output && testNames.indexOf(this.state.selectedTest) === 26 && <Button className='blue-button' onClick={this.handleNextItr} style={{ marginTop: 'calc(var(--vw, 1vw) * 1)' }}>NEXT ITERATION</Button>}
1059 {output && testNames.indexOf(this.state.selectedTest) === 36 && <Button className='blue-button' onClick={this.handleNextItr} style={{ marginTop: 'calc(var(--vw, 1vw) * 1)' }}>NEXT ITERATION</Button>}
1060 </div>
1061 </div>
1062 )
1063 else return null
1064 }
1065 // CHART RENDERING
1066 const RenderChart = () => {
1067 let { output } = this.props.crypt
1068 if (output) {
1069 switch (testNames.indexOf(this.state.selectedTest)) {
1070 case 24:
1071 return (
1072 <div className='row'>
1073 <div className='col-12' style={{ width: 'calc(var(--vw, 1vw)*60)', height: 'calc(var(--vw, 1vw)*25)', color: 'black', overflow: 'hidden' }}>
1074 <BarChart xLegend='Alphabets' yLegend='Frequency' data={output} />
1075 </div>
1076 </div>
1077 )
1078 default:
1079 return null;
1080 }
1081 }
1082 else if (!this.state.selectedTest) {
1083 let chartData = frequencyAnalyser(this.state.inputCipherText)
1084 return (
1085 <div className='row'>
1086 <div className='col-12 green-text'>INPUT ANALYSIS OF CRYPT</div>
1087 <div className='col-12' style={{ width: 'calc(var(--vw, 1vw)*60)', marginTop: 'calc(var(--vw, 1vw)* -1.5)', height: 'calc(var(--vw, 1vw)*24)', color: 'black', overflow: 'hidden' }}>
1088 {(this.state.inputCipherText !== '' && this.state.selectedGraph === 'pie') && (
1089 <PieChart data={chartData.map(item => ({ id: item.name, label: item.name, value: item.frequency }))} />
1090 )}
1091 {(this.state.inputCipherText !== '' && this.state.selectedGraph === 'line' && chartData.length > 1) && (
1092 <LineChart type='point' xLegend='Alphabets' yLegend='Frequency' dataset={chartData.map(item => ({ x: item.name, y: item.frequency }))} />
1093 )}
1094 {(this.state.inputCipherText !== '' && this.state.selectedGraph === 'bar') && (
1095 <BarChart xLegend='Alphabets' yLegend='Frequency' data={chartData} />
1096 )}
1097 </div>
1098 <div className='col-12'>
1099 <div className='row'>
1100 <div className='col-auto ml-auto p-0'>
1101 {this.state.inputCipherText !== '' && (
1102 <span title='Pie Chart' className={this.state.selectedGraph === 'pie' ? 'fa fa-pie-chart selected-chart-icon' : 'fa fa-pie-chart chart-icon'} style={{ marginRight: 'calc(var(--vw, 1vw)*1)' }} onClick={() => this.setState({ selectedGraph: 'pie' })} ></span>
1103 )}
1104 </div>
1105 <div className='col-auto p-0'>
1106 {this.state.inputCipherText !== '' && (
1107 <span title='Bar Chart' className={this.state.selectedGraph === 'bar' ? 'fa fa-bar-chart selected-chart-icon' : 'fa fa-bar-chart chart-icon'} style={{ marginRight: 'calc(var(--vw, 1vw)*1)' }} onClick={() => this.setState({ selectedGraph: 'bar' })} ></span>
1108 )}
1109 </div>
1110 <div className='col-auto pl-0'>
1111 {this.state.inputCipherText !== '' && chartData.length > 1 && (
1112 <span title='Line Chart' className={this.state.selectedGraph === 'line' ? 'fa fa-line-chart selected-chart-icon' : 'fa fa-line-chart chart-icon'} onClick={() => this.setState({ selectedGraph: 'line' })} ></span>
1113 )}
1114 </div>
1115 </div>
1116 </div>
1117 </div>
1118 )
1119 }
1120 else return null
1121 }
1122 let { selectedAlgo, addonAlgos } = this.state
1123 return (
1124 <React.Fragment>
1125 {this.props.crypt.isExecuting && <Loading name='Executing' />}
1126 <div className='row crypt-analysis'>
1127 <div className='col-12 head'>
1128 <div>
1129 <div style={{ display: 'inline-block', marginRight: 'calc(var(--vw, 1vw)*1)' }}><h5>CRYPT ANALYSIS</h5></div>
1130 {this.props.crypt.isExecuting ? <span className='yellow-light'>RUNNING</span> : this.props.crypt.errMess ? <span className='red-light'>STOPPED</span> : <span className='orange-light'>STANDBY</span>}
1131 </div>
1132 <div className='red-line'></div>
1133 </div>
1134 <div className='col-auto' style={{ width: 'calc(var(--vw, 1vw) *16.5)' }} >
1135 <div className='row'>
1136 <div className='col-12 green-text' style={{ marginBottom: 'calc(var(--vw, 1vw) *0)' }}>ALGORITHM</div>
1137 <RenderTestTypes />
1138 </div>
1139 </div>
1140 <div className='col'>
1141 <div className='row'>
1142 <div className='col-12 green-text' style={{ marginBottom: 'calc(var(--vw, 1vw) *.5)' }}>DATA INPUT</div>
1143 <div className='col-6'>
1144 <div className='row'>
1145 <div className='col-12'>
1146 <Input type='textarea' name='inputCipherText' id='inputCipherText' value={this.state.inputCipherText} onChange={this.handleInputChange} placeholder='Input Cipher Text...' disabled={!this.state.inputCipherTextOpen} />
1147 </div>
1148 <div className='col-auto' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1149 <Input type='file' id='inputFile1' name='inputFile1' onChange={this.handleFileChange} className='d-none' onClick={e => e.target.value = null} />
1150 <Label htmlFor={!this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting ? 'inputFile1' : ''} className={this.state.inputFile1 ? 'file-label' : 'input-label'} title={this.state.inputFile1 ? this.state.inputFile1.name : 'Please select a file'}>
1151 {!this.state.inputFile1 && <span className='svg-file-upload'></span>} {this.state.inputFile1 ? 'FILE ATTACHED' : 'ATTACH FILE'} {this.state.inputFile1 && <span className='fa fa-times' onClick={(e) => { !this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting && this.setState({ inputFile1: null }); e.preventDefault(); }}></span>}
1152 </Label>
1153 </div>
1154 {this.state.inputFile1 && (
1155 <div className='col pl-0' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1156 <div className='file-name'>{this.state.inputFile1.name}</div>
1157 <div className='tick' ><span className='svg-check'></span></div>
1158 </div>
1159 )}
1160 </div>
1161 </div>
1162 <div className='col-6'>
1163 <div className='row'>
1164 <div className='col-12'>
1165 <Input type='textarea' name='inputPlainText' id='inputPlainText' style={{ background: 'transparent' }} value={this.state.inputPlainText} onChange={this.handleInputChange} placeholder='Input Plain Text Here...' disabled={!this.state.inputPlainTextOpen} />
1166 </div>
1167 <div className='col-auto' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1168 <Input type='file' id='inputFile2' name='inputFile2' onChange={this.handleFileChange} className='d-none' onClick={e => e.target.value = null} disabled={!this.state.inputPlainTextOpen} />
1169 <Label htmlFor={!this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting ? 'inputFile2' : ''} className={this.state.inputPlainTextOpen ? this.state.inputFile2 ? 'file-label' : 'input-label' : 'disable-input-label'} title={this.state.inputFile2 ? this.state.inputFile2.name : 'Please select a file'}>
1170 {!this.state.inputFile2 && <span className={this.state.inputPlainTextOpen ? 'svg-file-upload' : 'svg-file-upload-gray'}></span>} {this.state.inputFile2 ? 'FILE ATTACHED' : 'ATTACH FILE'} {this.state.inputFile2 && <span className='fa fa-times' onClick={(e) => { !this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting && this.setState({ inputFile2: null }); e.preventDefault(); }}></span>}
1171 </Label>
1172 </div>
1173 {this.state.inputFile2 && (
1174 <div className='col pl-0' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1175 <div className='file-name'>{this.state.inputFile1.name}</div>
1176 <div className='tick' ><span className='svg-check'></span></div>
1177 </div>
1178 )}
1179 </div>
1180 </div>
1181 <div className='col-12'>
1182 <div className='horizontal-line'></div>
1183 </div>
1184 <div className='col-2'>
1185 <Input type='text' name='keyFirst' id='keyFirst' value={this.state.keyFirst} onChange={this.handleNumberChange} placeholder='First Key Range' disabled={!this.state.keyFirstOpen} />
1186 </div>
1187 <div className='col-2'>
1188 <Input type='text' name='keySecond' id='keySecond' value={this.state.keySecond} onChange={this.handleInputChange} placeholder='Second Key Range' disabled={!this.state.keySecondOpen} />
1189 </div>
1190 <div className='col-2'>
1191 <Input type='number' name='nGram' id='nGram' value={this.state.nGram} onChange={this.handleNumberChange} placeholder='Ngram' disabled={!this.state.nGramOpen} />
1192 </div>
1193 <div className='col-auto'>
1194 <div className='row'>
1195 <div className='col-auto'>
1196 <Input type='file' id='dictFile' name='dictFile' onChange={this.handleFileChange} className='d-none' onClick={e => e.target.value = null} disabled={!this.state.dictFileOpen} />
1197 <Label htmlFor={!this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting ? 'dictFile' : ''} className={this.state.dictFileOpen ? this.state.dictFile ? 'file-label' : 'input-label' : 'disable-input-label'} title={this.state.dictFile ? this.state.dictFile.name : 'Please select a file'}>
1198 {!this.state.dictFile && <span className={this.state.dictFileOpen ? 'svg-file-upload' : 'svg-file-upload-gray'}></span>} {this.state.dictFile ? 'DICTIONARY FILE UPLOADED' : 'UPLOAD DICTIONARY FILE'} {this.state.dictFile && <span className='fa fa-times' onClick={(e) => { !this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting && this.setState({ dictFile: null }); e.preventDefault(); }}></span>}
1199 </Label>
1200 </div>
1201 {this.state.dictFile && (
1202 <div className='col pl-0' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1203 <div className='file-name'>{this.state.dictFile.name}</div>
1204 <div className='tick' ><span className='svg-check'></span></div>
1205 </div>
1206 )}
1207 </div>
1208 </div>
1209 <div className='col-12'>
1210 <div className='horizontal-line'></div>
1211 </div>
1212 <div className='col-6'>
1213 <div className='row'>
1214 <div className='col-4'>
1215 <Input type='select' name='algoType' id='algoType' style={ this.state.algoTypeOpen ? {color :"#cecece", borderBlockColor: "#cecece"}:{color :""} } value={this.state.algoType} onChange={this.handleInputChange} onClick ={this.handleAlgoType} disabled={!this.state.algoTypeOpen} >
1216 <option val=''>Algorithm Type</option>
1217 {this.state.algoTypeOpts.map((item, i) => <option key={i}>{item}</option>)}
1218 </Input>
1219 </div>
1220 <div className='col-4'>
1221 <Input type='number' name='period' id='period' value={this.state.period} onChange={this.handleNumberChange} placeholder='Period' disabled={!this.state.periodOpen} />
1222 </div>
1223 <div className='col-4'>
1224 <Input type='text' name='keyword' id='keyword' value={this.state.keyword} onChange={this.handleInputChange} placeholder='Enter Keyword' disabled={!this.state.keywordOpen} />
1225 </div>
1226 <div className='col-12'>
1227 <div className='horizontal-line'></div>
1228 </div>
1229 </div>
1230 <div className='row'>
1231 <div className='col-7'>
1232 <div className='row'>
1233 <div className='col-12'>
1234 <Input type='text' name='stream1' id='stream1' value={this.state.stream1} onChange={this.handleInputChange} placeholder='Stream Address 1' disabled={!this.state.streamOpen} />
1235 </div>
1236 <div className='col-12' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }}>
1237 <Input type='text' name='stream2' id='stream2' value={this.state.stream2} onChange={this.handleInputChange} placeholder='Stream Address 2' disabled={!this.state.streamOpen} />
1238 </div>
1239 <div className='col-12' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }}>
1240 <ButtonGroup>
1241 {matrixSizes.map((size, i) => <Button key={i} className='light-red-button' style={{ background: this.state.matrixOpen && this.state.matrix.length === size ? '#ff3000' : 'transparent' }} onClick={() => this.handleMatrixSelection(size)} >{size}x{size}</Button>)}
1242 </ButtonGroup>
1243 </div>
1244 <div className='col-12 matrix'>
1245 {this.state.matrix.map((row, i) => (
1246 <div key={i} className='row'>
1247 {row.map((column, j) => (
1248 <div key={j} className={j === 0 ? 'col-auto pr-0' : 'col-auto p-0'}>
1249 <Input type='text' className='matrix-input' name={i + ':' + j} value={column} innerRef={this[i + ':' + j]} onChange={this.handleMatrixInputChange} disabled={!this.state.matrixOpen} />
1250 </div>
1251 ))}
1252 </div>
1253 ))}
1254 </div>
1255 </div>
1256 </div>
1257 <div className='col-5'>
1258 <div className='row'>
1259 <div className='col-12'>
1260 <Input type='select' name='signLevel' id='signLevel' value={this.state.signLevel} onChange={this.handleInputChange} disabled={!this.state.signLevelOpen} >
1261 <option val=''>Significant Level</option>
1262 <option>0.01</option>
1263 <option>0.05</option>
1264 <option>0.10</option>
1265 </Input>
1266 </div>
1267 <div className='col-12' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }}>
1268 <Input type='text' name='language' value={this.state.language} onChange={this.handleInputChange} placeholder ='Final deck (e.g 1,2,3..)' disabled = {!((testNames.indexOf(this.state.selectedTest))===32)} />
1269 {/* <option val=''>Select Language</option>
1270 {languages.concat(this.state.addonLanguages).map((language, i) => <option key={i}>{language}</option>)}
1271 </Input> */}
1272 </div>
1273 <div className='col-12'>
1274 <Button className='blue-button btn-block' style={{ marginTop: 'calc(var(--vw, 1vw)*4)' }} onClick={this.toggleAddonLanguageModal}>ADD-ON LANGUAGE</Button>
1275 <Button className='green-button btn-block' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }} onClick={this.handleExecution}>EXECUTE <span style={{ color: 'white' }}>➜</span></Button>
1276 <Button className='blue-button btn-block' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }} onClick={this.handleFileSave}>SAVE FILE</Button>
1277 <Button className='blue-button btn-block' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }} onClick={this.handleSaveLog}>SAVE LOG</Button>
1278 </div>
1279 <div className='col-6' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }} >
1280 {!this.props.crypt.output && <Button className='green-button btn-block' onClick={this.handleReset}>SHARE</Button>}
1281 {this.props.crypt.output && <ShareModal data={{ result: this.shareResult(), moduleName: 'lexicon' }} />}
1282 </div>
1283 <div className='col-6'>
1284 <Button className='light-red-button btn-block' style={{ marginTop: 'calc(var(--vw, 1vw)*1)' }} onClick={this.handleReset}>RESET</Button>
1285 </div>
1286 </div>
1287 </div>
1288 </div>
1289 </div>
1290 <div className='col-6'>
1291 <div >STATUS</div>
1292 <RenderChart />
1293 <RenderOutput />
1294 </div>
1295 </div>
1296 </div>
1297 </div>
1298 {/* Addon Language Modal */}
1299 <Modal className='disable-select' scrollable centered isOpen={this.state.addonLanguageModal} toggle={this.toggleAddonLanguageModal} >
1300 <ModalBody style={{ color: 'white', background: 'black', border: 'calc(var(--vw, 1vw)*.05) solid #999999', height: 'calc(var(--vh, 1vh)*56)', overflow: 'hidden' }}>
1301 <div className='row'>
1302 <div className='col-6 m-auto text-center' style={styles.selectedTab}>ADD NEW LANGUAGE</div>
1303 </div>
1304 <div className='row' style={{ marginTop: 'calc(var(--vh, 1vh)*2)' }}>
1305 <div className='col-12'>
1306 <Input type='text' innerRef={i => this.algoName = i} placeholder='Enter Language Name Here...' />
1307 </div>
1308 </div>
1309 <div className='row'>
1310 <div className='col-auto' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1311 <Input type='file' id='inputFile' name='inputFile' onChange={this.handleFileChange} className='d-none' onClick={e => e.target.value = null} />
1312 <Label htmlFor={!this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting ? 'inputFile1' : ''} className={this.state.inputFile1 ? 'file-label' : 'input-label'} title={this.state.inputFile1 ? this.state.inputFile1.name : 'Please select a file'}>
1313 {!this.state.inputFile1 && <span className='svg-file-upload'></span>} {this.state.inputFile1 ? 'FILE ATTACHED' : 'ATTACH FILE'} {this.state.inputFile1 && <span className='fa fa-times' onClick={(e) => { !this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting && this.setState({ inputFile1: null }); e.preventDefault(); }}></span>}
1314 </Label>
1315 </div>
1316 </div>
1317 <div className='row'>
1318 <div className='col-auto' style={{ marginTop: 'calc(var(--vw, 1vw) *1)' }}>
1319 <Input type='file' id='inputFile' name='inputFile' onChange={this.handleFileChange} className='d-none' onClick={e => e.target.value = null} />
1320 <Label htmlFor={!this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting ? 'inputFile1' : ''} className={this.state.inputFile1 ? 'file-label' : 'input-label'} title={this.state.inputFile1 ? this.state.inputFile1.name : 'Please select a file'}>
1321 {!this.state.inputFile1 && <span className='svg-file-upload'></span>} {this.state.inputFile1 ? 'FILE ATTACHED' : 'ATTACH FILE'} {this.state.inputFile1 && <span className='fa fa-times' onClick={(e) => { !this.props.crypt.errMess && !this.props.crypt.output && !this.props.crypt.isExecuting && this.setState({ inputFile1: null }); e.preventDefault(); }}></span>}
1322 </Label>
1323 </div>
1324 </div>
1325 <div className='row' style={{ marginTop: 'calc(var(--vh, 1vh)*2)' }}>
1326 <div className='col-12'>
1327 <Input type='text' innerRef={i => this.algoName = i} placeholder='Enter Alphabets Here...' />
1328 </div>
1329 </div>
1330 <div className='row' style={{ marginTop: 'calc(var(--vh, 1vh)*2)' }}>
1331 <div className='col-12'>
1332 <Input type='text' innerRef={i => this.algoName = i} placeholder='Enter Punctuations Here...' />
1333 </div>
1334 <div className='col-12'>
1335 <div className='horizontal-line'></div>
1336 </div>
1337 </div>
1338 </ModalBody>
1339 </Modal>
1340 {/* Add Algorithm Algo */}
1341 <Modal className='disable-select' size='lg' scrollable centered isOpen={this.state.algoModalOpen ? true : false} toggle={this.toggleAlgoModal}>
1342 <ModalBody style={{ color: 'white', background: 'black', border: 'calc(var(--vw, 1vw)*.05) solid #999999', height: 'calc(var(--vh, 1vh)*56)', overflow: 'hidden' }}>
1343 {this.state.selectedModal === 'Add New' && (
1344 <React.Fragment>
1345 <div className='row'>
1346 <div className='col-4 text-center m-auto' onClick={() => this.setState({ selectedModal: 'Add New' })} style={this.state.selectedModal === 'Add New' ? styles.selectedTab : styles.tab}>
1347 {this.state.selectedAlgo ? 'EDIT' : 'ADD NEW'}
1348 </div>
1349 <div className='col-4 text-center m-auto' onClick={() => this.setState({ selectedModal: 'Edit Existing' })} style={this.state.selectedModal === 'Edit Existing' ? styles.selectedTab : styles.tab}>
1350 ALGORITHMS
1351 </div>
1352 </div>
1353 <div className='row' style={{ borderBottom: 'calc(var(--vw, 1vw)*.05) solid #999999', padding: 'calc(var(--vw, 1vw)*1)', paddingBottom: 'calc(var(--vw, 1vw)*2)', paddingTop: 'calc(var(--vw, 1vw)*2)' }}>
1354 <div className='col-6'>
1355 <Input type='text' innerRef={a => this.title = a} placeholder='Enter Algorithm Name' defaultValue={selectedAlgo && addonAlgos.filter(item => item.algoName === selectedAlgo)[0].algoName} />
1356 </div>
1357 <div className='col-6'>
1358 <Input type='text' innerRef={a => this.ipAddress = a} placeholder='Enter IP Address' defaultValue={selectedAlgo && addonAlgos.filter(item => item.algoName === selectedAlgo)[0].api} />
1359 </div>
1360 </div>
1361 <div className='row'>
1362 <div className='col text-right' style={{ padding: 'calc(var(--vw, 1vw)*1)' }}>
1363 <Button className='btn-secondary blue-button' onClick={this.handleKeyValueModal}>{this.state.selectedAlgo ? 'UPDATE' : 'NEXT'}</Button>
1364 </div>
1365 </div>
1366 </React.Fragment>
1367 )}
1368 {this.state.selectedModal === 'Edit Existing' && (
1369 <React.Fragment>
1370 <div className='row' style={{ marginBottom: 'calc(var(--vw, 1vw)*1)' }}>
1371 <div className='col-4 text-center m-auto' onClick={() => this.setState({ selectedModal: 'Add New' })} style={this.state.selectedModal === 'Add New' ? styles.selectedTab : styles.tab}>
1372 {this.state.selectedAlgo ? 'EDIT' : 'ADD NEW'}
1373 </div>
1374 <div className='col-4 text-center m-auto' onClick={() => this.setState({ selectedModal: 'Edit Existing' })} style={this.state.selectedModal === 'Edit Existing' ? styles.selectedTab : styles.tab}>
1375 ALGORITHMS
1376 </div>
1377 </div>
1378 {this.state.addonAlgos.filter(algo => algo.cipherType === this.state.algoModalOpen).map((algo, i) => (
1379 <div className='row' key={i}>
1380 {console.log(algo.cipherType, this.state.algoModalOpen)}
1381 <div className='col-12'>
1382 <div className='row' style={styles.algo}>
1383 <div className='col' onClick={() => this.setState({ selectedAlgo: algo.algoName, selectedModal: 'Add New' })}>{algo.algoName}</div>
1384 <div className='col-auto'>
1385 <Button style={{ height: 'calc(var(--vw, 1vw)*1.5)', fontSize: 'calc(var(--vw, 1vw)*.8)', paddingTop: 'calc(var(--vw, 1vw)*.1)' }} className='btn-danger light-red-button' onClick={(e) => { this.handleDeleteAlgo(algo.algoName); e.preventDefault(); }}>REMOVE</Button>
1386 </div>
1387 </div>
1388 </div>
1389 </div>
1390 ))}
1391 {!this.state.addonAlgos.filter(algo => algo.cipherType === this.state.algoModalOpen).length && <div className='col-12 text-center' style={{ marginTop: 'calc(var(--vw, 1vw)*3)' }}>Not yet added !</div>}
1392 </React.Fragment>
1393 )}
1394 </ModalBody>
1395 </Modal>
1396 {/* Key Value Pairs */}
1397 <Modal className='desable-select' size='lg' scrollable centered isOpen={this.state.keyvalueModalOpen} toggle={() => { this.toggleKeyValueModal(); this.toggleAlgoModal() }}>
1398 <ModalBody style={{ color: 'white', background: 'black', border: 'calc(var(--vw, 1vw)*.05) solid #999999', height: 'calc(var(--vh, 1vh)*56)', overflow: 'hidden', display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }}>
1399 <div className='row'>
1400 <div className='col-12' style={{ borderBottom: 'calc(var(--vw, 1vw)*.05) solid #999999', paddingBottom: 'calc(var(--vw, 1vw)*.5)', marginBottom: 'calc(var(--vw, 1vw)*.5)' }}>KEY VALUE PAIRS</div>
1401 </div>
1402 <div style={{ height: '100%', overflowX: 'hidden', overflowY: 'auto' }}>
1403 <div className='row'>
1404 <div className='col-6'>KEY NAME</div>
1405 <div className='col-6'>VALUE</div>
1406 </div>
1407 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1408 <div className='col-6'>
1409 <Input type='text' innerRef={a => this.algorithm_name = a} defaultValue='algorithm_name' />
1410 </div>
1411 <div className='col-6'>ALGORITHM NAME</div>
1412 </div>
1413 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1414 <div className='col-6'>
1415 <Input type='text' innerRef={a => this.input_text = a} defaultValue='input_text' />
1416 </div>
1417 <div className='col-6'>INPUT TEXT</div>
1418 </div>
1419 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1420 <div className='col-6'>
1421 <Input type='text' innerRef={a => this.input_file = a} defaultValue='input_file' />
1422 </div>
1423 <div className='col-6'>INPUT FILE</div>
1424 </div>
1425 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1426 <div className='col-6'>
1427 <Input type='text' innerRef={a => this.public_key = a} defaultValue='public_key' />
1428 </div>
1429 <div className='col-6'>PUBLIC KEY</div>
1430 </div>
1431 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1432 <div className='col-6'>
1433 <Input type='text' innerRef={a => this.private_key = a} defaultValue='private_key' />
1434 </div>
1435 <div className='col-6'>PRIVATE KEY</div>
1436 </div>
1437 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1438 <div className='col-6'>
1439 <Input type='text' innerRef={a => this.hash = a} defaultValue='hash' />
1440 </div>
1441 <div className='col-6'>HASH</div>
1442 </div>
1443 <div className='row' style={{ marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1444 <div className='col-6'>
1445 <Input type='text' innerRef={a => this.message_signature = a} defaultValue='message_signature' />
1446 </div>
1447 <div className='col-6'>MESSAGE SIGNATURE</div>
1448 </div>
1449 </div>
1450 <div className='row'>
1451 <div className='col-12 text-right' style={{ borderTop: 'calc(var(--vw, 1vw)*.05) solid #999999', paddingTop: 'calc(var(--vw, 1vw)*.5)', marginTop: 'calc(var(--vw, 1vw)*.5)' }}>
1452 <Button className='btn-secondary blue-button' onClick={this.handleAddAlgo}>ADD</Button>
1453 </div>
1454 </div>
1455 </ModalBody>
1456 </Modal>
1457 </React.Fragment>
1458 )
1459 }
1460}
1461const styles = {
1462 inputContainer: {
1463 background: 'rgba(0,0,0,.3)',
1464 padding: '20px',
1465 // borderRadius: '25px',
1466 },
1467 inputLabel: {
1468 background: 'black',
1469 padding: '6px 30px 6px 30px',
1470 borderRadius: '5px',
1471 border: '1px solid rgba(255,255,255,.3)'
1472 },
1473 inputBox: {
1474 height: 'calc(var(--vh, 1vh)*8)'
1475 },
1476 fileLabel: {
1477 padding: '6px 30px 6px 30px',
1478 borderRadius: '5px',
1479 border: '1px solid rgb(255, 255, 255, 0.3)',
1480 color: 'rgb(255, 255, 255, 0.3)'
1481 },
1482 buttons: {
1483 color: 'rgb(255, 255, 255, .5)',
1484 background: 'black',
1485 whiteSpace: 'nowrap'
1486 },
1487 selectedButton: {
1488 background: 'rgba(255,0,0,.8)'
1489 },
1490 algo: {
1491 // background: 'linear-gradient(to bottom, white, rgb(199,200,200))',
1492 border: 'calc(var(--vw, 1vw)*.05) solid #999999',
1493 borderRadius: '5px',
1494 margin: 'calc(var(--vw, 1vw)*.2)',
1495 padding: 'calc(var(--vw, 1vw)*.5)'
1496 },
1497 selectedTab: {
1498 borderBottom: 'calc(var(--vw, 1vw)*.1) solid green',
1499 },
1500 tab: {
1501 borderBottom: 'calc(var(--vw, 1vw)*.1) solid transparent'
1502 }
1503}
1504const mapStateToProps = state => ({
1505 crypt: state.crypt,
1506 user: state.auth.user
1507})
1508const mapDispatchToProps = dispatch => ({
1509 startExecution: fd => dispatch(startExecution(fd)),
1510 iterateNext: fd => dispatch(iterateNext(fd)),
1511 resetExecution: () => dispatch(resetExecution()),
1512 createStateStore: state => dispatch(createStateStore(state))
1513})
1514export default connect(mapStateToProps, mapDispatchToProps)(CryptAnalysis);