· 5 years ago · May 06, 2020, 10:26 PM
1import React, { Component } from 'react';
2import { StyleSheet, Text, View, ActivityIndicator, TouchableWithoutFeedback, Image, Icon, TextInput} from 'react-native';
3// import DeviceInfo from 'react-native-device-info';
4import api from '../../components/res/api.js';
5import KeyboardButton from '../../components/buttons/KeyboardButton';
6import img_logo from "../../ressources/img/main-logo.png";
7
8const TOTAL_NUMBER = 10; // <--- Nombre de touche numérique autorisé par le serveur (default 0 - 9)
9const KEY_COUNTER = 3; // <--- Nombre de touche compteur
10const KEYBOARD_MATRICE_BUILD = [5,5]; // <---- Nombre de touche affichées au clavier
11
12
13const KEYBOARD_MATRICE_TOTAL = KEYBOARD_MATRICE_BUILD[0] * KEYBOARD_MATRICE_BUILD[1];
14
15class SecureKeyboard extends React.Component {
16
17 constructor(props) {
18 super(props);
19
20 this.state = {
21 output:[],
22 output_display: null,
23 session_key: null,
24 session_matrice: [],
25 keyboard_matrice: [],
26
27 array_counters: [],
28
29 is_randomizing: false,
30 }
31 }
32
33
34
35 componentWillMount = () =>{
36
37
38
39 this.initialize_keyboardMatrice();
40 this.initialize_counters();
41
42
43 }
44
45
46
47 componentDidMount = () => {
48
49 /* DONNE DE TEST */
50
51 var session_received = {
52 key: 'F090fdskoksdf0909fdsfksdoksdk0430493fsdkfdsokOKFDOFKDFDOKFDO',
53 matrice: {
54 '@':'0',
55 'è':'1',
56 '&':'2',
57 'é':'3',
58 'ù':'4',
59 'h':'5',
60 '*':'6',
61 '#':'7',
62 '!':'8',
63 '£':'9'
64 }
65 }
66
67
68 }
69
70
71 initialize_counters = () => {
72 this.state.array_counters=[]
73 for (let i = 0; i < KEY_COUNTER; i++) {
74 this.state.array_counters.push([null,null]);
75 }
76 }
77
78
79 initialize_keyboardMatrice = () => {
80 this.state.keyboard_matrice=[];
81 for (let i = 0; i < KEYBOARD_MATRICE_TOTAL; i++) {
82 this.state.keyboard_matrice.push([null,null]);
83 }
84 }
85
86
87 update_sessionKey = (key) => {
88 this.state.session_key = key;
89 }
90
91 update_sessionMatrice = (matrice) => {
92
93 this.state.session_matrice = [];
94 for (let i in matrice) {
95 this.state.session_matrice.push(matrice[i]);
96 }
97 console.log('updated session ====');
98 console.log(this.state.session_matrice);
99 }
100
101
102 prepare_counters = () => {
103 var number_array=[], randomNumber=null;
104 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
105 number_array.push(i);
106 }
107 for (let i in this.state.array_counters) {
108 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
109 this.state.array_counters[i] = this.get_matriceData(number_array[randomNumber]);
110 number_array.splice(randomNumber,1);
111 }
112 }
113
114 get_counterData = (index) => {
115 return this.state.array_counters[index];
116 }
117
118 increment_counter = (index) => {
119 var counter = this.state.array_counters[index],
120 next = false;
121 for (i in this.state.session_matrice) {
122
123 if (next) { this.state.array_counters[index] = this.state.session_matrice[i]; next=false;break; }
124 if (this.state.session_matrice[i] == counter) { next = true; }
125 }
126 if (next) { this.state.array_counters[index] = this.state.session_matrice[0]; }
127 this.setState({array_counters: this.state.array_counters});
128 }
129
130 get_matriceData = (index) => {
131 // index = String(index);
132 var i=0;
133 for (let entry in this.state.session_matrice) {
134 if (i == index) {
135 return this.state.session_matrice[entry];
136 }
137 i++
138 }
139 }
140
141 add_output = (value) => {
142 if (!this.state.is_randomizing) {
143 this.state.is_randomizing = true;
144 this.setState({is_randomizing: this.state.is_randomizing});
145 let o = "#";
146 this.state.output.push(value);
147 this.state.output_display = o.repeat(this.state.output.length);
148 this.randomize_keypad();
149 this.state.is_randomizing = false;
150 this.setState({is_randomizing: this.state.is_randomizing});
151 }
152 }
153
154 clear_output = () => {
155 this.setState({output: [], output_display: null});
156 this.randomize_keypad_multiple(5);
157 }
158
159 randomize_keypad = () => {
160
161 this.initialize_keyboardMatrice();
162
163 var _this=this, i=0, j=0, number_array=[], matrice_array=[], memory_number=[], memory_matrice=[], randomMatrice=null, randomNumber=1;
164 for (i = 0 ; i < TOTAL_NUMBER ; i++) {
165 number_array.push(i);
166 }
167
168 for (i = 0 ; i < KEYBOARD_MATRICE_TOTAL ; i++) {
169 matrice_array.push(i);
170 }
171
172 i=0;
173 while (i < TOTAL_NUMBER+KEY_COUNTER) {
174
175 randomMatrice = Math.floor(Math.random() * (matrice_array.length-1)) + 0;
176
177 if (i < TOTAL_NUMBER) {
178
179 randomNumber = Math.floor(Math.random() * (number_array.length-1)) + 0;
180
181 memory_matrice.push(matrice_array[randomMatrice]); memory_number.push(number_array[randomNumber]);
182 this.state.keyboard_matrice[matrice_array[randomMatrice]] = this.get_matriceData(number_array[randomNumber]);
183
184 number_array.splice(randomNumber,1);
185 matrice_array.splice(randomMatrice,1);
186
187 }
188 else {
189 // console.log('handling counter = '+j +' setted to numpad = '+matrice_array[randomMatrice]);
190 let counter = this.get_counterData(j);
191 this.state.keyboard_matrice[matrice_array[randomMatrice]] = counter;
192
193 this.increment_counter(j);
194 let a = matrice_array[randomMatrice], b=j;
195
196 setTimeout(function() {
197 this.increment_counter(b);
198 let c = this.get_counterData(b);
199
200 this.state.keyboard_matrice[a] = c;
201 this.setState({keyboard_matrice: this.state.keyboard_matrice})
202 }.bind(this),500)
203
204
205 matrice_array.splice(randomMatrice,1);
206 j++
207 }
208
209
210 i++;
211 }
212
213
214 this.setState({keyboard_matrice: this.state.keyboard_matrice});
215 }
216
217 randomize_keypad_multiple = (time) => {
218 var _this=this;
219 if (time) {
220 setTimeout(() => {
221 time--
222 _this.randomize_keypad();
223 _this.randomize_keypad_multiple(time);
224 },20)
225 }
226
227 }
228
229 renderKeyboard = () => {
230 var lines = KEYBOARD_MATRICE_BUILD[0], columns = KEYBOARD_MATRICE_BUILD[1],
231 l=0, c=0, counter=0;
232 renderLine=[],renderColumn=[];
233
234 this._buttonsList = [];
235
236 while (l < lines) {
237
238 renderColumn = [];
239
240 while (c < columns) {
241
242 var keyboardButton = (<KeyboardButton id={"but-"+counter} key={counter} onPressIn={(value) => { this.add_output(value) }} value={this.state.keyboard_matrice[counter]} imgsrc={this.state.keyboard_matrice[counter]} />);
243
244 renderColumn.push(keyboardButton);
245 counter++;
246 c++;
247 }
248 renderLine.push(<View key={"line-"+l} style={styles.keyboardLine}>{renderColumn}</View>);
249 c=0;
250 l++
251 }
252
253
254 return renderLine;
255 }
256
257
258
259render() {
260 return (
261
262 <View style={styles.view}>
263
264 <View style={styles.viewInnerTop}>
265 <Image
266 style={styles.mainLogo}
267 source={img_logo}
268 />
269 <Text style={{fontWeight: 'bold'}}>AUTHENTIFICATION SECURISE</Text>
270 </View>
271
272 <View style={{alignItems:'center',justifyContent:'center'}} key="inputcont"><TextInput key="ouput_value" style={styles.output} editable={false} >{this.state.output_display}</TextInput></View>
273
274 <View key="containerKeyboard" style={styles.containerKeyboard}>{this.renderKeyboard()}</View>
275
276 <View key="bar_button" style={styles.buttonsBar}>
277 <TouchableWithoutFeedback key="button_remove" onPress={this.clear_output}>
278 <View style={styles.buttonRemove}>
279 <Text style={styles.buttonText}>CORRIGER</Text>
280 </View>
281 </TouchableWithoutFeedback>
282 <TouchableWithoutFeedback key="button_confirm" onPress={this.randomize_keypad}>
283 <View style={styles.buttonConfirm}>
284 <Text style={styles.buttonText}>CONFIRMER</Text>
285 </View>
286 </TouchableWithoutFeedback>
287 </View>
288
289
290 </View>
291 );
292}
293}
294
295const styles = StyleSheet.create({
296
297 view: {
298 flex: 1,
299 // backgroundColor: '#CCCCFF'
300 },
301
302 viewInnerTop: {flex: 4, justifyContent:'center', alignItems: 'center'},
303
304 mainLogo: {
305 height: 120,
306 width: 120,
307 margin: 'auto',
308 },
309
310 output: {
311 borderColor: 'black',
312 color: 'black',
313 borderWidth: 2,
314 borderRadius: 2,
315 width: 250,
316 height: 40,
317 textAlign: 'center',
318 margin: "auto",
319 justifyContent:"center",
320 alignItems:'center',
321 fontSize: 20
322 },
323
324 containerKeyboard: {
325 flex: 6,
326 padding: 10,
327 justifyContent: 'center',
328 alignItems:'center'
329 },
330
331 keyboardLine: {flex: 1, flexDirection:'row'},
332
333 textInput: {
334 height: 40, width: 200, borderColor: 'gray', borderWidth: 1,
335 padding: 5, backgroundColor: '#FFFFFF',color:'#000000'
336 },
337
338 buttonsBar: {
339 flex: 1,
340 flexDirection: 'row'
341 },
342
343 buttonConfirm: {
344 flex: 1,
345 backgroundColor: "green",
346 color: "white",
347 justifyContent: "center",
348 alignItems:"center"
349
350 },
351
352 buttonRemove: {
353 flex: 1,
354 backgroundColor: "orange",
355 color: "white",
356 justifyContent: "center",
357 alignItems:"center"
358
359 },
360
361 buttonText: {
362 color: "white"
363 }
364
365
366
367
368});
369
370export default SecureKeyboard;