tronair-gui/src/Pklogin.js

Web application/GUI for performing airdrops on the TRON blockchain

import React, { Component } from 'react';
import { Button } from 'antd';
import './App.css';

// UI framework component imports
// import Button from 'muicss/lib/react/button';


export default class Pklogin extends Component {

  // This component doesn't use any properties

  constructor(props) {
    super(props);
    
    this.state = {
      pk_text_edit: '',
      is_valid_entry: false,
      invalid_desc: '',
    };
  }

  textInputChanged_pk_text_edit = (event) => {
    var input_txt = event.target.value;
    var valid_chars = /^[0-9a-zA-Z]+$/;
    var is_valid = false;
    var inv_d = ''
    this.setState({pk_text_edit: input_txt});
    if(input_txt.match(valid_chars)) {
      if (input_txt.length === 64) {
        is_valid = true;
      } else {
        if (input_txt.length > 64) {
          inv_d = 'The private key you entered is too long.';
        } else {
          inv_d = 'The private key you entered is too short.';
        }
      }
    } else {
      inv_d = 'Private key must contain only numbers and letters.';
    }
    this.setState({is_valid_entry: is_valid});
    this.setState({invalid_desc: inv_d});
  }
  
  onClick_elVerfiy_pk_btn = (ev) => {
    let newVal = this.state.pk_text_edit;
    this.props.appActions.updateDataSlot('ds_acc_pk', newVal);
  
    newVal = "3";
    this.props.appActions.updateDataSlot('ds_login_state', newVal);
  
    newVal = "1";
    this.props.appActions.updateDataSlot('ds_isLoggedIn', newVal);
  
  }
  
  
  render() {
    // eslint-disable-next-line no-unused-vars
    let baseStyle = {};
    // eslint-disable-next-line no-unused-vars
    let layoutFlowStyle = {};
    
    const style_elBackground = {
        width: '100%',
        height: '100%',
     };
    const style_elBackground_outer = {
        backgroundColor: '#f6f6f6',
     };
    const style_elPk_text_edit = {
        display: 'block',
        backgroundColor: 'white',
        paddingLeft: '1rem',
        boxSizing: 'border-box', // ensures padding won't expand element's outer size
     };
    const style_elPk_text_edit_outer = {
        pointerEvents: 'auto',
     };
    const style_elVerfiy_pk_btn = {
        display: 'block',
        color: 'white',
        textAlign: 'center',
        textTransform: 'none',
     };
    const style_elVerfiy_pk_btn_outer = {
        cursor: 'pointer',
        pointerEvents: 'auto',
     };

    const can_submit = this.state.is_valid_entry;
    const err_msg = (can_submit) ? this.state.invalid_desc:'';
    
    return (
      <div className="Pklogin" style={baseStyle}>
        <div className="background">
          <div className='appBg containerMinHeight elBackground' style={style_elBackground_outer}>
            <div style={style_elBackground} />
          
          </div>
          
        </div>
        <div className="layoutFlow">
          <div className='baseFont elPk_text_edit' style={style_elPk_text_edit_outer}>
            <input style={style_elPk_text_edit} type="password" placeholder={this.props.locStrings.pklogin_field_305229} onChange={this.textInputChanged_pk_text_edit} value={this.state.pk_text_edit}  />
            {err_msg}
          </div>
          
          <div className='headlineFont elVerfiy_pk_btn' style={style_elVerfiy_pk_btn_outer}>
            <Button 
              style={style_elVerfiy_pk_btn}
              size='large'
              type='primary'
              onClick={this.onClick_elVerfiy_pk_btn}
              disabled={can_submit}>
              {this.props.locStrings.choose_login2_tl_login_btncopy_214840}
            </Button>
          
          </div>
          
        </div>
      </div>
    )
  }
  

}