<commit_before>import PropTypes from 'prop-types';
import React from 'react';

import AlertBox from '@department-of-veterans-affairs/formation/AlertBox';
import Modal from '@department-of-veterans-affairs/formation/Modal';
import recordEvent from '../../../monitoring/record-event';
import { login, signup } from '../../../user/authentication/utilities';
import DowntimeNotification, { services } from '../../../../platform/monitoring/DowntimeNotification';

const loginHandler = (loginType) => () => {
  recordEvent({ event: `login-attempted-${loginType}` });
  login(loginType);
};

const handleDsLogon = loginHandler('dslogon');
const handleMhv = loginHandler('mhv');
const handleIdMe = loginHandler('idme');

class SignInModal extends React.Component {
  componentDidUpdate(prevProps) {
    if (!prevProps.visible && this.props.visible) {
      recordEvent({ event: 'login-modal-opened' });
    }
  }

  renderDSLogonDowntimeBanner = (status) => {
    if (status === 'down') {
      return (
        <div className="downtime-notification row">
          <div className="columns small-12">
            <div className="form-warning-banner">
              <AlertBox
                headline="DS Logon isn't working quite right"
                content="If you're having trouble signing in to Vets.gov using your DS Logon username and password, please try again later. Or, you can try signing in with your My HealtheVet username and password or through ID.me."
                isVisible
                status="warning"/>
              <br/>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div></div>
    );
  }

  renderModalContent = () => {
    return (
      <main className="login">
        <div className="row">
          <div className="columns">
            <div className="logo">
              <a href="/">
                <img alt="vets.gov" className="va-header-logo" src="/img/design/logo/logo-alt.png"/>
              </a>
            </div>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="columns small-12">
              <h1>Sign in to Vets.gov</h1>
            </div>
          </div>
          <div className="row hide-for-medium-up mobile-explanation">
            <div className="columns small-12">
              <h2>One site. A lifetime of benefits and services at your fingertips.</h2>
            </div>
          </div>
          <DowntimeNotification appTitle="user dashboard" render={this.renderDSLogonDowntimeBanner} dependencies={[services.dslogon]}></DowntimeNotification>
          <div className="row">
            <div className="columns usa-width-one-half medium-6">
              <div className="signin-actions-container">
                <div className="top-banner">
                  <div>
                    <img alt="ID.me" src="/img/signin/lock-icon.svg"/> Secured & powered by <img alt="ID.me" src="/img/signin/idme-icon-dark.svg"/>
                  </div>
                </div>
                <div className="signin-actions">
                  <h5>Sign in with an existing account</h5>
                  <div>
                    <button className="dslogon" onClick={handleDsLogon}>
                      <img alt="DS Logon" src="/img/signin/dslogon-icon.svg"/><strong> Sign in with DS Logon</strong>
                    </button>
                    <button className="mhv" onClick={handleMhv}>
                      <img alt="My HealtheVet" src="/img/signin/mhv-icon.svg"/><strong> Sign in with My HealtheVet</strong>
                    </button>
                    <button className="usa-button-primary va-button-primary" onClick={handleIdMe}>
                      <img alt="ID.me" src="/img/signin/idme-icon-white.svg"/><strong> Sign in with ID.me</strong>
                    </button>
                    <span className="sidelines">OR</span><commit_msg>feature/9390 refactor to using serviceStatus<commit_after>import PropTypes from 'prop-types';
import React from 'react';

import AlertBox from '@department-of-veterans-affairs/formation/AlertBox';
import Modal from '@department-of-veterans-affairs/formation/Modal';
import recordEvent from '../../../monitoring/record-event';
import { login, signup } from '../../../user/authentication/utilities';
import DowntimeNotification, { services, serviceStatus } from '../../../../platform/monitoring/DowntimeNotification';

const loginHandler = (loginType) => () => {
  recordEvent({ event: `login-attempted-${loginType}` });
  login(loginType);
};

const handleDsLogon = loginHandler('dslogon');
const handleMhv = loginHandler('mhv');
const handleIdMe = loginHandler('idme');

class SignInModal extends React.Component {
  componentDidUpdate(prevProps) {
    if (!prevProps.visible && this.props.visible) {
      recordEvent({ event: 'login-modal-opened' });
    }
  }

  renderDSLogonDowntimeBanner = (status) => {
    if (status === serviceStatus.down) {
      return (
        <div className="downtime-notification row">
          <div className="columns small-12">
            <div className="form-warning-banner">
              <AlertBox
                headline="DS Logon isn't working quite right"
                content="If you're having trouble signing in to Vets.gov using your DS Logon username and password, please try again later. Or, you can try signing in with your My HealtheVet username and password or through ID.me."
                isVisible
                status="warning"/>
              <br/>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div></div>
    );
  }

  renderModalContent = () => {
    return (
      <main className="login">
        <div className="row">
          <div className="columns">
            <div className="logo">
              <a href="/">
                <img alt="vets.gov" className="va-header-logo" src="/img/design/logo/logo-alt.png"/>
              </a>
            </div>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="columns small-12">
              <h1>Sign in to Vets.gov</h1>
            </div>
          </div>
          <div className="row hide-for-medium-up mobile-explanation">
            <div className="columns small-12">
              <h2>One site. A lifetime of benefits and services at your fingertips.</h2>
            </div>
          </div>
          <DowntimeNotification render={this.renderDSLogonDowntimeBanner} dependencies={[services.dslogon]}></DowntimeNotification>
          <div className="row">
            <div className="columns usa-width-one-half medium-6">
              <div className="signin-actions-container">
                <div className="top-banner">
                  <div>
                    <img alt="ID.me" src="/img/signin/lock-icon.svg"/> Secured & powered by <img alt="ID.me" src="/img/signin/idme-icon-dark.svg"/>
                  </div>
                </div>
                <div className="signin-actions">
                  <h5>Sign in with an existing account</h5>
                  <div>
                    <button className="dslogon" onClick={handleDsLogon}>
                      <img alt="DS Logon" src="/img/signin/dslogon-icon.svg"/><strong> Sign in with DS Logon</strong>
                    </button>
                    <button className="mhv" onClick={handleMhv}>
                      <img alt="My HealtheVet" src="/img/signin/mhv-icon.svg"/><strong> Sign in with My HealtheVet</strong>
                    </button>
                    <button className="usa-button-primary va-button-primary" onClick={handleIdMe}>
                      <img alt="ID.me" src="/img/signin/idme-icon-white.svg"/><strong> Sign in with ID.me</strong>
                    </button>
                    <span className="sidelines">OR</span>
{'fraction_non_alphanumeric': 0.14028411973617452, 'fraction_numerical': 0.00380517503805175, 'mean_word_length': 2.0303612605687933, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4151715', 'n_tokens_mistral': 2255, 'n_tokens_neox': 2147, 'n_words': 502}