'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-fd2bbf0b.js');
const store = require('./store-d6f21087.js');
require('./index-81aa1bcb.js');
require('./getHandlebarsHelpers-7b2b1728.js');
require('./_commonjsHelpers-a5111d61.js');
require('./logic-d8c34975.js');
require('./index-1f381af8.js');
require('./localforage-af1b8c0e.js');

const appLoginCss = "app-login .login-wrapper{position:relative;z-index:3;max-width:400px;margin:0 auto;padding:30px 0}app-login .logo{display:block;margin:0 auto;width:100%;height:200px;max-width:300px;padding:30px 0}app-login h3{font-size:1em;font-weight:bold}app-login .login-banner{position:relative;background-position:center 80%;background-repeat:no-repeat;background-size:100%;display:block;width:80%;max-width:600px;height:50vh;margin:0 auto}app-login .login-banner floodbot-speech-bubble{position:absolute;bottom:-30px;left:30px;max-width:540px}app-login .waves{background:url(\"/assets/images/waves.png\") repeat-x center;background-size:contain;height:30px;width:100%;position:absolute;top:-25px;left:0;right:0}app-login .login-content{position:absolute;bottom:0;left:0;right:0;width:100%;height:40%;padding-left:0 !important;padding-right:0 !important;background:var(--ion-color-primary)}app-login .login-content ion-list{background:transparent !important;max-width:420px;margin:0 auto}app-login .login-content ion-item{background:transparent !important;--background:transparent}app-login #login-types{--ion-background:var(--ion-color-primary)}app-login #login-types ion-button{display:block;width:100%;--background:var(--ion-color-dark);--padding-start:10px;--padding-end:10px;--padding-top:15px;--padding-bottom:15px;text-transform:initial}app-login #login-types ion-button ion-label{color:#fff}app-login #join-now ion-button{float:right}app-login #join-now:after{display:block;content:\"\";width:10px;height:180px;position:absolute;left:-10px;top:15px;border-right:1px solid var(--ion-color-medium);z-index:1}@media only screen and (max-width: 576px){app-login #join-now:after{display:block;width:calc(100% - 30px);left:15px;border-right:none;border-top:1px solid var(--ion-color-medium)}app-login .login-banner{background-position-y:20vh}}app-login .login-wrap{padding:15px;max-width:420px;width:90%;margin:0 auto}app-login a,app-login p{font-size:1.2em;color:var(--ion-color-light)}app-login .item{padding:0}app-login #forgot-button{width:180px;display:block;margin:0 auto !important;font-weight:bold}app-login .social-media-login{text-align:center;padding:20px}app-login .social-media-login .social-bubble{height:auto;width:3.5em;height:3.5em;display:flex;justify-content:center;border-radius:50%;margin:0 auto}app-login .social-media-login .social-bubble ion-icon{width:2.5em;height:3.5em;color:#ffffff}app-login .social-media-login .social-bubble:hover{cursor:pointer}app-login .create-account-login{text-align:center}app-login .create-account-login p{font-size:2em}app-login .create-account-login ion-button button.button-md{font-size:1em;padding:1em 2em}app-login .terms{font-size:0.8em;text-align:center;line-height:25px}app-login .terms a{font-weight:bold;text-decoration:none}app-login .terms a:hover{text-decoration:underline;cursor:pointer}app-login .form-buttons{position:relative;width:100%;padding-top:15px;display:flex;justify-content:space-between}app-login .form-buttons .cancel-button{position:absolute;left:0}app-login .verification-sent{margin:0 auto;display:block;max-width:420px;width:90%;position:relative}app-login .verification-sent .icon-bubble{display:block;margin:0 auto;height:125px;width:125px;border-radius:50%;padding:15px}app-login .verification-sent .icon-bubble ion-icon{display:block;margin:0 auto;width:95px;height:95px;color:#fff}app-login .verification-sent h2{font-size:2em;font-weight:bold;color:#fff;text-align:center;padding:0 0 15px 0;margin:0}app-login .verification-sent .form-buttons{justify-content:flex-end}";

let AppLogin = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.fireenjinTrigger = index.createEvent(this, "fireenjinTrigger", 7);
    this.isUsingEmail = false;
    this.isLoading = false;
    this.bannerImage = "/assets/images/logo-full.png";
    this.error = false;
    this.speech = "Hi there, I'm FloodBot, let's get you logged in.";
  }
  async login(event, type = "email") {
    var _a, _b;
    this.error = "";
    this.email = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.email;
    this.speech =
      type === "email"
        ? `I sent you an email login link to ${this.email}, click on the link
    in the email to finish logging in.`
        : `Logging you in via ${type.charAt(0).toUpperCase() + type.substring(1)}, please follow the promps in the pop-up window.`;
    this.fireenjinTrigger.emit({
      name: "login",
      payload: {
        type,
        email: this.email,
      },
    });
    if (type === "email")
      this.emailSent = true;
  }
  showLoginButtons() {
    this.speech = "Hi there, I'm FloodBot, let's get you logged in.";
    this.isUsingEmail = false;
    this.emailSent = false;
  }
  showLoginForm() {
    this.speech = `Enter your email address and I will send you an email login link.`;
    this.isUsingEmail = true;
  }
  async componentDidLoad() {
    var _a;
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    if ((_a = store.state === null || store.state === void 0 ? void 0 : store.state.session) === null || _a === void 0 ? void 0 : _a.uid) {
      const routerEl = document.querySelector("ion-router");
      routerEl.push("dashboard");
    }
    if (this.token)
      this.fireenjinTrigger.emit({
        name: "login",
        payload: {
          type: "token",
          token: this.token,
        },
      });
  }
  render() {
    return [
      index.h("ion-content", { class: "truck-background" }, index.h("div", { class: "login-wrapper" }, index.h("ion-icon", { class: "logo", src: "/assets/logo/logo.svg" }), this.emailSent ? (index.h("div", { class: "verification-sent" }, index.h("div", { class: "icon-bubble" }, index.h("ion-icon", { name: "mail" })), index.h("h2", null, "Email Sent!"), index.h("div", { class: "form-buttons" }, index.h("ion-button", { fill: "clear", color: "medium", class: "cancel-button", onClick: () => this.showLoginButtons() }, "Cancel"), index.h("ion-button", { color: "secondary", onClick: () => this.login(event, "email") }, "Resend Email", index.h("ion-icon", { slot: "end", name: "send" }))))) : this.isUsingEmail ? (index.h("ion-card", { class: {
          "login-wrap": true,
          "is-loading": this.isLoading,
        } }, index.h("fireenjin-form", { name: "login", class: "creds-login", hideControls: true }, this.error ? (index.h("div", { class: "error-msg" }, index.h("ion-icon", { name: "alert" }), this.error)) : null, index.h("fireenjin-input", { ref: (el) => (this.emailInputEl = el), id: "email-input", label: "Email Address", labelPosition: "stacked", value: this.email, name: "email", required: true }), index.h("div", { class: "form-buttons" }, index.h("ion-button", { fill: "clear", color: "medium", onClick: () => this.showLoginButtons() }, "Cancel"), index.h("ion-button", { color: "secondary", class: "submit-button", type: "submit" }, "Send Email", index.h("ion-icon", { slot: "end", name: "send" })))))) : (index.h("ion-list", { id: "login-types", lines: "none", class: "ion-padding-horizontal" }, index.h("ion-item", null, index.h("ion-button", { expand: "block", onClick: (event) => this.login(event, "google") }, index.h("ion-icon", { slot: "start", name: "logo-google" }), "Login with Google")), index.h("ion-item", null, index.h("ion-button", { expand: "block", onClick: () => this.showLoginForm() }, index.h("ion-icon", { slot: "start", name: "mail" }), "Login with Email")))))),
    ];
  }
};
AppLogin.style = appLoginCss;

exports.app_login = AppLogin;

//# sourceMappingURL=app-login.cjs.entry.js.map