import { Component, Prop } from "@stencil/core";
/**
* Standards based Authentication component coupled with opinionated backend micro-service.
*
* Basic usage example:
* ```html
* <script src="https://components.atajo.io/atajo-web-components.js"></script>
* <atajo-auth
* logo="https://www.bkb.co.za/wp-content/uploads/2018/01/BKB-nuwe-header.png"
* offline="true"
* />
* ```
*/
@Component({
tag: "atajo-auth",
styleUrl: "atajo-auth.scss",
shadow: true
})
export class AtajoAuthComponent {
@Prop() logo: string = "../../assets/images/placeholder.logo.png";
@Prop() offline: boolean = false;
@Prop() labelSignIn: string = "Sign In";
render() {
return (
<atajo-card>
<atajo-logo src={this.logo} />
<atajo-textfield label="Email Address" type="email" />
<atajo-textfield label="Password" type="password" />
<atajo-card-actions>
<atajo-button raised fullwidth>{this.labelSignIn}</atajo-button>
</atajo-card-actions>
</atajo-card>
);
}
}
|