import React, { Component } from 'react';
import config from 'config/environment';
import troopImage from 'images/Troop.png';
import styles from './idme.css';

class Idme extends Component {
  onKeyUp = (event) => {
    if (event.key === 'Enter') {
      this.idMe();
    }
  };

  onClick = () => {
    window.open(`${config.idmeOAuthUrl}?client_id=${config.idmeClientId}&redirect_uri=${
      config.host
    }/profile/verify&response_type=token&scope=military&display=popup', '', 'scrollbars=yes,menubar=no,status=no,location=no,toolbar=no,width=750,height=780,top=200,left=200`);
  };

  render() {
    return (
      <div className={styles.wrapper}>
        <span
          className={styles.authbtn}
          role="link"
          onClick={this.onClick}
          onKeyUp={this.onKeyUp}
          tabIndex={0}
        >
          <img className={styles.authImage} src={troopImage} alt="Verify your status with Id.Me" />
        </span>
      </div>
    );
  }
}

export default Idme;

@@ -191,103 +191,15 @@
 %0A  o
-nKeyUp = (event) =%3E %7B%0A    if (event.key === 'Enter') %7B%0A      this.idMe();%0A    %7D%0A  %7D;%0A%0A  onClick
+penIDME
  = (
@@ -572,23 +572,77 @@
     
-%3Cspan%0A 
+%7B/* eslint-disable jsx-a11y/click-events-have-key-events */%7D%0A
         
  cla
@@ -637,16 +637,21 @@
         
+%3Cspan
  classNa
@@ -669,26 +669,16 @@
 authbtn%7D
-%0A         
  role=%22l
@@ -681,26 +681,16 @@
 e=%22link%22
-%0A         
  onClick
@@ -701,58 +701,16 @@
 is.o
-nClick%7D%0A          onKeyUp=%7Bthis.onKeyUp%7D%0A         
+penIDME%7D
  tab
@@ -718,25 +718,16 @@
 ndex=%7B0%7D
-%0A        
 %3E%0A      

Revert refactor to keep PR scoped well