@skhemata/skhemata-crowdfunding-campaign/dist/src/contribution/LoginContribution.js

Skhemata Crowdfunding Campaign Web Component. This web component provides crowdfunding campaign functionality (reward/donation based) for a website.

import { __decorate } from "tslib";
/* eslint-disable import/no-extraneous-dependencies */
import '@power-elements/stripe-elements';
import { html, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { Bulma } from '@skhemata/skhemata-css';
import { loginRequest } from '../utils/requests';
import { GlobalStyles } from '../styles/global';
export class LoginContribution extends LitElement {
    constructor() {
        super(...arguments);
        this.submitDisabled = false;
        //   firstUpdated() {}
        this.handleLogin = async () => {
            var _a, _b;
            if (this.shadowRoot) {
                const email = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="email"]');
                const password = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input[type="password"]');
                if (email.value && password.value) {
                    const info = {
                        email: email.value,
                        password: password.value,
                    };
                    const res = await loginRequest('/authenticate', 'POST', info);
                    const data = await res.json();
                    console.log('User Info: ', data);
                    if (data.auth_token !== undefined) {
                        window.localStorage.setItem('skhemataToken', data.auth_token);
                    }
                    this.handleAuthStateChange();
                    this.requestUpdate();
                }
            }
        };
    }
    render() {
        return html `
      <div
        class="field formWrapper is-flex is-flex-direction-column is-align-items-flex-end is-flex-gap-4"
      >
        <div class="is-flex is-flex-gap-4">
          <div class="control">
            <input class="input is-size-5" type="email" placeholder="Email" />
          </div>
          <div class="control">
            <input
              class="input is-size-5"
              type="password"
              placeholder="Password"
            />
          </div>
        </div>

        <button
          class="button btnRadius has-background-success has-text-white is-size-5 py-0 px-6"
          @click="${this.handleLogin}"
        >
          Login
        </button>
      </div>
    `;
    }
}
LoginContribution.styles = [
    Bulma,
    GlobalStyles,
    css `
      .formWrapper div {
        width: 100%;
      }
    `,
];
__decorate([
    property({ type: Boolean })
], LoginContribution.prototype, "submitDisabled", void 0);
__decorate([
    property({ type: Boolean })
], LoginContribution.prototype, "authState", void 0);
__decorate([
    property({ type: Function })
], LoginContribution.prototype, "handleAuthStateChange", void 0);
//# sourceMappingURL=LoginContribution.js.map