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