change style and add flavicon

stefdelec · Feb 4, 2018 · 862f4b0 · 862f4b0
1 parent 1669703
commit 862f4b0
Show file tree

Hide file tree

Showing 13 changed files with 445 additions and 111 deletions.
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/private-md5.iml b/.idea/private-md5.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,8 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -21,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Encr.it</title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,53 +1,63 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {Component} from 'react';
 import './App.css';
 import Input from "./components/input";
-import Md5Hash from './components/cryptomd5';
-import SpecialHash from './components/specialhash';
+import * as crypto from 'crypto'
+import CopyPasteInput from "./components/copy-paste-input";
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: 'my amazing easy password', toggle: false };
-    this.change = this.change.bind(this);
-    this.toggle = this.toggle.bind(this);
-  }
-  change(event) {
-    // this.setState({value: event.target.value});
-    this.setState({ value: event.target.value });
-  }
-  toggle() {
-    console.log((!this.state.toggle));
-    this.setState({ toggle: !this.state.toggle });
-    console.log(this.state.toggle);
-  }
-  render() {
-    return (
-        <div className="container">
-          <div className='row'>
-            <div className='col-12'>
-              {Input(this.change)}
-            </div>
-            <div className='col-12'>
-              <button  className="btn btn-info btn-block" onClick={() => this.toggle()}>
-                {this.state.toggle?  this.state.value : 'voir'}
-              </button>
-              <hr />
-            </div>
-            <div className='col-12'>
-              {Md5Hash(this.state.value)}
-              <hr />
+    constructor(props) {
+        super(props);
+        this.state = {value: 'my amazing easy password', toggle: false};
+        this.change = this.change.bind(this);
+        this.toggle = this.toggle.bind(this);
+    }
 
-            </div>
-            <div className='col-12'>
-              {SpecialHash(this.state.value)}
-              <hr />
+    change(event) {
+        // this.setState({value: event.target.value});
+        this.setState({value: event.target.value});
+    }
+
+
+    toggle() {
+        this.setState({toggle: !this.state.toggle});
+    }
+
+    md5(key) {
+        return crypto.createHash('md5').update(key).digest("hex");
+    }
+
+    base64(key) {
+        return btoa(key);
+    }
+
+    render() {
+        return (
+            <div className="container">
+                <div className='row'>
+                    <div className='col-12'>
+                        {Input(this.change)}
+                    </div>
+                    <div className='col-12'>
+                        <button className="btn btn-info btn-block" onClick={() => this.toggle()}>
+                            {this.state.toggle ? this.state.value : 'voir'}
+                        </button>
+                        <hr/>
+                    </div>
+                    <div className='col-12'>
+                        <h3>MD5</h3>
+                        {CopyPasteInput(this.md5(this.state.value))}
+                        <hr/>
 
+                    </div>
+                    <div className='col-12'>
+                        <h3>MD5=>Base64</h3>
+                        {CopyPasteInput(this.base64(this.md5(this.state.value)))}
+                        <hr/>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-    );
-  }
+        );
+    }
 }
 
 export default App;
diff --git a/src/components/copy-paste-input.js b/src/components/copy-paste-input.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import * as crypto from 'crypto'
+
+const CopyPasteInput = (str) => {
+    const guid = () => {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        }
+
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+            s4() + '-' + s4() + s4() + s4();
+    }
+    const copyPast = () => {
+        var copyText = document.getElementById(idKey);
+        copyText.select();
+        document.execCommand("Copy");
+    };
+    const idKey = guid();
+    return (
+        <div className="row">
+            <div className="col-12">
+                <div className="input-group mb-3">
+                    <div className="input-group-prepend">
+                        <button onClick={() => copyPast()} className="btn btn-lg btn-primary">COPY</button>
+                    </div>
+                    <input readOnly
+                           type="text" value={str} className="form-control" id={idKey} placeholder="Your Next-password" />
+                </div>
+            </div>
+        </div>
+
+    )
+}
+
+export default CopyPasteInput
diff --git a/src/components/cryptomd5.js b/src/components/cryptomd5.js
diff --git a/src/components/input.js b/src/components/input.js
@@ -1,10 +1,10 @@
 import React from 'react'
 
-const Input = (change) => {
+const Input = (change,type) => {
     return (
-        <div className="form-group">
+    <div className="form-group">
             <label htmlFor="inputPassword">Password</label>
-            <input type='password' onChange={change} className="form-control" id="inputPassword" placeholder="Your Password" />
+            <input type="password" onChange={change} className="form-control" id="inputPassword" placeholder="Your Password" />
         </div>
 
     )

diff --git a/src/components/specialhash.js b/src/components/specialhash.js