<commit_before>import { Component, h, Prop } from '@stencil/core';
import { Certificate, TExtension, EnumOIDs } from '../../utils/crypto';
import dayjs from 'dayjs';

@Component({
  tag: 'pv-certificate-viewer',
  styleUrls: [
    '../../styles/reset.css',
    '../../styles/theme.css',
    '../../styles/system.css',
    'certificate-viewer.css',
  ],
  shadow: true,
})
export class CertificateViewer {
  cert: Certificate;

  @Prop() certificate: string;

  componentWillLoad() {
    try {
      this.cert = new Certificate(this.certificate, true);
    } catch (error) {
      console.error(error);
    }
  }

  renderRowTitle(title: string) {
    return (
      <tr class="title">
        <td colSpan={2} class="h6 stroke_grey_3_border">
          {title}
        </td>
      </tr>
    );
  }

  renderRowValue(title: string, value: string | number | any[]) {
    if (
      typeof value !== 'string'
      && typeof value !== 'number'
      && !Array.isArray(value)
    ) {
      return null;
    }

    return (
      <tr>
        <td class="b3 text_grey_5">
          {title}:
        </td>
        <td class="b3">
          {Array.isArray(value) ? value : value.toString()}
        </td>
      </tr>
    );
  }

  renderRowExtensionValue(extension: TExtension) {
    if (typeof extension.value === 'string') {
      return this.renderRowValue('Value', extension.value);
    }

    switch (extension.oid) {
      case EnumOIDs.BasicConstraints: {
        return [
          this.renderRowValue('cA', String(extension.value.cA)),
          this.renderRowValue('pathLenConstraint', extension.value.pathLenConstraint),
        ];
      }

      case EnumOIDs.NetscapeCertificateType:
      case EnumOIDs.KeyUsage: {
        return this.renderRowValue('Value', extension.value.join(', '));
      }

      case EnumOIDs.ExtendedKeyUsage: {
        return this.renderRowValue(
          'Values',
          extension.value.map((value) => (
            <p class="b3">
              {value.name} ({value.oid})
            </p>
          )),
        );
      }

      case EnumOIDs.CertificatePolicies: {
        return this.renderRowValue(
          'Values',
          extension.value.map((value) => (
            <p class="b3">
              {value.name
                ? `${value.name} (${value.oid})`
                : value.oid
              }
            </p>
          )),
        );
      }

      case EnumOIDs.CRLDistributionPoints: {
        return this.renderRowValue(
          'Paths',
          extension.value.map((value) => {
            if (!value.distributionPoint) {
              return null;
            }

            return value.distributionPoint.map((valuePoint) => {
              if (valuePoint.type === 6) {
                return (
                  <p class="b3">
                    <a href={valuePoint.value}>
                      {valuePoint.value}
                    </a>
                  </p>
                );
              }

              return (
                <p class="b3">
                  {valuePoint.value}
                </p>
              );
            });
          }),
        );
      }

      case EnumOIDs.CertificateAuthorityInformationAccess: {
        return this.renderRowValue(
          'Paths',
          extension.value.map((value) => {
            const accessLocation: Record<string, any> = value.accessLocation;

            if (accessLocation.type === 6) {
              return (
                <p class="b3">
                  {value.accessMethod}: <a href={accessLocation.value}>{accessLocation.value}</a>
                </p>
              );
            }

            return (
              <p class="b3">
                {value.accessMethod}: {accessLocation.value}
              </p>
            );
          }),
        );
      }

      case EnumOIDs.NameConstraints: {
        return [
          this.renderRowValue(
            'Permitted Values',
            extension.value.permitted.map((value) => {
              if (value.type === 2) {
                return (
                  <p class="b3">
                    <a href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 7) {
                return (
                  <p class="b3">
                    <a href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 4) {
                return (
                  <p class="b3">
                    {value.value.map((valueType) => `${valueType.name}=${valueType.value}`).join(', ')}
                  </p>
                );
              }

              return (
                <p class="b3">
                  {value.value}
                </p>
              );
            }),
          ),
        ];
      }

      case EnumOIDs.SubjectAlternativeName: {
        return [
          this.renderRowValue(
            'Values',
            extension.value.map((value) => {
              if (value.type === 2) {
                return (
                  <p class="b3">
                    <a href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 7) {
                return (
                  <p class="b3">
                    <a href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 4) {
                return (
                  <p class="b3">
                    {value.value.map((valueType) => `${valueType.name}=${valueType.value}`).join(', ')}
                  </p>
                );
              }

              return (
                <p class="b3">
                  {value.value}
                </p>
              );
            }),
          ),
        ];<commit_msg>chore(certificate-viewer): Link color added.<commit_after>import { Component, h, Prop } from '@stencil/core';
import { Certificate, TExtension, EnumOIDs } from '../../utils/crypto';
import dayjs from 'dayjs';

@Component({
  tag: 'pv-certificate-viewer',
  styleUrls: [
    '../../styles/reset.css',
    '../../styles/theme.css',
    '../../styles/system.css',
    'certificate-viewer.css',
  ],
  shadow: true,
})
export class CertificateViewer {
  cert: Certificate;

  @Prop() certificate: string;

  componentWillLoad() {
    try {
      this.cert = new Certificate(this.certificate, true);
    } catch (error) {
      console.error(error);
    }
  }

  renderRowTitle(title: string) {
    return (
      <tr class="title">
        <td colSpan={2} class="h6 stroke_grey_3_border">
          {title}
        </td>
      </tr>
    );
  }

  renderRowValue(title: string, value: string | number | any[]) {
    if (
      typeof value !== 'string'
      && typeof value !== 'number'
      && !Array.isArray(value)
    ) {
      return null;
    }

    return (
      <tr>
        <td class="b3 text_grey_5">
          {title}:
        </td>
        <td class="b3">
          {Array.isArray(value) ? value : value.toString()}
        </td>
      </tr>
    );
  }

  renderRowExtensionValue(extension: TExtension) {
    if (typeof extension.value === 'string') {
      return this.renderRowValue('Value', extension.value);
    }

    switch (extension.oid) {
      case EnumOIDs.BasicConstraints: {
        return [
          this.renderRowValue('cA', String(extension.value.cA)),
          this.renderRowValue('pathLenConstraint', extension.value.pathLenConstraint),
        ];
      }

      case EnumOIDs.NetscapeCertificateType:
      case EnumOIDs.KeyUsage: {
        return this.renderRowValue('Value', extension.value.join(', '));
      }

      case EnumOIDs.ExtendedKeyUsage: {
        return this.renderRowValue(
          'Values',
          extension.value.map((value) => (
            <p class="b3">
              {value.name} ({value.oid})
            </p>
          )),
        );
      }

      case EnumOIDs.CertificatePolicies: {
        return this.renderRowValue(
          'Values',
          extension.value.map((value) => (
            <p class="b3">
              {value.name
                ? `${value.name} (${value.oid})`
                : value.oid
              }
            </p>
          )),
        );
      }

      case EnumOIDs.CRLDistributionPoints: {
        return this.renderRowValue(
          'Paths',
          extension.value.map((value) => {
            if (!value.distributionPoint) {
              return null;
            }

            return value.distributionPoint.map((valuePoint) => {
              if (valuePoint.type === 6) {
                return (
                  <p class="b3">
                    <a class="text_secondary" href={valuePoint.value}>
                      {valuePoint.value}
                    </a>
                  </p>
                );
              }

              return (
                <p class="b3">
                  {valuePoint.value}
                </p>
              );
            });
          }),
        );
      }

      case EnumOIDs.CertificateAuthorityInformationAccess: {
        return this.renderRowValue(
          'Paths',
          extension.value.map((value) => {
            const accessLocation: Record<string, any> = value.accessLocation;

            if (accessLocation.type === 6) {
              return (
                <p class="b3">
                  {value.accessMethod}: <a class="text_secondary" href={accessLocation.value}>{accessLocation.value}</a>
                </p>
              );
            }

            return (
              <p class="b3">
                {value.accessMethod}: {accessLocation.value}
              </p>
            );
          }),
        );
      }

      case EnumOIDs.NameConstraints: {
        return [
          this.renderRowValue(
            'Permitted Values',
            extension.value.permitted.map((value) => {
              if (value.type === 2) {
                return (
                  <p class="b3">
                    <a class="text_secondary" href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 7) {
                return (
                  <p class="b3">
                    <a class="text_secondary" href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 4) {
                return (
                  <p class="b3">
                    {value.value.map((valueType) => `${valueType.name}=${valueType.value}`).join(', ')}
                  </p>
                );
              }

              return (
                <p class="b3">
                  {value.value}
                </p>
              );
            }),
          ),
        ];
      }

      case EnumOIDs.SubjectAlternativeName: {
        return [
          this.renderRowValue(
            'Values',
            extension.value.map((value) => {
              if (value.type === 2) {
                return (
                  <p class="b3">
                    <a class="text_secondary" href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 7) {
                return (
                  <p class="b3">
                    <a class="text_secondary" href={`https://censys.io/ipv4?q=${value.value}`}>
                      {value.value}
                    </a>
                  </p>
                );
              }

              if (value.type === 4) {
                return (
                  <p class="b3">
                    {value.value.map((valueType) => `${valueType.name}=${valueType.value}`).join(', ')}
                  </p>
                );
              }

              return (
                <p class="b3">
                  {value.value}
                </p>
              );
            }),
          ),
        ];
{'fraction_non_alphanumeric': 0.14269725797425853, 'fraction_numerical': 0.0051163162522983455, 'mean_word_length': 1.121057985757884, 'pattern_counts': {'":': 0, '<': 105, '<?xml version=': 0, '>': 123, 'https://': 8, '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': '2649276', 'n_tokens_mistral': 3540, 'n_tokens_neox': 3359, 'n_words': 557}