hemat_solution/src/app/login/login.component.html
2024-08-21 10:20:59 +07:00

158 lines
6.4 KiB
HTML

<div class="app-content content">
<div class="content-overlay"></div>
<div class="content-wrapper">
<div class="content-header row"></div>
<div class="content-body">
<section class="row flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-lg-4 col-md-8 col-10 box-shadow-2 p-0 center-card">
<div class="card border-grey border-lighten-3 px-1 py-1 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<img
class="brand-logo"
src="assets/images/logo/smart.png"
alt="branding logo"
height="100%" width="75%"
/>
<!-- <h3 class="brand-text" style="color: #000000; margin: 0; font-weight: 600;">
Smart Building
</h3> -->
</div>
</div>
<div class="card-content">
<div class="card-body">
<form
class="form-horizontal"
[formGroup]="loginForm"
(ngSubmit)="tryLogin()"
>
<fieldset
class="form-group position-relative has-icon-left"
>
<input
type="text"
formControlName="email"
class="form-control input-custom"
[ngClass]="{
'is-invalid': submitted && f.email.errors
}"
id="user-name"
placeholder="Your Username"
required
/>
<div class="form-control-position">
<i class="la la-user"></i>
</div>
<div
*ngIf="submitted && f.email.errors"
class="invalid-feedback"
>
<div *ngIf="f.email.errors.required">
Username is required
</div>
</div>
</fieldset>
<fieldset
class="form-group position-relative has-icon-left"
>
<input
type="password"
placeholder="Enter Password"
formControlName="password"
class="form-control input-custom"
[ngClass]="{
'is-invalid': submitted && f.password.errors
}"
/>
<div class="form-control-position">
<i class="la la-key"></i>
</div>
<div
*ngIf="submitted && f.password.errors"
class="invalid-feedback"
>
<div *ngIf="f.password.errors.required">
Password is required
</div>
</div>
</fieldset>
<div class="form-group row">
<div
class="col-md-6 col-12 text-center text-sm-left pr-0"
>
<!-- <fieldset>
<div
class="icheckbox_square-blue"
id="icheckbox"
(click)="addCheckbox($event)"
style="position: relative"
>
<input
type="checkbox"
class="chk-remember"
formControlName="rememberMe"
name="remember-me"
id="remember-me"
style="position: absolute; opacity: 0"
/>
<ins
class="iCheck-helper"
style="
position: absolute;
top: 0%;
left: 0%;
display: block;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: rgb(255, 255, 255);
border: 0px;
opacity: 0;
"
></ins>
</div>
<label class="lb-remember" for="remember-me"
>Remember Me</label
>
</fieldset> -->
</div>
<div
class="col-md-6 col-12 float-sm-left text-center text-sm-right"
>
<!-- <a href="recover-password.html" class="card-link"
>Forgot Password?</a
> -->
</div>
</div>
<button
type="submit"
class="btn btn-outline-info btn-block btn-custom-login"
>
<i class="fa fa-refresh fa-spin" *ngIf="submitted"></i>
<i class="feather ft-unlock" *ngIf="!submitted"></i> Login
</button>
</form>
</div>
<p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
>
<span>(v@2024.08.21.2)</span>
</p>
<!-- <div class="card-body">
<a
[routerLink]="['/register']"
class="btn btn-outline-danger btn-block"
><i class="la la-user"></i> Register</a
>
</div> -->
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>