<template>
  <f7-page name="signin">
    <f7-navbar title="Sign in"></f7-navbar>
    <div class="align-center">
      <f7-list no-hairlines-md>
        <f7-list-input
          :value="email"
          @input="email=$event.target.value"
          label="E-mail"
          type="email"
          placeholder="Your e-mail"
          clear-button
        ></f7-list-input>

        <f7-list-input
          :value="password"
          @input="password=$event.target.value"
          label="Password"
          type="password"
          placeholder="Your password"
          clear-button
        ></f7-list-input>
      </f7-list>

      <f7-block>
        <f7-button fill @click="signIn">Sign in</f7-button>
        <br />
        <div style="text-align:center;">
          <f7-link v-if="show_resend_email" @click="resendEmail" :color="color(time_left)">
            Resend Confirmation Email
            <span v-if="time_left>0">&nbsp; {{time_left}}</span>
          </f7-link>
          <br />
          <f7-link @click="userConsent">Don't have an account? Sign up</f7-link>
          <br />
          <f7-link @click="forgetPassword">Forget Password</f7-link>
        </div>
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import firebase from "firebase";
export default {
  data() {
    return {
      email: null,
      password: null,
      time_left: -1,
      app_agree: false
    };
  },
  mixins: [mixin],
  computed: {
    show_resend_email() {
      return this.$store.getters.show_resend_email;
    }
  },
  methods: {
    myFunction() {
      console.log("checkbook clicked");
    },
    userConsent() {
      var user_agree = false;
      console.log("User consent");
      var dialog = this.$f7.dialog
        .create({
          title: "App User's Consent Required",
          text: "",
          content:
            "<div class='page' data-page='home' style='height: 300px; position:relative'>" +
            "<div class='page-content infinite-scroll-content' style='overflow: auto'>" +
            "<div class='list simple-list'>" +
            "<h2>Privacy Policy</h2>" +
            "<p>Swift Alliance builds the CityGists App as a social network app. This SERVICE is provided by Swift Alliance at no cost and is intended for use as is.</p>" +
            "<p> " +
            "This page is used to inform visitors regarding " +
            "our policies with the collection, use, and " +
            "disclosure of Personal Information if anyone decided to use " +
            "our Service. " +
            "  </p> <p> " +
            "If you choose to use our Service, then you agree " +
            "to the collection and use of information in relation to this " +
            "policy. The Personal Information that we collect is " +
            "used for providing and improving the Service. " +
            "we will not use or share your " +
            "information with anyone except as described in this Privacy " +
            "Policy. " +
            "  </p> <p> " +
            "The terms used in this Privacy Policy have the same meanings " +
            "as in our Terms and Conditions, which is accessible at " +
            "CityGists unless otherwise defined in this Privacy " +
            "Policy. " +
            "  </p> <p><strong>Information Collection and Use</strong></p> <p> " +
            "For a better experience, while using our Service, " +
            "we may require you to provide us with certain " +
            "personally identifiable information, including but not limited to Contacts in your Phonebook,Your Phone Number,Your Profile Picture. The " +
            "information that we request will be " +
            "securely saved on our secure Servers, we will never share these information without your permission. " +
            "<br> " +
            " your name, number, and your profile Picture will be available publicly to other users. " +
            "  </p> <p> " +
            "The app does use third party services that may collect " +
            "information used to identify you. " +
            "</p><div><p> " +
            "we want to inform you that whenever " +
            "you use our Service, in a case of an error in the " +
            "app we collect data and information (through third " +
            "party products) on your phone called Log Data. This Log Data " +
            "may include information such as your device Internet " +
            "Protocol (“IP”) address, device name, operating system " +
            "version, the configuration of the app when utilizing " +
            "our Service, the time and date of your use of the " +
            "Service, and other statistics. " +
            "  </p>  " +
            "  <p><strong>Permissions we request</strong></p> <p> " +
            "<ul> " +
            "  <li>Contacts: to be able to communicate with your Friends that are in your Contacts</li> " +
            "  <li>Camera: to be able to Take Pictures/Videos and to be able to make Video Calls.</li> " +
            "  <li>Microphpone: to be able to send Voice Messages and also to be able to make Voice/Video Calls.</li> " +
            "  <li>Storage: to save the Sent/Received Files in your Device</li> " +
            "</ul> " +
            "  </p> " +
            " " +
            "  <p><strong>Cookies</strong></p> <p> " +
            "Cookies are files with a small amount of data that are " +
            "commonly used as anonymous unique identifiers. These are " +
            "sent to your browser from the websites that you visit and " +
            "are stored on your device's internal memory. " +
            "  </p> <p> " +
            "This Service does not use these “cookies” explicitly. " +
            "However, the app may use third party code and libraries that " +
            "use “cookies” to collect information and improve their " +
            "services. You have the option to either accept or refuse " +
            "these cookies and know when a cookie is being sent to your " +
            "device. If you choose to refuse our cookies, you may not be " +
            "able to use some portions of this Service. " +
            "  </p> <p><strong>Service Providers</strong></p> <p> " +
            "we may employ third-party companies " +
            "and individuals due to the following reasons: " +
            "  </p> <ul><li>To facilitate our Service;</li> <li>To provide the Service on our behalf;</li> <li>To perform Service-related services; or</li> <li>To assist us in analyzing how our Service is used.</li></ul> <p> " +
            "we want to inform users of this " +
            "Service that these third parties have access to your " +
            "Personal Information. The reason is to perform the tasks " +
            "assigned to them on our behalf. However, they are obligated " +
            "not to disclose or use the information for any other " +
            "purpose. " +
            "  </p> <p><strong>Security</strong></p> <p> " +
            "we value your trust in providing us " +
            "your Personal Information, thus we are striving to use " +
            "commercially acceptable means of protecting it. But remember " +
            "that no method of transmission over the internet, or method " +
            "of electronic storage is 100% secure and reliable, and " +
            "we cannot guarantee its absolute security. " +
            "  </p> <p><strong>Links to Other Sites</strong></p> <p> " +
            "This Service may contain links to other sites. If you click " +
            "on a third-party link, you will be directed to that site. " +
            "Note that these external sites are not operated by " +
            "us. Therefore, we strongly advise you to " +
            "review the Privacy Policy of these websites. " +
            "we have no control over and assume no " +
            "responsibility for the content, privacy policies, or " +
            "practices of any third-party sites or services. " +
            "  </p> <p><strong>Children’s Privacy</strong></p> <p> " +
            "These Services do not address anyone under the age of 13. " +
            "we do not knowingly collect personally " +
            "identifiable information from children under 13. In the case " +
            "we discover that a child under 13 has provided " +
            "us with personal information, " +
            "we immediately delete this from our servers. If you " +
            "are a parent or guardian and you are aware that your child " +
            "has provided us with personal information, please contact " +
            "us so that we will be able to do " +
            "necessary actions. " +
            "  </p> <p><strong>Changes to This Privacy Policy</strong></p> <p> " +
            "we may update our Privacy Policy from " +
            "time to time. Thus, you are advised to review this page " +
            "periodically for any changes. we will " +
            "notify you of any changes by posting the new Privacy Policy " +
            "on this page. These changes are effective immediately after " +
            "they are posted on this page. " +
            "  </p> <p><strong>Contact Us</strong></p> <p> " +
            "If you have any questions or suggestions about " +
            "our Privacy Policy, do not hesitate to contact " +
            "us at support@CityGists.com " +
            "  </p>  " +
            "<div class='list media-list'>" +
            "<label class='item-checkbox item-content'>" +
            "<input type='checkbox' name='demo-media-checkbox' value ='1' />" +
            "<i class='icon icon-checkbox'></i>" +
            "<p>I agree with the above conditions.</p>" +
            "</label>" +
            "</div>" +
            "</div>" +
            "<div class='preloader infinite-scroll-preloader'></div>" +
            "</div>" +
            "</div>",

          buttons: [{ text: "Decline", close: true }, { text: "I Agree" }],
          onClick: (dialog, index) => {
            if (index == 1) {
              if (user_agree) {
                const app = this.$f7;
                //var payload = {};
                //payload.profileMessage = response;
                //this.$store.dispatch("deleteAccount");
                this.$f7router.navigate("/phoneverify/");
                this.$f7.dialog.close();
                app.panel.close();
              } else {
                this.$store.commit(
                  "setAlertMessage",
                  "Scroll to bottom page to accept Terms & Conditions before continuing. "
                );
              }
            } else {
            }
          },
          on: {
            open: function() {
              //console.log("OPEN");
            }
          }
        })
        .open();
      var $ = this.Dom7;
      $('[name="demo-media-checkbox"]').on("change", function(e) {
        var self = this;
        if (e.target.checked) {
          user_agree = true;
        } else {
          user_agree = false;
        }
      });
    },
    onCheckBoxChange() {
      console.log("am here");
    },
    getOS() {
      console.log("getos");
      var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
        windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
        iosPlatforms = ["iPhone", "iPad", "iPod"],
        os = null;

      if (macosPlatforms.indexOf(platform) !== -1) {
        os = "Mac OS";
      } else if (iosPlatforms.indexOf(platform) !== -1) {
        os = "iOS";
      } else if (windowsPlatforms.indexOf(platform) !== -1) {
        os = "Windows";
      } else if (/Android/.test(userAgent)) {
        os = "Android";
      } else if (!os && /Linux/.test(platform)) {
        os = "Linux";
      }

      return os;
    },

    forgetPassword() {
      // console.log("forgetPassword");
      const self = this;
      var auth = firebase.auth();
      if (this.email != null) {
        auth
          .sendPasswordResetEmail(this.email)
          .then(function() {
            // Email sent.
            self.$store.commit(
              "setAlertMessage",
              "An reset email has been sent"
            );
          })
          .catch(function(error) {
            self.$store.commit("setAlertMessage", error);
          });
      } else {
        self.$store.commit("setAlertMessage", "Please enter your email");
      }
    },
    color(timeleft) {
      if (timeleft <= 0) {
        return "#007aff";
      } else {
        return "gray";
      }
    },
    resendEmail() {
      const self = this;
      //console.log(self.time_left);
      if (this.time_left <= 0) {
        console.log("trigger resend");
        self.$store.dispatch("sendVerification");
        self.countDown();
      }
    },
    countDown() {
      const self = this;
      self.time_left = 20;
      var timer = setInterval(function() {
        self.time_left -= 1;
        console.log("time left", self.time_left);
        if (self.time_left <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    signIn() {
      console.log("signin");
      // this.showToastBottom('show toast')
      var payload = {};
      payload.email = this.email;
      payload.password = this.password;
      this.$store.dispatch("signIn", payload);
    }
  }
};
</script>
<style scoped>
.align-center {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  position: relative;
  /*background: #1b1e24;*/
  /* SIDEBAR */
  /* END SIDEBAR */
  /* CONTENT */
  /* END CONTENT */
  /* RTL CONTENT MODE */
  /* END RTL CONTENT MODE */
}
</style>>

</style>