Merge branch 'dev' into iv0rish-create-cla-pipeline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "klaytn-wallet",
-  "version": "2.4.7",
+  "version": "2.4.8",
   "description": "Klaytn Wallet Project",
   "directories": {
     "test": "test"

src/components/AccessByPrivatekey.js

@@ -81,7 +81,7 @@ class AccessByPrivateKey extends Component<Props> {
         </p>
         <Input
           label="Klaytn Wallet Key or Private Key"
-          type="text"
+          type="password"
           autoFocus
           name="privatekey"
           className="AccessByPrivatekey__input"

src/components/ContentHeader.scss

@@ -33,7 +33,7 @@
 }
 
 .Header__link {
-  @include font-style('caption')
+  @include font-style('caption');
   color: $steel-blue;
   font-size: 12px;
   float: right;

src/components/InputPasswordCopy.js

@@ -0,0 +1,119 @@
+import React, { Component, Fragment } from 'react'
+import cx from 'classnames'
+
+import { copy, madeBulletString } from 'utils/misc'
+import Tooltip from 'components/Tooltip'
+import './InputPasswordCopy.scss'
+
+class InputPasswordCopy extends Component<Props> {
+  state = {
+    isCopied: false,
+    showPassword: false,
+  }
+
+  copy = () => {
+    const { clickEvent } = this.props
+    if (typeof clickEvent === 'function') {
+      clickEvent(true)
+    }
+    if (this.$input)
+    copy(this.$input)
+    this.setCopyState(true)
+    setTimeout(() => this.setCopyState(false), 1500)
+
+  }
+
+  setCopyState = (isCopied) => this.setState({ isCopied })
+
+  toggleShowPassword = () => {
+    this.setState({
+      showPassword: !this.state.showPassword,
+    })
+  }
+  render() {
+    const { isCopied, showPassword } = this.state
+    const {
+      className,
+      name,
+      value,
+      label,
+      onChange,
+      onKeyPress,
+      placeholder,
+      disabled,
+      err,
+      eye,
+      isTooltip,
+      tooltipText,
+      subName,
+      styleType,
+    } = this.props
+
+    const bullet = madeBulletString((value && value.length) || 112);
+
+    return (
+      <div className={cx('InputPasswordCopy', className)}>
+        {label && <label className="InputPasswordCopy__label" htmlFor={name}>{label}</label>}
+
+        {isTooltip && <Tooltip
+          className="AccountOverviewSection__tooltip"
+          direction="top"
+          message={(
+            <Fragment>{tooltipText}</Fragment>
+          )}><img className="button__question__icon" src="/static/images/icon-question-mark.svg"/>
+          </Tooltip>}
+
+        <div className={cx('InputPasswordCopy__inputWrapper InputPasswordCopy__inputWrapper__type3', { 'InputPasswordCopy__inputWrapper__type2': subName })}>
+        {eye && (
+            <button
+              className={cx('InputPasswordCopy__eye', {
+                'InputPasswordCopy__eye--show': !showPassword,
+                'InputPasswordCopy__eye--hide': showPassword,
+              })}
+              onClick={this.toggleShowPassword}
+              tabIndex="-1"
+            />
+          )}
+          {subName && <div className="input__subname">{subName}</div>}
+          <input
+            ref={($input) => this.$input = $input}
+            name={name}
+            type='password'
+            value={value}
+            onChange={onChange}
+            onKeyPress={onKeyPress}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly
+            hidden
+          />
+          <div className={cx('InputPasswordCopy__input InputPasswordCopy__value', { 'InputPasswordCopy--err': err, 'InputPasswordCopy__wordWrap': styleType === "twoLine"  })}>
+            <span className={cx('InputPasswordCopy__span', { 'InputPasswordCopy__span__wordWrap': styleType === "twoLine" })}>
+            {showPassword ? value: bullet}
+            </span>
+          </div>
+          <button
+            className={cx('InputPasswordCopy__copyButton', {
+              'InputPasswordCopy__copyButton--copied': isCopied,
+            })}
+            onClick={this.copy}
+            tabIndex="-1"
+          >
+            {isCopied ? 'COPIED!': 'COPY'}
+            <img className="InputPasswordCopy__icon" src="/static/images/icon-copy.svg" />
+
+          </button>
+        </div>
+        {/* <p
+          className={cx('InputPasswordCopy__copiedText', {
+            'InputPasswordCopy__copiedText--copied': isCopied,
+          })}
+        >
+          Copied to clipboard
+        </p> */}
+      </div>
+    )
+  }
+}
+
+export default InputPasswordCopy

src/components/InputPasswordCopy.scss

@@ -0,0 +1,204 @@
+@import "colors.scss";
+@import "fonts.scss";
+@import "mixins.scss";
+
+.InputPasswordCopy {
+  width: 100%;
+  border: 0;
+  padding: 0;
+  transition: border-width 100ms linear, border-color 300ms linear;
+  position: relative;
+  outline: 0;
+  background-color: transparent;
+  padding-bottom: 40px;
+  &.not__margin {
+    margin-bottom: 4px;
+  }
+  &.textarea__show .textarea__Copy {
+    @include font-style("caption-alert");
+    color: $Red;
+    padding: 7px 8px 8px;
+  }
+}
+
+.InputPasswordCopy__inputWrapper {
+  position: relative;
+  padding-right: 72px;
+  &__type2 {
+    padding-left: 68px;
+  }
+  .input__subname {
+    @include font-style("label");
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 30px;
+    width: 68px;
+    padding-left: 8px;
+    line-height: 30px;
+    color: $dark-blue-grey;
+    background-color: #f0f2fc;
+  }
+  .input__subname + input {
+  }
+  &.InputPasswordCopy__inputWrapper__type3 {
+    padding: 0;
+    .InputPasswordCopy__copyButton {
+      bottom: -38px;
+    }
+    .InputPasswordCopy__eye {
+      right: 8px;
+      z-index: 2;
+    }
+  }
+  .hide {
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+  .textarea__Copy {
+    position: relative;
+    width: 100%;
+    padding: 7px 37px 6px 8px;
+    height: 50px;
+    border: none;
+    resize: none;
+    color: $dark-blue-grey;
+    background-color: #f0f2fc;
+    outline: none;
+    z-index: 1;
+    @include font-style("body");
+    &.textarea__password {
+      font-size: 18px;
+      line-height: 1.1;
+    }
+  }
+}
+
+.InputPasswordCopy__input {
+  @include font-style("body");
+  color: $dark-blue-grey;
+  background-color: #f0f2fc;
+  outline: 0;
+  border: 0;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  display: block;
+  padding: 0px 8px;
+
+  &::placeholder {
+    color: $middle-blue-grey;
+  }
+
+  &:-webkit-autofill {
+    background-color: transparent;
+  }
+}
+.InputPasswordCopy__eye + .InputPasswordCopy__input {
+  padding-right: 30px;
+}
+.InputPasswordCopy__copyButton {
+  @include font-style("button-small");
+  color: $Blue-three;
+  width: 64px;
+  height: 30px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  width: 64px;
+  border-radius: 2px;
+  border: solid 1px #f0f2fc;
+  background-color: $White-one;
+  &--copied {
+    background-color: $Blue-green-one !important;
+    color: $White-one;
+    .InputPasswordCopy__icon {
+      display: none;
+    }
+  }
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    border: none;
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.2);
+    border: none;
+  }
+}
+
+.InputPasswordCopy__icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: 11px;
+  height: 12px;
+  margin-left: 8px;
+}
+
+.InputPasswordCopy__copiedText {
+  @include font-style("caption");
+  @include textPosition();
+  text-align: left;
+  color: $main-point;
+  transition: opacity 300ms;
+  opacity: 0;
+  margin-top: 10px;
+}
+
+.InputPasswordCopy__label {
+  @include font-style("label");
+  color: $main-theme;
+  cursor: text;
+  display: block;
+  text-align: left;
+  margin-bottom: 8px;
+}
+
+.InputPasswordCopy__eye {
+  border: 0;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: calc(50% - 10px);
+  right: 80px;
+  outline: none;
+  background: center / contain no-repeat transparent;
+  cursor: pointer;
+
+  &--show {
+    background-image: url("/static/images/btn-show.svg");
+  }
+  &--hide {
+    background-image: url("/static/images/btn-hide.svg");
+  }
+}
+
+.InputPasswordCopy__value {
+  width: 100%;
+  padding-right: 36px;
+}
+
+.InputPasswordCopy__span {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.InputPasswordCopy__wordWrap {
+  height: 50px;
+}
+.InputPasswordCopy__span__wordWrap {
+  word-wrap: break-word;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  line-height: 1.4;
+  padding-top: 7px;
+}

src/components/Landing.scss

@@ -73,7 +73,7 @@
     float: left;
   }  
   button {
-    @include font-style('button')
+    @include font-style('button');
     width: 100%;
     height: 48px;
     text-align: center;

src/components/MyWallet.js

@@ -7,6 +7,7 @@ import { caver } from 'klaytn/caver'
 import { pipe } from 'utils/Functional'
 import Input from 'components/Input'
 import InputCopy from 'components/InputCopy'
+import InputPasswordCopy from 'components/InputPasswordCopy'
 import KeystorePopup from 'components/KeystorePopup'
 import MyToken from 'components/MyToken'
 import Button from 'components/Button'
@@ -123,7 +124,7 @@ class MyWallet extends Component<Props> {
               subName="Hex"
             />
 
-            <InputCopy
+            <InputPasswordCopy
               className="MyWallet__Input"
               name="privateKey"
               label="Private Key"
@@ -143,7 +144,7 @@ class MyWallet extends Component<Props> {
               autoFocus
               eye
             />
-            <InputCopy
+            <InputPasswordCopy
               className="MyWallet__Input"
               name="Klaytn Wallet Key"
               label="Klaytn Wallet Key"

src/components/MyWallet.scss

@@ -46,7 +46,8 @@
 
 .MyWallet__Input {
   margin-bottom: 40px;
-  .InputCopy__label{
+  padding-bottom: 0px;
+  .InputCopy__label, .InputPasswordCopy__label {
     display: inline-block;
   }
 }