@gamelearn/arcade-components 0.27.1 → 0.27.2

package/dist/components/login-puzzle-component/components/LoginPuzzleComponent.js

@@ -65,28 +65,38 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
       inputPassword = _useState4[0],
       setPassword = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      successClass = _useState6[0],
-      setSuccessClass = _useState6[1];
+      inputPasswordFocus = _useState6[0],
+      setInputPasswordFocus = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      finished = _useState8[0],
-      setFinished = _useState8[1];
+      fakeHashes = _useState8[0],
+      setFakeHashes = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      errorMessage = _useState10[0],
-      setErrorMessage = _useState10[1];
+      successClass = _useState10[0],
+      setSuccessClass = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      finished = _useState12[0],
+      setFinished = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      errorMessage = _useState14[0],
+      setErrorMessage = _useState14[1];
 
   var _soundActions = _slicedToArray(soundActions, 1),
       playSound = _soundActions[0];
 
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      accRewards = _useState12[0],
-      setRewards = _useState12[1];
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = _slicedToArray(_useState15, 2),
+      accRewards = _useState16[0],
+      setRewards = _useState16[1];
 
   var imgURL = ((_image$img = image.img) === null || _image$img === void 0 ? void 0 : _image$img.url) || imagenPorDefecto;
 
@@ -126,6 +136,18 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
     }
   };
 
+  var changeCharactersByHashes = function changeCharactersByHashes(e) {
+    var fakePassword = '';
+
+    if (e.length >= 0) {
+      for (var i = 0; i < e.length; i++) {
+        fakePassword += '•';
+      }
+
+      setFakeHashes(fakePassword);
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setResolveAction(function () {
       var rewardsData = [].concat(_toConsumableArray(accRewards), _toConsumableArray(info.resolve.rewards));
@@ -152,7 +174,6 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   }, translate('puzzle.user')), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
   }, /*#__PURE__*/_react.default.createElement("input", {
-    autoComplete: "off",
     disabled: finished,
     "data-testid": "username",
     className: "puzzle--login__input ".concat(successClass),
@@ -170,18 +191,26 @@ var LoginPuzzleComponent = function LoginPuzzleComponent(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('puzzle.password'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "puzzle--login__group"
   }, /*#__PURE__*/_react.default.createElement("input", {
-    autoComplete: "off",
     disabled: finished,
     "data-testid": "password",
-    className: "puzzle--login__input ".concat(successClass),
-    type: "password",
+    className: "puzzle--login__input puzzle--login__input--fakepassword ".concat(successClass),
+    type: "text",
     placeholder: translate('puzzle.password'),
+    onFocus: function onFocus(e) {
+      setInputPasswordFocus(true);
+    },
+    onBlur: function onBlur(e) {
+      setInputPasswordFocus(false);
+    },
     onChange: function onChange(e) {
       setPassword(e.target.value);
+      changeCharactersByHashes(e.target.value);
       setSuccessClass('');
       setErrorMessage(false);
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "login-fakepassword" + (inputPasswordFocus ? " login-fakepassword--focus" : "") + (fakeHashes.length ? " login-fakepassword--fill" : "") + " ".concat(successClass ? successClass : '')
+  }, inputPassword ? fakeHashes : translate('puzzle.password')), /*#__PURE__*/_react.default.createElement("span", {
     className: "icon-circle-check"
   }, " ")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gamelearn/arcade-components",
   "license": "Gamelearn",
-  "version": "0.27.1",
+  "version": "0.27.2",
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -59,7 +59,7 @@
     "@babel/cli": "7.12.10",
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
-    "@gamelearn/arcade-styles": "0.2.4",
+    "@gamelearn/arcade-styles": "0.4.1",
     "@react-three/test-renderer": "6.0.6",
     "@storybook/addon-actions": "6.1.11",
     "@storybook/addon-essentials": "6.1.11",