Fran Islas's questions

I'm having a middleware problem when I run my app in GAE. This is responsible for performing a basic validation in queries to my api. What it basically does is take an "api_token" that is sent in the header of each query and checks if it corresponds to any user. If it is NOT valid, it returns a 401 code with a text "Not authorized". The strange thing is that it works correctly locally but on the server it always returns 401. Analyzing the behavior a bit, apparently the token query to the db does not return any user. Below I leave some tests that I did, by which I show that the user exists, the token is being sent in the header and corresponds to the same one stored in the db.

Middleware:

public function handle($request, Closure $next)
    {

        $user = User::where('api_token', $request->header('api_token'))->first();

        if ($user === null) {
            return response()->json ('No autorizado', 401);
        }

        return $next($request);
    }

Apparently $user is always null.

Request capture from the browser:

Capture request and response from Postman:

User capture with its corresponding api_token in the DB:

Important: There is NO connection problem with the DB, if I disable the middleware for the routes the queries work perfectly. Thank you very much in advance, greetings.

I am making use of the "vue2-google-maps" package in an application developed with Laravel 5.7. In this case I am creating a component named google-map . Within this component gmap-autocomplete and gmap-map are used . The component is registered in app.js and both the map and the autocomplete input work correctly. The problem is that the input is located above the map and what I want is for it to be inside the map.

I am currently achieving this:

I want it to look like the following image:

This would normally be achieved (without using vue or that package) with the following lines:

let inputSearch = document.getElementById('pac-input');
searchBoxAdd = new google.maps.places.SearchBox(inputSearch );
myMap.controls[google.maps.ControlPosition.TOP_CENTER].push(searchBoxAdd );

But in this case it is not the same. Based on the documentation, I saw that I can access the "map" object by adding ref="mapRef"it to my gmap-map component and adding

mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {
      // En este punto ya tengo mi objeto map.
    })
  }

Based on this information I tried to do the following:

mounted () {
        this.$refs.mapRef.$mapPromise.then((map) => {
          let inputSearch = document.getElementById('pac-input');
          searchBoxAdd = new google.maps.places.SearchBox(inputSearch );
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(searchBoxAdd );
        })

But it still does not load the input inside the map and in the console it shows me the following error:

controls.js:118 Uncaught (in promise) TypeError: Cannot read property 'zIndex' of undefined

I leave my main component, which would be "google-maps"

<template>
    <div>
        <div>
            <h2>Search and add a marker</h2>
            <label>
                <div class="form-inline">
                    <gmap-autocomplete
                        class="form-control"
                        @place_changed="setPlace">
                    </gmap-autocomplete>
                    <button @click="addMarker" class="btn btn-primary btn-flat">Add</button>
                </div>
            </label>
            <br/>
        </div>
        <br>
        <gmap-map ref="mapRef"
            :center="center"
            :zoom="12"
            style="width:100%;  height: 400px;"
        >
            <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                @click="center=m.position"
            ></gmap-marker>
        </gmap-map>
    </div>
</template>

<script>
    import {gmapApi} from 'vue2-google-maps';

    export default {
        name: "GoogleMap",

        data() {
            return {
                // default to Montreal to keep it simple
                // change this to whatever makes sense
                center: { lat: 45.508, lng: -73.587 },
                markers: [],
                places: [],
                currentPlace: null
            };
        },

        mounted() {
            this.geolocate();
        },

        methods: {
            // receives a place object via the autocomplete component
            setPlace(place) {
                this.currentPlace = place;
            },
            addMarker() {
                if (this.currentPlace) {
                    const marker = {
                        lat: this.currentPlace.geometry.location.lat(),
                        lng: this.currentPlace.geometry.location.lng()
                    };
                    this.markers.push({ position: marker });
                    this.places.push(this.currentPlace);
                    this.center = marker;
                    this.currentPlace = null;
                }
            },
            geolocate: function() {
                navigator.geolocation.getCurrentPosition(position => {
                    this.center = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                });
            }
        }
    };
</script>

Thanks. Cheers!

As the title says, I need to validate that the number entered in an input is suitable for a percentage. I'm trying to do it with a regular expression but so far I can't get it to work correctly. For example, when entering numbers without decimals, it tells me that it is incorrect, when it would be a valid value for a percentage.

Values ​​that I consider allowed:

• Matches 100, 100.0 and 100.00
• Numbers like 0, 15, 99, 3.1, 21.67
• ,, letters or any other type of characters should NOT be allowed . Just numbers and a dot. Only precision of 2 decimal places maximum.

The regular expression that I managed to build and am using is:

 (^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)

Here is a small example of the code:

function checkValue(){
  var strporc = document.getElementById("txt_porcentaje").value
  var isValid =  strporc.match(/^(100(\.0{1,2})?|([0-9]?[0-9](\.[0-9]{1,2})))$/) == null ? false:true;
  console.log("Permitido: "+isValid);
 }

<label for="txt_porcentaje">Porcentaje:</label>
<input type="text" id="txt_porcentaje" oninput="checkValue();">

In advance thanks for the help!