GrahamMorbyDev

GrahamMorbyDev

Full Stack PHP Developer at Movemee Ltd

Member Since 3 Years Ago

Stevenage UK

Experience Points
17,310
Total
Experience

2,690 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
109
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 4
17,310 XP
Apr
03
1 month ago
Activity icon

Replied to Stripe Elements Mounted Vs Method

@martinbean you sir are my hero and have saved me! Perfect answer and perfect explanation! Thank you so much

Apr
02
1 month ago
Activity icon

Replied to Stripe Elements Mounted Vs Method

@martinbean

My Stripe component is as follows

<template>
  <div>
    <label for="card-element">Credit or debit card</label>
    <div id="card-element" ref="cardElement">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
    <button class="btn btn-primary mt-3" v-on:click="triggerPay()">Pay £{{amountprop / 100}}</button>
  </div>
</template>
<script>
export default {
  components: {},
  props: ["amountprop"],
  data() {
    return {
      cardElement: null,
      stripe: null,
      stripe_pk: "secret",
      test: process.env.STRIPE_PK
    };
  },
  mounted() {
    // Create a Stripe client.
    const stripe = window.Stripe(this.stripe_pk);
    // Create an instance of Elements.
    var elements = stripe.elements();
    // Create an instance of the card Element.
    var style = {
      base: {
        color: "#32325d",
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#aab7c4"
        }
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };
    var card = elements.create("card", { style: style });

    // Handle real-time validation errors from the card Element.
    card.addEventListener("change", function(event) {
      var displayError = document.getElementById("card-errors");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });
    // Add an instance of the card Element into the `card-element` <div>.
    card.mount(this.$refs.cardElement);
  },
  created() {},
  computed: {},
  methods: {
    triggerPay() {
      this.$emit("triggerPay");
    },
    cardPayment(client_secret, data) {
        console.log(client_secret);
        console.log(data);
        Stripe.handleCardPayment(client_secret, data).then(function(result) {
            console.log(result)
        });
    }
  },
  watch: {}
};
</script>
<style>
</style>

Then the pay button fires an event and triggers the method

Which contains

this.$refs.stripeCardElement
            .cardPayment(response.data.data.client_secret, card)

So I feel like I'm back in the same place as the cardPayment() method isn't aware of the mounted stuff

Also to clarify I'm loading stripe as a JS Script in the head element

Activity icon

Replied to Stripe Elements Mounted Vs Method

I think it makes sense

mounted() {
    this.cardElement.mount(this.$refs.cardElement);
  },

This Im guessing is the reference point and the parent picks this up here

this.$refs.stripeCardElement.confirmCardPayment

Am I on the right track??

Activity icon

Started a new Conversation Stripe Elements Mounted Vs Method

Hey Guys

I have a mounted Stripe element that Im loading on the mounted() hook

 // Create a Stripe client.
    const stripe = Stripe("secret");

    // Create an instance of Elements.
    const elements = stripe.elements();
    // Create an instance of the card Element.
    const style = {
      base: {
        color: "#32325d",
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#aab7c4"
        }
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };

    let card = elements.create("card", { style: style });
    // Add an instance of the card Element into the `card-element` <div>.
    card.mount("#card-element");

    // Handle real-time validation errors from the card Element.
    card.addEventListener("change", function(event) {
      var displayError = document.getElementById("card-errors");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });

Standard one from the docs

I then roll a method to do a payment intent and handle the card payment

So my issue is that the below code doesn't seem to be aware of the stripe instance

 let card = Element;
          if (selectedCard) {
            card = {
              payment_method: selectedCard
            };
          }

          //var stripe = Stripe("secret");
          stripe.handleCardPayment(response.data.data.client_secret, card).then(function(result) {
                console.log(result)
            });

Is there a way to have the whole page be aware of that mounted instance, I have tried adding them to data points to no avail

Thanks

Apr
01
1 month ago
Activity icon

Awarded Best Reply on Vue Persist Not Working On Page Reload

So I fixed the following, the issue seemed to be my array

so instead of

array: []

I had to go for

Object: {}

And now it all works great

Activity icon

Replied to Vue Persist Not Working On Page Reload

So I fixed the following, the issue seemed to be my array

so instead of

array: []

I had to go for

Object: {}

And now it all works great

Mar
27
1 month ago
Activity icon

Started a new Conversation Vue Persist Not Working On Page Reload

Hey Guys

I have installed vue-persist and loading it via vuex.

Every stores ok yet when I reload the browser nothing is being persisted back to the store.

import VuexPersist from "vuex-persist";

const vuexLocal = new VuexPersist({
    key: 'App',
    storage: window.localStorage
  });

export default{
    state: {
        pageTitle: "",
	array: []
      },
    getters:{
        getPageTitle(state) {
            return state.pageTitle;
        }
    },
    actions: {},
    mutations:{
        pageTitle(state, payload) {
            this.state.pageTitle = payload
        },
       },
    plugins: [vuexLocal.plugin]
}

Any help would be grateful

Feb
13
3 months ago
Activity icon

Replied to Slug URL Vs Normal URL's

It was that easy!

Awesome thank you

Activity icon

Started a new Conversation Slug URL Vs Normal URL's

I have a blog and the client wishes for URL's to be

/{{slug}}

Of course that then causes the issue with normal URL's

/login
/register

They all cause it to say not found

Is there a way to do this, its something I've yet to come up against

Feb
05
3 months ago
Activity icon

Replied to Pass Data From Blade Form To Vue Component

Thats where I have got to , of course it grabs values on page load and not when the modal is called. So Im now trying to watch something

Activity icon

Started a new Conversation Pass Data From Blade Form To Vue Component

Hey guys

So I have a form thats built in blade and at the bottom I call a modal that contains a vue component

I want to pass the values from the form to the vue component

So my form:

<form method="post" action="{{url('/create')}}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group mb-5">
                                        <!-- Label -->
                                        <label for="contactName">
                                            Title
                                        </label>
                                        <!-- Input -->
                                        <input type="files" class="form-control" placeholder="The title of the article"
                                            id="title" name="title" />
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-5">
                                        <!-- Label -->
                                        <label for="contactName">
                                            Display article on:
                                        </label>
                                        <!-- Input -->
                                        <select name="site" id="site" class="form-control" >
                                            <option value="0">All sites</option>
                                            <option value="1">This site only</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-5">
                                        <!-- Label -->
                                        <label for="contactEmail">
                                            Featured img
                                        </label>
                                        <br>
                                        <!-- Input -->
                                        <input type="file" id="image" name="image" />
                                    </div>
                                </div>
                            </div>
                            <!-- / .row -->
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group mb-7 mb-md-9">
                                        <!-- Label -->
                                        <label for="contactMessage">
                                            Article
                                        </label>
                                        <textarea name="editor" id="editor" rows="10" cols="80">
                        This is my textarea to be replaced with CKEditor.
                    </textarea>
                    <script>
                        CKEDITOR.replace('editor', {
                           filebrowserImageUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
                           filebrowserUploadMethod: 'form'
                       });
                   </script>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-auto">
                                    <!-- Submit -->
                                    <button type="submit" name="action" value="create" class="btn btn-primary lift">
                                        Submit
                                    </button>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                                        Launch demo modal
                                      </button>
                                </div>
                            </div>
                            <!-- / .row -->
                        </form>

and my component loads like so

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="app">
              <example-component></example-component>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

The component has nothing in it right now

Dec
12
5 months ago
Activity icon

Awarded Best Reply on Invalid_client - Lumen Passport

So I found that

setting the header to

content-type: application/json seemed to fix the issue

Activity icon

Replied to Invalid_client - Lumen Passport

So I found that

setting the header to

content-type: application/json seemed to fix the issue

Activity icon

Replied to Invalid_client - Lumen Passport

Ok here is an update

The data im sending is

{
    "grant_type": "password",
    "client_id": 2,
    "client_secret": "pqvuOJXddWqy7uT3jLRsYqgJfFDCabY0Cjw7rvbH",
    "password": "password",
    "username": "[email protected]"
    "scope": ""
}

The client ids are for test only, they are the Password Grant Client details and I'm getting a return error of

{
    "error": "unsupported_grant_type",
    "error_description": "The authorization grant type is not supported by the authorization server.",
    "hint": "Check that all required parameters have been provided",
    "message": "The authorization grant type is not supported by the authorization server."
}
Activity icon

Started a new Conversation Invalid_client - Lumen Passport

I have installed Lumen Passport using the method outlined in the below URL:

https://medium.com/@yomiomotoso/integrating-laravel-passport-in-your-lumen-project-with-example-1c2b8719c30

I have gone through most of the steps and they all work until I get to log in and get an OAuth/token. I'm sending the client secret and client_id generated by the passport install as well as the username and password and the return I'm getting is

{
    "error": "invalid_client",
    "error_description": "Client authentication failed",
    "message": "Client authentication failed"
}

The URL im hitting is

/v1/oauth/token

I'm guessing this is a part of passport and I'm not sure which code to share with you, so any help would be welcomed