tryber · matheus-ferreira02 · Feb 6, 2022 · Feb 6, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,9 +6,13 @@
     "node": "16"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.17",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "copy-to-clipboard": "^3.3.1",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "react": "^17.0.2",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,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`.
     -->
+    <script src="https://kit.fontawesome.com/157ecb221c.js" crossorigin="anonymous"></script>
     <title>React App</title>
   </head>
   <body class="body">

diff --git a/src/components/Main/Main.css b/src/components/Main/Main.css
@@ -5,6 +5,7 @@
   height: 85%;
   justify-content: space-between;
   margin: auto;
+  position: relative;
 }
 
 .main_password {
@@ -13,3 +14,16 @@
   background-color: #1E223F;
   padding: 20px;
 }
+
+.Copied, .Copy {
+  border: 1px solid #1E223F;
+  border-radius: 10px;
+  color: #fafafa;
+  position: absolute;
+  right: 0;
+  font-size: 0.7em;
+  padding: 5px;
+  width: 50px;
+  top: 0;
+  background-color: #1E223F;
+}
diff --git a/src/components/Main/Main.js b/src/components/Main/Main.js
@@ -1,19 +1,38 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import copy from 'copy-to-clipboard';
+import { copiedPassword } from '../../redux/actions';
 import LengthCaracters from '../LengthCaracters/LengthCaracters';
 import Settings from '../Settings/Settings';
 import './Main.css'
 
 class Main extends Component {
+  copyPassword = () => {
+    const { password, copied } = this.props;
+    copy(password);
+    copied();
+  }
+
   render() {
-    const { password } = this.props;
+    const { password, btnCopy } = this.props;
 
     return (
       <main className="body_main">
         { password.length === 0
           ? <p className="main_password">CLICK GENERATE</p>
-          : <p className="main_password">{ password }</p>
+          : (
+            <>
+              <button
+                type="button"
+                onClick={ this.copyPassword }
+                className={ btnCopy }
+              >
+                { btnCopy }
+              </button>
+              <p className="main_password">{ password }</p>
+            </>
+            )
         }
 
         <LengthCaracters />
@@ -25,11 +44,18 @@ class Main extends Component {
 
 Main.propTypes = {
   password: PropTypes.string,
+  btnCopy: PropTypes.string,
+  copied: PropTypes.func,
 }.isRequired;
 
 const mapStateToProps = (state) => {
   const { password } = state.passwordReducer;
-  return { password };
+  const { btnCopy } = state.copyPasswordReducer;
+  return { password, btnCopy };
 }
 
-export default connect(mapStateToProps, null)(Main);
+const mapDispatchToProps = (dispatch) => ({
+  copied: () => dispatch(copiedPassword()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main);
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import Checkbox from '../Checkbox/Checkbox';
 import BtnGenerate from '../BtnGenerate/BtnGenerate';
 import './Settings.css';
-import { savePassword } from '../../redux/actions';
+import { savePassword, copyPassword } from '../../redux/actions';
 import caracters from '../../data/caracters';
 
 class Settings extends Component {
@@ -42,10 +42,11 @@ class Settings extends Component {
 
   handleClick = (event) => {
     event.preventDefault();
-    const { savePassword } = this.props;
+    const { savePassword, copyPassword } = this.props;
     const password = this.createPassword();
 
     savePassword(password);
+    copyPassword();
   }
 
   handleChangeCheckbox = ({ target }) => {
@@ -122,7 +123,8 @@ const mapStateToProps = (state) => {
 }
 
 const mapDispatchToProps = (dispatch) => ({
-  savePassword: (password) => dispatch(savePassword(password))
+  savePassword: (password) => dispatch(savePassword(password)),
+  copyPassword: () => dispatch(copyPassword()),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js
@@ -1,5 +1,7 @@
 export const LENGTH_PASSWORD = 'LENGTH_PASSWORD';
 export const PASSWORD = 'PASSWORD';
+export const COPY_PASSWORD = 'COPY_PASSWORD';
+export const COPIED_PASSWORD = 'COPIED_PASSWORD';
 
 export const lengthPassword = (value) => ({
   type: LENGTH_PASSWORD,
@@ -10,3 +12,13 @@ export const savePassword = (value) => ({
   type: PASSWORD,
   value,
 });
+
+export const copyPassword = (value) => ({
+  type: COPY_PASSWORD,
+  value,
+});
+
+export const copiedPassword = (value) => ({
+  type: COPIED_PASSWORD,
+  value,
+});
diff --git a/src/redux/reducers/CopyPasswordReducer.js b/src/redux/reducers/CopyPasswordReducer.js
@@ -0,0 +1,24 @@
+import { COPY_PASSWORD, COPIED_PASSWORD } from '../actions';
+
+const INITIAL_STATE = {
+  btnCopy: 'Copy',
+};
+
+const copyPasswordReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+  case COPY_PASSWORD:
+    return {
+      ...state,
+      btnCopy: 'Copy',
+    };
+  case COPIED_PASSWORD:
+    return {
+      ...state,
+      btnCopy: 'Copied',
+    };
+  default:
+    return state;
+  }
+};
+
+export default copyPasswordReducer;
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import lengthPasswordReducer from './LengthPasswordReducer';
 import passwordReducer from './passwordReducer';
+import copyPasswordReducer from './CopyPasswordReducer';
 
 const rootReducer = combineReducers({
   lengthPasswordReducer,
   passwordReducer,
+  copyPasswordReducer,
 });
 
 export default rootReducer;