laravel 7 eye hidden - php

Question

i try to add hide eye in password in laravel project in register. i find code in codepen but when i add
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
Register
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-12">
<h1 style="border-bottom: solid yellow;"><strong>Formulaire d'inscription</strong></h1>
<div class="card-body">
<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
#csrf
<h3><strong>Vos identifiants</strong></h3>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">Adresse mail</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">Mot de passe</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" required autocomplete="new-password">
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
<div class="input-group-addon">
<i class="fa fa-eye-slash" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirmation mot de passe</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<h3><strong>Informations personnelles</strong></h3>
<div class="form-group row">
<label for="sex" class="col-md-4 col-form-label text-md-right">Civilité</label>
<div class="col-md-1">
<div class="form-check">
<input class="form-check-input" type="radio" name="sexe" id="exampleRadios1" value="M" checked>
<label class="form-check-label" for="exampleRadios1">
Male
</label>
</div>
</div>
<div class="col-md-1">
<div class="form-check">
<input class="form-check-input" type="radio" name="sexe" id="exampleRadios2" value="F">
<label class="form-check-label" for="exampleRadios2">
Female
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Prénom</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
#error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="firstname" class="col-md-4 col-form-label text-md-right">Nom</label>
<div class="col-md-6">
<input id="firstname" type="text" class="form-control #error('firstname') is-invalid #enderror" name="firstname" value="{{ old('firstname') }}" required autocomplete="firstname" autofocus>
#error('firstname')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="address" class="col-md-4 col-form-label text-md-right">Adresse</label>
<div class="col-md-6">
<input id="address" type="text" class="form-control #error('address') is-invalid #enderror" name="address" value="{{ old('address') }}" required autocomplete="address" autofocus>
#error('address')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="city" class="col-md-4 col-form-label text-md-right">Ville</label>
<div class="col-md-6">
<input id="city" type="text" class="form-control #error('city') is-invalid #enderror" name="city" value="{{ old('city') }}" required autocomplete="city" autofocus>
#error('city')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="zipcode" class="col-md-4 col-form-label text-md-right">Code postale</label>
<div class="col-md-6">
<input id="zipcode" type="text" class="form-control #error('zipcode') is-invalid #enderror" name="zipcode" value="{{ old('zipcode') }}" required autocomplete="zipcode" autofocus>
#error('zipcode')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-md-4 col-form-label text-md-right">Numéro de téléphone</label>
<div class="col-md-6">
<input id="phone" type="text" class="form-control #error('phone') is-invalid #enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone" autofocus>
#error('phone')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="birthday" class="col-md-4 col-form-label text-md-right">Date de naissance</label>
<div class="col-md-6">
<input id="birthday" type="date" class="form-control #error('birthday') is-invalid #enderror" name="birthday" value="{{ old('birthday') }}" required autocomplete="birthday" autofocus>
#error('birthday')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="pseudo" class="col-md-4 col-form-label text-md-right">Nom d'utilisateur (pseudo)</label>
<div class="col-md-6">
<input id="pseudo" type="text" class="form-control #error('pseudo') is-invalid #enderror" name="pseudo" value="{{ old('pseudo') }}" required autocomplete="pseudo" autofocus>
#error('pseudo')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="avatar" class="col-md-4 col-form-label text-md-right"></label>
<div class="col-md-6">
<input id="avatar" type="file" class="form-control #error('avatar') is-invalid #enderror" name="avatar" autocomplete="avatar" autofocus>
#error('avatar')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-4">
<div class="g-recaptcha"
data-sitekey="{{env('GOOGLE_RECAPTCHA_KEY')}}">
</div>
<span role="alert" class="invalid-feedback d-block">
#error('g-recaptcha-response')
<strong>{{ $errors->first('g-recaptcha-response') }}</strong>
#enderror
</span>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
Crée mon compte
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#show_hide_password a").on('click', function(event) {
event.preventDefault();
if($('#show_hide_password input').attr("type") == "text"){
$('#show_hide_password input').attr('type', 'password');
$('#show_hide_password i').addClass( "fa-eye-slash" );
$('#show_hide_password i').removeClass( "fa-eye" );
}else if($('#show_hide_password input').attr("type") == "password"){
$('#show_hide_password input').attr('type', 'text');
$('#show_hide_password i').removeClass( "fa-eye-slash" );
$('#show_hide_password i').addClass( "fa-eye" );
}
});
});
</script>
#endsection
#section('scripts')
<script src='https://www.google.com/recaptcha/api.js'></script>
#endsection
not have something, i try to add code from there :
https://codepen.io/Qanser/pen/dVRGJvm but its not work for me i think i do something not good someone can help me add eye? Nothing appears, it's been 2 hours already I'm on it I can't take it anymore XD Someone
you can see my screen shot in this link : ibb.co/W2kQTj8
Have mercy on a noob help me XD

Answer 1

make sure that the page layouts.app that you extend have the link to fa eye class like one bellow
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-eye"></i>
</body>
</html>