<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

<!-- Components -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/peculiar/peculiar.css">

<style>
  body {
    height: 100vh;
    background: #6D7D87;
  }

  section {
    max-width: 660px;
    width: calc(100% - 20px);
    margin: 20px auto;
  }
</style>

<section></section>

<script>
  var fortifyEnrollment = document.createElement('peculiar-fortify-enrollment');
  // All possible propertiest you can find on the documentation page
  // https://fortifyapp.com/docs/webcomponents/fortify-enrollment/readme#properties
  fortifyEnrollment.debug = true;
  fortifyEnrollment.filters = {};

  fortifyEnrollment.addEventListener('creationCancel', () => {
    console.log('creationCancel');
  });

  fortifyEnrollment.addEventListener('creationClose', () => {
    console.log('creationClose');
  });

  fortifyEnrollment.addEventListener('creationSuccess', (event) => {
    console.log(event);
  });

  fortifyEnrollment.addEventListener('creationFail', (event) => {
    console.log(event);
  });
  
  // http://localhost:3000/docs/webcomponents/fortify-enrollment/readme#form-policy
  fortifyEnrollment.formPolicy = {
    subject: {
      fields: {
        CN: {
          required: true,
          readOnly: true,
          defaultValue: 'kubernetes',
        },
        O: {
          required: false,
          readOnly: true,
          defaultValue: 'kubernetes org.',
        },
        OU: {
          required: false,
          readOnly: true,
          defaultValue: 'kubernetes org. unit',
        },
        C: {
          required: false,
          readOnly: true,
          defaultValue: "US"
        },
        L: {
          required: false,
          readOnly: true,
          defaultValue: "kubernetes world"
        },
        ST: {
          required: false,
          readOnly: true,
          defaultValue: "kubernetes west"
        }
      }
    },
    publicKey: {
      fields: {
        signatureAlgorithm: {
          required: true,
          readOnly: true,
          defaultValue: "RSA-2048"
        },
        hashAlgorithm: {
          required: true,
          readOnly: true,
          defaultValue: "SHA-256"
        }
      }
    },
    options: {
      fields: {
        useSelfSignedCertificate: {
          required: false,
          readOnly: true,
          defaultValue: true
        }
      }
    }
  };

  var parent = document.getElementsByTagName('section')[0];

  parent.insertBefore(fortifyEnrollment, parent.firstChild);
</script>