JSFiddle - React, Tailwind, and code Playground

by zoomieos

JavaScript

<template>
    <f7-page no-toolbar no-navbar no-swipeback login-screen>
        <f7-login-screen-title>To-do List App</f7-login-screen-title>
        <f7-list form>
            <f7-list-item>
                <f7-label>Email:</f7-label>
                <f7-input type="email" placeholder="Email"></f7-input>
            </f7-list-item>
            <f7-list-item>
                <f7-label>Password</f7-label>
                <f7-input type="password" placeholder="Password"></f7-input>
            </f7-list-item>
        </f7-list>
        <f7-list>
            <f7-list-button @click="login">Sign In</f7-list-button>
            <f7-list-button link="/reg/">Sign Up</f7-list-button>
            <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
        </f7-list>
    </f7-page>
</template>
<script>
    import { f7Page, f7LoginScreenTitle, f7List, f7ListItem, f7Label, f7Input, f7ListButton, f7BlockFooter } from 'framework7-vue';
    import firebase from 'firebase';
    export default {
        components: {
            f7Page,
            f7LoginScreenTitle,
            f7List,
            f7ListItem,
            f7Label,
            f7Input,
            f7ListButton,
            f7BlockFooter,
        },
        name: 'login',
        data() {
            return {
                email: 'string',
                password: '',
            };
        },
        methods: {
            login: function () {
                firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
                    function (user) {
                        console.log('You are log in');
                    },
                    function (err) {
                        console.log('Ooops...' + err.message);
                    }
                )
            }
        },
    };
</script>