metamask-login-vue-component.vue

<template>
  <Button v-if="moralis" type="button" class="p-button-outlined p-button-primary" id="entryButton" @click="loginWithMoralis(moralis)">
      <img alt="logo" :src="`/images/${buttonData.icon}`" style="width: 1.5rem" />
      <span class="ml-2 font-bold">{{buttonData.copy}}</span>
  </Button>
  <Button  v-else class="p-button-outlined">
    <ProgressSpinner style="width:20px;height:20px" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"/>
  </Button>
</template>
<script>
export default {
  data() {
    return {
      isMobileDevice: false,
      hasMetaMask: false,
      
    }
  },
  props: ['moralis'],
  methods: {
    async loginWithMoralis(moralis) {
      let user = this.$store.user;
      if (!user) {
        try {
          // we need to make it so that if it is a mobile device it shows the walletconnect login button. 
          if (this.isMobileDevice) {
            // use wallet connect if it is a mobile device.
            user = await moralis.authenticate({signingMessage: "Log in to Unlokbl", provider: 'walletconnect' });
          } else {
            // use typical metamask extension if it is on desktop browser.
            user = await moralis.authenticate({ signingMessage: "Log in to unlokbl using Moralis"});
          }
          this.$store.commit('setUser', user);
        } catch(error) {
          // do some user interface stuff here. 
          console.log(error);
        }
      }
    }
  },
  computed:{
    buttonData() {
      if (this.moralis) {
        if(this.isMobileDevice) {
          return {
            copy: 'Connect',
            icon: 'walletconnect-circle-black.svg'
          }
        }
        if(this.hasMetaMask) {
          return {
            copy: 'Login With MetaMask',
            icon: 'metamask-fox.svg'
          }
        }

        return {
          copy: '',
          icon: ''
        }

      }
    }
  },
  mounted() {
    if (process.client) {
      if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        this.isMobileDevice = true;
      }
      if (window.ethereum) {
        this.hasMetaMask = true;
      }
    }
  }
}
</script>
<style lang="scss">

</style>