I need a help on a project I am working on using Laravel. I am working on user profile page.

During user registration on a page, a user can choose to provide username or skip it. I have no problem with that. But I want on the user profile page, if the user wants to edit their details. I want the user to be able to edit and add his/her username in the profile user name for field, if only they doesn't have username already. But if the user has a username already, then, they can't change/edit their username. If they have username already, then on the user profile page, they username field should be read-only while displaying their username to them without being able to edit/change the username again from their end. This is my form username field code sample. A help will really be appreciated.

Thank you in advance.

<div >
<label for="username">@lang('Username')</label>
<input type="text"
       
       id="username"
       placeholder="(@lang('Enter username'))"
       name="username"
       value="{{ $edit ? $user->username : '' }}">

CodePudding user response：

For allowing the users who don't have username just for the UI:

document.getElementById("editUserName").addEventListener("click", enableUserNameEditing);

function enableUserNameEditing(){
  document.getElementById("username").disabled = false;
}

<div >
<label for="username">username</label>
<input type="text"
       
       id="username"
       placeholder="user name"
       name="username"
       value="john doe"
       disabled
       >
<button id='editUserName'>edit</button>
</div>

You should add validation server sided if user has already username don't update.

on the edit buttons and the JS you can add checks

$show_edit = empty($user->username) ? true : false;

now you can use this $show_edit variable to control the permissions for user to see show username field should behave:

<input type="text"
   
   id="username"
   placeholder="(@lang('Enter username'))"
   name="username"
   value="{{ $edit ? $user->username : '' }}"
   {{ $show_edit === false ? "disabled" : "" }}>

@if($show_edit)
   <button id='editUserName'>edit</button>
@endif
   

CodePudding user response：

Try using Laravel blade if statement directive to conditionally render the input field like this:

<div >
    <label for="username">@lang('Username')</label>
    @if($user->username ?? false)
    <input type="text"
           
           id="username"
           placeholder="(@lang('Enter username'))"
           name="noname"
           value="{{ $user->username }}" disabled>
    @else
    <input type="text"
           
           id="username"
           placeholder="(@lang('Enter username'))"
           name="username"
           value="{{ $edit ? $user->username : '' }}">
    @endif
</div>

I'm using disabled here because apart from making the field read-only it also prevents the field from being submitted. Use readonly="readonly" if you still want the read-only field to be submitted. Also, I changed the name of the read-only field so that even if it is edited by a hacker on the client and submitted, your server PHP script simply ignores it without errors (I'm assuming you don't want it submitted). If you still want to submit it, keep the correct name.

I'll also suggest that on your server side controller, you conditionally validate the username field for extra protection. E.g.

function update(Request $request, User $user) 
{
    if($user->username ?? false) {
        // ignore username field, validate other user input fields and update profile
    } else {
        // validate username field with other fields and update profile
    }
}

CAUTION

Any one with html knowledge can edit your html on a client browser and submit it. Chances are that a hacker will attempt this after highjacking another user session. Use Laravel csrf protection always to prevent this.