Login Form¶
The <login-form> webcomponent is used to render a login form. Internally it makes a use of various form webcomponents listed below the example.
Attributes¶
none
Example¶
<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>