Login Modal¶
The <login-modal> webcomponent is used to render a modal with a login form inside. It is recommended to use a login-modal-opener webcomponent in order to open this modal. Internally it makes a use of a modal webcomponent and login-form webcomponent.
Note: This webcomponent is always present on any page and does not need additional markup or code besides an opener in order to use it.
Attributes¶
none
Event Bus events¶
This webcomponent listens to the following events with the Event Bus:
Example¶
<login-modal>
<h-modal class="modal-wrapper_s" hidden>
<h-modal-header>
<b>Log in</b>
<h-modal-close class="btn btn_icon">
<h-icon
icon-name="icon-x"
role="button"
size="l"
clickable
></h-icon>
</h-modal-close>
</h-modal-header>
<h-modal-body>
<login-form>
<reactive-form>
<form class="pb-xs-1" id="form-123">
<control-connector
min="3"
required
class="control"
validationMode="change"
validation-name-label="E-mail address"
>
<h-control>
<h-control-label class="control__label">
<label class="label" for="email-123">E-mail address</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input controlId="email-123" controlName="email">
<h-input-control type="email"></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<control-connector
validationMode="change"
required
class="control"
validation-name-label="Password"
>
<h-control>
<h-control-label class="control__label">
<label class="label" for="password-123">Password</label>
</h-control-label>
<h-control-content class="control">
<h-control-element class="control__element">
<h-input
controlId="password-123"
controlName="password"
type="password"
>
<h-input-control></h-input-control>
</h-input>
</h-control-element>
<control-errors></control-errors>
</h-control-content>
</h-control>
</control-connector>
<p class="align_right font_size-s mb-xs-2">
<span class="link link_secondary">
You don't remember password?
</span>
</p>
<button type="submit" class="btn btn_primary btn_full-width mb-xs-2">
Log in
</button>
<p class="font_size-s align_center mb-xs-2">
You don't have account yet?
<span class="link link_no-underline">
<b>Register</b>
</span>
</p>
</form>
</reactive-form>
</login-form>
</h-modal-body>
</h-modal>
</login-modal>