Hi!
I’ve just added @okta/okta-signin-widget to my Angular SPA, and it renders something like:
<span>
<input id="okta-signin-username" type="text">
</span>
I style my Angular SPA using the Angular Material library , which requires a different DOM structure:
<mat-form-field>
<input id="okta-signin-username" type="text" matInput>
</mat-form-field>
Does anyone know how to accomplish this? Because of Angular’s component factories, I can’t simply re-structure the DOM with typical javascript like below:
this.widget.on('ready', (context) => {
// This WON'T work!
const username = document.getElementById('okta-signin-username');
const field = document.createElement('mat-form-field');
const parent = username.parentElement;
field.appendChild(username);
parent.appendChild(field);
});
Sure, this’ll change the DOM, but this circumvents Angular’s component factories, which are necessary for producing the complete structure:
<mat-form-field>
<div class="mat-form-field-wrapper ...">
<div class="mat-form-field-flex ...">
<div class="mat-form-field-infix ...">
<input id="okta-signin-username" type="text" matInput>
</div>
</div>
</div>
</mat-form-field>
Does anyone know how to achieve this? I’m currently playing around with Angular’s ComponentFactorResolver as mentioned in https://angular.io/guide/dynamic-component-loader. I think I’ll be trying to combine the above javascript with the use of a component factory - but maybe the widget will have issues if I try that? Maybe there’s an easier way?
Could I perhaps create my own sign-in form and move the inputs from the widget into it once rendered?
Thanks for any hints and help!