<commit_before>import React from 'react';
import Screen from '../../core/screen';
import EmailPane from '../../field/email/email_pane';
import SocialButtonsPane from '../../field/social/social_buttons_pane';
import PaneSeparator from '../../core/pane_separator';
import { requestPasswordlessEmail } from '../../connection/passwordless/actions';
import { renderEmailSentConfirmation } from '../../connection/passwordless/email_sent_confirmation';
import { renderSignedInConfirmation } from '../../core/signed_in_confirmation';
import { useBigButtons } from '../../connection/social/index';
import * as l from '../../core/index';

const useSocialBigButtons = (m) => {
  const limit = l.connections(m, "passwordless", "email").count() === 0 ? 5 : 3;
  return useBigButtons(m, limit);
}

const Component = ({i18n, model}) => {
  const social = l.hasSomeConnections(model, "social")
    ? <SocialButtonsPane
        bigButtons={useSocialBigButtons(model)}
        instructions={i18n.html("socialLoginInstructions")}
        labelFn={i18n.str}
        lock={model}
        signUp={false}
      />
   : null;

  const email = l.hasSomeConnections(model, "passwordless", "email")
    ? <EmailPane lock={model} placeholder={i18n.str("emailInputPlaceholder")} />
    : null;

  // TODO: instructions can't be on EmailPane beacuse it breaks the CSS,
  // all input fields needs to share a parent so the last one doesn't have
  // a bottom margin.
  //
  // Maybe we can make new PasswordlessEmailPane component.
  const emailInstructionsI18nKey = social
    ? "passwordlessEmailAlternativeInstructions"
    : "passwordlessEmailInstructions";

  const headerText = i18n.html(emailInstructionsI18nKey) || null;
  const header = email && headerText && <p>{headerText}</p>;

  const separator = social && email
    ? <PaneSeparator />
    : null;

  return <div>{social}{separator}{header}{email}</div>;
};

export default class SocialOrEmailLoginScreen extends Screen {

  constructor() {
    super("socialOrEmail");
  }
<commit_msg>Pass missing i18n prop to a passwordless EmailPane<commit_after>import React from 'react';
import Screen from '../../core/screen';
import EmailPane from '../../field/email/email_pane';
import SocialButtonsPane from '../../field/social/social_buttons_pane';
import PaneSeparator from '../../core/pane_separator';
import { requestPasswordlessEmail } from '../../connection/passwordless/actions';
import { renderEmailSentConfirmation } from '../../connection/passwordless/email_sent_confirmation';
import { renderSignedInConfirmation } from '../../core/signed_in_confirmation';
import { useBigButtons } from '../../connection/social/index';
import * as l from '../../core/index';

const useSocialBigButtons = (m) => {
  const limit = l.connections(m, "passwordless", "email").count() === 0 ? 5 : 3;
  return useBigButtons(m, limit);
}

const Component = ({i18n, model}) => {
  const social = l.hasSomeConnections(model, "social")
    ? <SocialButtonsPane
        bigButtons={useSocialBigButtons(model)}
        instructions={i18n.html("socialLoginInstructions")}
        labelFn={i18n.str}
        lock={model}
        signUp={false}
      />
   : null;

  const email = l.hasSomeConnections(model, "passwordless", "email")
    ? <EmailPane
        i18n={i18n}
        lock={model}
        placeholder={i18n.str("emailInputPlaceholder")}
      />
    : null;

  // TODO: instructions can't be on EmailPane beacuse it breaks the CSS,
  // all input fields needs to share a parent so the last one doesn't have
  // a bottom margin.
  //
  // Maybe we can make new PasswordlessEmailPane component.
  const emailInstructionsI18nKey = social
    ? "passwordlessEmailAlternativeInstructions"
    : "passwordlessEmailInstructions";

  const headerText = i18n.html(emailInstructionsI18nKey) || null;
  const header = email && headerText && <p>{headerText}</p>;

  const separator = social && email
    ? <PaneSeparator />
    : null;

  return <div>{social}{separator}{header}{email}</div>;
};

export default class SocialOrEmailLoginScreen extends Screen {

  constructor() {
    super("socialOrEmail");
  }

{'fraction_non_alphanumeric': 0.14209375759047851, 'fraction_numerical': 0.009715812484819043, 'mean_word_length': 3.8051341890315054, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '6957533', 'n_tokens_mistral': 1213, 'n_tokens_neox': 1193, 'n_words': 296}