Frontend Password validation with Regex

To do a frontend password validation with Regex we need 2 things, a form with a password field, and a js that does the job.

  1. the fields:
    [code]
    <form class=”form-horizontal” action=”” method=”POST” role=”form”>

    <div class=”form-group”>
    <label for=”password” class=”col-md-4 control-label”>New Password</label>

    <div class=”col-md-6″>
    <input type=”password” name=”password” id=”password” class=”form-control pwd” pattern=”^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$”>
    <div class=”progress”>
    <div class=”progress-bar progress-bar-danger” id=”password-progress-bar” role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 0″>
    <span class=”sr-only” >0% Complete (danger)</span>
    <span id=”progress-bar-text” style=”color:#000;”></span>
    </div>
    </div>
    <p class=”control-label” style=”text-align: left;” id=”changethecolor”>A password should contain at <span class=”sixChar”>minimum 10 letters</span>, <span class=”specialChar”>a special character</span>, at least an Uppercase letter and <span class=”number”>at least a number.</span></p>
    </div>
    </div>
    <div class=”form-group{{ $errors->has(‘password_confirmation’) ? ‘ has-error’ : ” }}”>
    <label for=”password-confirm” class=”col-md-4 control-label”>Confirm New Password</label>
    <div class=”col-md-6″>
    <input id=”password-confirm” type=”password” class=”form-control” name=”password_confirmation” required>
    </div>
    </div>

    <div class=”form-group”>
    <div class=”col-md-7″>
    <button type=”submit” class=”btn btn-primary update-password pull-right” style=”margin-right: 33px;”>
    <i class=”fa fa-btn fa-pencil”></i> Change Password
    </button>
    </div>
    <div class=”col-md-3″>
    <button class=”btn btn-danger” style=”margin-left: 50px;” onclick=”window.history.back()”>
    <i class=”fa fa-btn”></i> Cancel
    </button>
    </div>
    </div>
    </form>

    [/code]

  2. The js.
    [code]
    function changePasswordProgressBar(ev) {
    // less than 8 characters
    var wrost = 5,
    // minimum 8 characters
    bad = /^(?=.{6,}).*/,
    //Alpha Numeric plus minimum 8
    good = /^(?=.*?[a-z]).{5,}$/, //pattern=”^(?=.*[A-Za-z])(?=.*d)(?=.*[$@$!%*#?&])[A-Za-zd$@$!%*#?&]{6,}$”
    //Must contain at least one upper case letter, one lower case letter and (one number OR one special char).
    better = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{10,}$/,
    betterOne = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    betterTwo = /^(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    betterthree = /^(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-+/=)(]).{10,}$/,
    //Must contain at least one upper case letter, one lower case letter and (one number AND one special char).
    best = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-/=)+(]).{10,}$/,
    password = $(ev.target).val(),
    strength = ‘0’,
    progressClass = ‘progress-bar progress-bar-‘,
    ariaMsg = ‘0% Complete (danger)’,
    $progressBarElement = $(‘#password-progress-bar’),
    $something = $(‘#changethecolor’);

    if (best.test(password) === true) {
    strength = ‘100%’;
    progressClass += ‘success’;
    ariaMsg = ‘100% Complete’;
    } else if (better.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    } else if (betterOne.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (betterTwo.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (betterthree.test(password) === true) {
    strength = ‘80%’;
    progressClass += ‘info’;
    ariaMsg = ‘Almost Complete’;
    }
    else if (good.test(password) === true) {
    strength = ‘50%’;
    progressClass += ‘warning’;
    ariaMsg = ‘50% Complete’;
    } else if (bad.test(password) === true) {
    strength = ‘30%’;
    progressClass += ‘warning’;
    ariaMsg = ‘Still too low’;
    } else if (password.length >= 1 && password.length <= wrost) {
    strength = ‘10%’;
    progressClass += ‘danger’;
    ariaMsg = ‘Too low’;
    } else if (password.length < 1) {
    strength = ‘0’;
    progressClass += ‘danger’;
    ariaMsg = ‘0% Complete’;
    }

    $progressBarElement.removeClass().addClass(progressClass);
    $progressBarElement.attr(‘aria-valuenow’, strength);
    $progressBarElement.css(‘width’, strength);
    $progressBarElement.find(‘span.sr-only’).text(ariaMsg);
    }

    $(document).ready(function () {
    $(“.pwd”).first().on(‘keyup’, changePasswordProgressBar);
    });
    [/code]

show chosen image immediately.

In this tutorial I’ll show you a small Javascript code which you can use to add an image and show it immediately.

First things first. Adding the input and the image tag.

[code]
<input type=”file” id=”file” name=”file” onchange=”readURL(this);” required><span id=”filename”></span>
<img src=”” alt=”” id=”imediateImage” class=”img-responsive”>

[/code]

here we have to make sure we added the onchange attribute and adding the readURL(this) function.

Then we just add the javascript.

[code]

//Show image imediately
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#imediateImage’)
.attr(‘src’, e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

[/code]

the added js takes the input tag with the onchange attribute on it and looks for an image, once the image is added it shows it to the image tag down below with the id on immediateImage.

if you use another id or don’t like this one than you can do it but changing the id on both the img tag and on the js.

 

store image in folder and get them to the frontend

In this Article we will see how we are able to add images or other files to our projects folder and show them to the frontend.

  1. The Controller,

[code]public function store(Request $request)
{
$store = new Post;

//image
if($request->hasFile(‘file’)){
$filename = $request->file->getClientOriginalName();
$filename = $request->file(‘file’)->storeAs(‘/images’, $filename, ‘public’);
$store->image = $filename;
}…[/code]

2. The model

[code]

class Post extends Model
{

public function getImageAttribute($value)
{
return asset(“storage/$value”);
}

}

[/code]

3. The view

[code]<img src=”{{ $posts->image }}” alt=”post image” width=”50px” id=”imediateImage”>[/code]

show backend validation errors

it’s as simple as this: Just post the following code to a view.

@if ($errors->any())
<div class=”alert alert-danger”>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

Form validaton Laravel V5.5

open up the CLI or command line, and add this command to it

php artisan make:request StoreBlogPost

Notice: give it a name that is not that same as a model or controller, because you’ll have to add it to the controller.
After then it will create a new file at app/Http/Requests open this file and add this to it

/**
 * Get the validation rules that apply to the request.
 *
 * @return array
 */
public function rules()
{
    return [
        'title' => 'required|unique:posts|max:255',
        'body' => 'required',
    ];
}

This means that you are validation the title form and the body form of course you can add as many as you want.

at the authorize() method return it as true or add more validation for the authorization there.

public function authorize()
{
return true;
}

at your controller add the file or request name before the $request variable.

Notice: You’ll have to add the request file to this controller so add this: use AppHttpRequestsPostToPage ;

public function store(PostToPage $request)
{ … }

this is all you need to do

Create Symbolic link between storage and public folder in Laravel

ln -s /home/vagrant/Code/Project/project-app/storage/app/public /home/vagrant/Code/Project/project-app/public/storage

ln -s D:/xampp/htdocs/personaliteti.com/storage/app/public D:/xampp/htdocs/personaliteti.com/public/storage

ln -s /home/lagjjail/personalitetet/storage/app/public /home/lagjjail/public_html/public/storage

or try

php artisan storage:link

Echo it like this:

echo asset('storage/file.png');

Call Dynamic css and javascript in app.blade.php and co.

to call a dynamic asset in laravel you simply add the asset or resource like this:

[code]<link href=”{{ asset(‘css/style.css’) }}” rel=”stylesheet”>[/code]

refering to the css directory or folder and calling for example the style.css

or for javascript files use:

[code]<script src=”{{ asset(‘js/jquery-ui.min.js’) }}”></script>[/code]

Get checkbox options from database in laravel

The view:

[code]

<div class=”form-group”>
@foreach($publicationPurposes as $publicationPurpose)
<div class=”checkbox”>
<label>
<input name=”purpose[]” id=”purpose{{ $publicationPurpose->id }}” type=”checkbox” value=”{{ $publicationPurpose->id }}” >
{{ $publicationPurpose->name }}
</label>
</div>
@endforeach
</div>

[/code]

The database:

checkbox from database laravel

the Controller:

[code]

$publicationPurposes = PublicationPurpose::with([‘publicationPurposeMediaType’ => function($query){
$query->with([‘publicationPurposeTags’, ‘mediaType’]);
}])->get();
debug($publicationPurposes);

return view(‘the-view’)->with([‘publicationPurposes’ => $publicationPurposes,]);

[/code]

 

Validate radio buttons with jquery

In this short article I’ll show you how you can validate some simple radio-buttons using jQuery, other then that we will, also scroll to the top and show a simple red text with the a message.

As you can see on the code below it’s a simple form with some radio-buttons and a submit button.

[code]

<form>
<input type=’radio’ name=’image_quality’ disabled=’disabled’>
<input type=’radio’ name=’image_quality’>
<input type=’radio’ name=’image_quality’>
<input type=’submit’ id=’save’>

<div class=”error-message”></div>
</form>

[/code]

Then we vavlidate them using the jQuery bellow, this code says, when the save button is clicked, execute the function and look if the input with the name image_quality is not chaged (notice the ! mark), then do what is bellow, with is scroll to the top with the [code]window.scrollTo(0,0)[/code] functions to the Coordinates 0,0 which means all the way to the top, and also applend a paragraf to the divider with the class error-message which says please choose a radio button and return false so don’t let the form execute.

[code]

//validate the image qualification
$(‘#save’).click(function(){
if (!$(“input[name=’image_quality’]:checked”).val()) {
window.scrollTo(0, 0);
$( “.error-message” ).append( “<p style=’color:red;’>please choose a radio button</p>” );
return false;
}
})
//validate the image qualification

[/code]

That is all. All you need is this small peace of jQuery.

 

 

Laravel rating system with 5 stars

This is a short tutorial on how to make a rating system with 5 stars basically a CRUD system. In this case we will rate images but of course you can use it for whatever you want.

First is the View so to show the stars you can use different Frontend code but we’ll show you one just in case.  here is one from codepen 

It’s pretty simple. the HTML

[code]

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class=”rating”>
<input type=”radio” id=”star5″ name=”rating” value=”5″ /><label class = “full” for=”star5″ title=”Awesome – 5 stars”></label>
<input type=”radio” id=”star4″ name=”rating” value=”4″ /><label class = “full” for=”star4″ title=”Pretty good – 4 stars”></label>
<input type=”radio” id=”star3″ name=”rating” value=”3″ /><label class = “full” for=”star3″ title=”Meh – 3 stars”></label>
<input type=”radio” id=”star2″ name=”rating” value=”2″ /><label class = “full” for=”star2″ title=”Kinda bad – 2 stars”></label>
<input type=”radio” id=”star1″ name=”rating” value=”1″ /><label class = “full” for=”star1″ title=”Sucks big time – 1 star”></label>
</fieldset>

[/code]

And the CSS

[code]

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating {
border: none;
float: left;
}

.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: “f005”;
}

.rating > .half:before {
content: “f089”;
position: absolute;
}

.rating > label {
color: #ddd;
float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

[/code]

Once the view is complete and it’s shown you need to add a new column on the database, we just assume you know the drill. You either add the column with the migration technique or directly on the database, at the end it’s must look something like this.

rating-column

for the migration you can use a code like this:

[code]

Schema::create(‘Images’, function(Blueprint $table)
{
$table->smallInteger(‘rating’);
});

[/code]

Next is the controller, of course we assume you know Laravel and by now you already have made all routs ready. You can create a new method or add the rating to the store function. in my case i used the store function and added the rating to the inserting process it looked something like this.

[code]

public function store(CreateStoryFormRequest $request)
{

DB::transaction(function (){
$createImages= iamges::create([

‘rating’ => $request->input(‘image_quality’),
]);

[/code]

It should by now fill the database with the right information.

But we also want to get the information for the database, so we need an edit method. the view will look something like this:

[code]

<label for=”rating”>Image quality</label>
<div class=”form-group”>
<fieldset class=”rating”>
<input type=”radio” id=”star5″ name=”image_quality” value=”5″ {{ $images->rating == ‘5’ ? ‘checked’ : ” }}/>
<label class = “full” for=”star5″ title=”Awesome – 5 stars”></label>

<input type=”radio” id=”star4″ name=”image_quality” value=”4″ {{ $images->rating == ‘4’ ? ‘checked’ : ” }}/>
<label class = “full” for=”star4″ title=”Pretty good – 4 stars”></label>

<input type=”radio” id=”star3″ name=”image_quality” value=”3″ {{ $images->rating == ‘3’ ? ‘checked’ : ” }} />
<label class = “full” for=”star3″ title=”Meh – 3 stars”></label>

<input type=”radio” id=”star2″ name=”image_quality” value=”2″ {{ $images->rating == ‘2’ ? ‘checked’ : ” }} />
<label class = “full” for=”star2″ title=”Kinda bad – 2 stars”></label>

<input type=”radio” id=”star1″ name=”image_quality” value=”1″ {{ $images->rating == ‘1’ ? ‘checked’ : ” }} />
<label class = “full” for=”star1″ title=”Sucks big time – 1 star”></label>
</fieldset>
</div>

[/code]

To update you need to add the folowing to your update controller [code]$story->all = $request->input(‘all’);[/code]

Or like this with the complete controller:

[code]

public function update(donatorStoryRequest $request, $id)
{

$story->rating = $request->input(‘image_quality’);
$story->save();

[/code]

Basically this is it, now you can read, rate and edit the rating.