[SOLVED] Registration using Modal

[jlwegaba]

Hello Shield Team,
Thanks for the good work.

Am starting on my ci4 project and I want to be registering users. So i followed 333 for some instructions on how to add custom fields.

I have two problems

1. Failed to know where to use the following

use CodeIgniter\Shield\Entities\User;

$users = model('UserModel');
$user = new User([
    'username' => 'foo-bar',
    'email'    => 'foo.bar@example.com',
    'password' => 'secret plain text password',
    'first_name' => 'Pooya',
    'last_name' => 'Parsa',
]);
$users->save($user);

Should it be in my custom Model UsersModel?

2. Used Custom Validations but on submission i get
   Error "Undefined offset: 1 "

FCPATH\vendor\codeigniter4\shield\src\Authentication\Passwords\NothingPersonalValidator.php at line 76

69             // Take username apart for use as search needles
70             $needles = $this->strip_explode($userName);
71 
72             // extract local-part and domain parts from email as separate needles
73             [
74                 $localPart,
75                 $domain,
76             ] = explode('@', $email);
77             // might be john.doe@example.com and we want all the needles we can get
78             $emailParts = $this->strip_explode($localPart);
79             if (! empty($domain)) {
80                 $emailParts[] = $domain;
81             }
82             $needles = array_merge($needles, $emailParts);

Here is my code

### AUTH

public array $views = [
        'login'                       => '\App\Views\Shield\login',
        'register'                    => '\App\Views\Admin\Users\all',

VIEW

<div class="card-body p-md-3 p-1">
              <div class="row mb-2"><div class="col"><button class="btn btn-sm btn-warning float-end" data-bs-toggle="modal" data-bs-target="#addUser_Modal">Create User</button></div></div>
          </div></div>

<!-- Add User Modal -->
<div class="modal fade" id="addUser_Modal" tabindex="-1" aria-labelledby="addUser_ModalLabel" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">User Registration</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="<?= base_url('billing/users/add'); ?>" method="post">
      <?= csrf_field() ?>
      <div class="modal-body">
      
                    <!-- First Name & Last Name -->
                    <div class="row">
                      <div class="col"> 
                        <div class="form-floating mb-3 g-2">
                        <input type="text" name="first_name" class="form-control" inputmode="text" autocomplete="first_name" id="floatingInput" placeholder="<?= lang('Auth.first_name') ?>" value="<?= old('first_name') ?>" required>
                        <label for="floatingInput">First Name</label>
                        </div>
                      </div>
                      <div class="col"> 
                        <div class="form-floating mb-3 g-2">
                        <input type="text" name="last_name" class="form-control" inputmode="text" autocomplete="last_name" id="floatingInput" placeholder="<?= lang('Auth.last_name') ?>" value="<?= old('last_name') ?>" required>
                        <label for="floatingInput">Last Name</label>
                        </div>
                      </div>
                    </div>

                    <!-- Email -->
                    <div class="form-floating mb-3 g-2">
                      <input type="email" class="form-control" name="email" inputmode="email" autocomplete="email" id="floatingInput" placeholder="<?= lang('Auth.email') ?>" value="<?= old('email') ?>" required>
                      <label for="floatingInput">Email</label>
                    </div>

                    <!-- Username -->
                    <div class="form-floating mb-3 g-2">
                      <input type="text" class="form-control" name="username" inputmode="text" autocomplete="username" id="floatingInput" placeholder="<?= lang('Auth.username') ?>" value="<?= old('username') ?>" required>
                      <label for="floatingInput">Username</label>
                    </div>
                    <!-- Password -->
                    <div class="row">
                    <div class="col">
                      <div class="form-floating mb-3 g-2">
                        <input type="password" class="form-control" name="password" inputmode="text" id="floatingInput" autocomplete="new-password" placeholder="<?= lang('Auth.password') ?>" required>
                        <label for="floatingInput">Password</label>
                      </div>
                    </div><div class="col">
                      <!-- Password (Again) -->
                    <div class="form-floating mb-3 g-2">
                        <input type="password" class="form-control" name="password_confirm" inputmode="text" autocomplete="new-password" id="floatingInput"  placeholder="<?= lang('Auth.passwordConfirm') ?>" required>
                        <label for="floatingInput">Retype Password</label>
                      </div>
                    </div></div>

                    <!-- Telephone -->
                    <div class="row">
                    <div class="col">
                      <div class="form-floating mb-3 g-2">
                        <input type="text" class="form-control" name="telephone" inputmode="text" id="floatingInput" autocomplete="telephone" placeholder="<?= lang('Auth.telephone') ?>" value="<?= old('telephone') ?>">
                        <label for="floatingInput">Telephone</label>
                      </div>
                    </div><div class="col">
                      <!-- WhatsApp No. -->
                    <div class="form-floating mb-3 g-2">
                        <input type="text" class="form-control" name="whatsapp" inputmode="text" autocomplete="whatsapp" id="floatingInput"  placeholder="<?= lang('Auth.whatsapp') ?>" value="<?= old('whatsapp') ?>" >
                        <label for="floatingInput">WhatsApp</label>
                      </div>
                    </div></div>

                    <!-- Full Address -->
                    <div class="form-floating mb-3 g-2">
                      <textarea class="form-control" name="full_address" placeholder="Enter your Address" id="floatingTextarea"></textarea>
                      <label for="floatingTextarea">Full Address</label>
                    </div>

                    <!-- Position -->
                    <div class="row">
                    <div class="col">
                      <div class="form-floating mb-3 g-2">
                        <input type="text" class="form-control" name="position" inputmode="text" id="floatingInput" autocomplete="position" placeholder="<?= lang('Auth.position') ?>" value="<?= old('position') ?>" required>
                        <label for="floatingInput">Position</label>
                      </div>
                    </div><div class="col">
                      <!-- Branch -->
                    <div class="form-floating mb-3 g-2">
                        <input type="text" class="form-control" name="branch" inputmode="text" autocomplete="whatsapp" id="floatingInput"  placeholder="<?= lang('Auth.branch') ?>" value="<?= old('branch') ?>" required>
                        <label for="floatingInput">Branch Posted</label>
                      </div>
                    </div></div>
                    
   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary"><?= lang('Auth.register') ?></button>
      </div>
      </form>
    </div>
  </div>
</div>
<!-- End Add User Modal-->

CONTROLLER

<?php

namespace App\Controllers\Admin;

use CodeIgniter\Shield\Controllers\RegisterController;
use App\Models\UsersModel;

class CreateAccount extends RegisterController
{
    protected $usersModel;

    public function addUser()
    {
        $data = [];
        $usersModel = new UsersModel();

        if($this->request->getMethod() == 'post'){
            //setting validations
            $rules = [
                'username' => [
                    'label' =>  'Auth.username',
                    'rules' => 'required|max_length[30]|min_length[3]|regex_match[/\A[a-zA-Z0-9\.]+\z/]|is_unique[users.username]',
                ],
                'email' => [
                    'label' =>  'Auth.email',
                    'rules' => 'required|max_length[254]|valid_email|is_unique[auth_identities.secret]',
                ],
                'gender' => [
                    'label' =>  'Auth.gender',
                    'rules' => 'in_list[male,female,bisexual]',
                ],
                'first_name' => [
                    'label' => 'First Name',
                    'rules' => 'required|alpha|min_length[3]',
                ],
                'last_name' => [
                    'label' => 'Last Name',
                    'rules' => 'required|alpha|min_length[3]',
                ],
                'telephone' => [
                    'label' => 'Mobile Number',
                    'rules' => 'required',
                ],
                'whatsapp' => [
                    'label' => 'WhatsApp Number',
                    'rules' => 'required',
                ],
                'branch' => [
                    'label' => 'Branch Name',
                    'rules' => 'required',
                ],
                'password' => [
                    'label' =>  'Auth.password',
                    'rules' => 'required|strong_password',
                ],
                'password_confirm' => [
                    'label' =>  'Auth.passwordConfirm',
                    'rules' => 'required|matches[password]',
                ],
            ];

            if($this->validate($rules))
			{
                //User details into Db
                $userdata = [
                    'username' => $this->request->getVar('username', FILTER_SANITIZE_STRING),
                    'first_name' => $this->request->getVar('first_name'),
                    'last_name' => $this->request->getVar('last_name'), 
                    'email' => $this->request->getVar('email'),
                    'gender' => $this->request->getVar('gender'),
                    'avatar' => $this->request->getVar('avatar'),
                    'telephone' => $this->request->getVar('telephone'),
                    'area_code' => $this->request->getVar('area_code'),
                    'birth_day' => $this->request->getVar('birth_day'),
                    'country' => $this->request->getVar('country'),
                    'state' => $this->request->getVar('state'),
                    'city' => $this->request->getVar('city'),
                    'full_address' => $this->request->getVar('full_address'),
                    'whatsapp' => $this->request->getVar('whatsapp'),
                    'position' => $this->request->getVar('position'),
                    'branch' => $this->request->getVar('branch'),
                    'relative_name' => $this->request->getVar('relative_name'),
                    'relative_number' => $this->request->getVar('relative_number'),
                    'description'  => $this->request->getVar('description'),
                    'created_at'   => date("Y-m-d h:m:s"),
                    'password'     => $this->request->getVar('password'),
                ];

                if($usersModel->save($userdata))
					{
                        session()->setTempdata('success', 'User Account created', 3);
						return redirect()->to('/billing/users');
                    }
                    else
                    {
                        session()->setTempdata('error', 'Sorry! User Account created', 3);
						return redirect()->to('/billing/users');
                    }

            }
            else
			{
				$this->data['validation'] = $this->validator;
			}

        }
        return view('admin/users/all', $data);
    }
}

MODEL

<?php

namespace App\Models;

use CodeIgniter\Shield\Models\UserModel;
use CodeIgniter\Shield\Entities\User;

class UsersModel extends UserModel
{
	
	protected $allowedFields = [
        'username', 
        'password',
        'email', 
        'status_message', 
        'status',
        'gender',
        'first_name',
        'last_name',
        'avatar',
        'description',
        'telephone',
        'area_code',
        'birth_day',
        'country',
        'state',
        'city',
        'full_address',
        'whatsapp',
        'position',
        'branch',
        'relative_name',
        'relative_number',
        'created_at',
        'updated_at',
    ];

    protected $useTimestamps = false;
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';
   
    public function getUsers()
    {
        $builder = $this->db->table('users');
		$builder->orderBy('id', 'ASC');
		$result = $builder->get()->getResult();
		return $result;
    }
}

Looking forward hearing from you and for any advise for novice like me is highly appreciated.

[sammyskills]

1. Failed to know where to use the following use CodeIgniter\Shield\Entities\User

This should be in your controller, like so:

<?php

namespace App\Controllers\Admin;

use CodeIgniter\Shield\Entities\User;
// other codes...

Then in your addUser() method, after the validation, you can do something like this:

$user = new User();
$user->fill($this->request->getVar());
if ($usersModel->save($user) {
    // other codes...
}

You can read more about Entities here and about Fill here.

[sammyskills]

I'm glad I was able to help.

For the alert message, you can use with() together with the redirect() function to achieve what you want.

return redirect()->to('/billing/users')->with('success', "User Account created");

See docs.

[jlwegaba]

Thank you @datamweb and @sammyskills for the positive responses.

I managed to get my alert work that of showing successful account creation. At first was using SHIELD's code in the View file yet in my Controller I was using session()->setTempdata().

So i updated the view file with the below code which worked.
<?php if(session()->getTempdata('error')):?> <div class="alert alert-danger"> <?= session()->getTempdata('error');?></div> <?php endif;?> <?php if(session()->getTempdata('success')):?> <div class="alert alert-success"> <?= session()->getTempdata('success');?></div> <?php endif;?>

But that of Shield's for Validation still not working since my code can not see the validation rules i set in App/Config/Validation.php

[jlwegaba]

[sammyskills]

In your code, use this:

$data['validation'] = $this->validator->getErrors();

Instead of this:

$data['validation'] = $this->validator;

And then you check with the validation array in the view file.

[jlwegaba]

Great!

All good now. Thank you.

CONTROLLER

<?php

namespace App\Controllers\Admin;

use CodeIgniter\Shield\Controllers\RegisterController;
use CodeIgniter\Shield\Entities\User;
use App\Models\UsersModel;

class CreateAccount extends RegisterController
{
    protected $usersModel;

    public function addUser()
    {
        $usersModel = new UsersModel();
        $validation =  \Config\Services::validation();

		//Creating new user.
        $data = $this->request->getPost();	
		$rules = $validation->getRuleGroup('registration');

        if($this->validate($rules))
		{
            $user = new User();
            $user->fill($data);
            if($usersModel->save($user))
			{
                // To get the complete user object with ID, we need to get from the database
                $user = $usersModel->findById($usersModel->getInsertID());

                // Add to default group
                $usersModel->addToDefaultGroup($user);

                session()->setTempdata('success', 'User Account created', 3);
				return redirect()->to('/billing/users');
            }
            else
            {
                session()->setTempdata('error', 'Sorry! User Account created', 3);
				return redirect()->to('/billing/users');
            }
        }
        else
        {
            $data['validation'] = $this->validator->getErrors();
        }

        //displaying created users on page users
        $data['allUsers'] = $usersModel->getUsers();
        return view('admin/users/all', $data);
    }

VALIDATION - in App\config\validation.php

public $registration = [
        'username'         => [
                'required',
                'max_length[30]',
                'min_length[3]',
                'regex_match[/\A[a-zA-Z0-9\.]+\z/]',
                'is_unique[users.username]',
            ],
        'email'            => 'required|max_length[254]|valid_email|is_unique[auth_identities.secret]',
        'gender' => 'in_list[male,female,other]',
        'first_name' => 'required|alpha|min_length[3]',
        'last_name' => 'required|alpha|min_length[3]',
        'telephone' => 'required',
        'whatsapp' => 'required',
        'branch' => 'required',
        'password'         => 'required|strong_password|min_length[8]',
        'password_confirm' => 'required|matches[password]',
    ];
    public $registration_errors = [
        'username'		    => 	[
                                    'required' 		=> 'Enter your Unique Username.',
                                    'max_length' 	=> 'Username must not exceed 30 characters.',
                                    'min_length' 	=> 'Username must be atleast 3 characters long.',
                                    'regex_match'   => 'Username should contain only numbers and letters.',
                                    'is_unique'     => 'Already exists, enter something else'
                                ],
        'email'          	=> [
									'required' 		=> 'Enter your Email.',
                                    'max_length' 	=> 'Too long, try with another email.',
									'is_unique'		=> 'Email already exists. Try another',
									'valid_email' 	=> 'Please enter a valid email address.',
								],
        'gender'            => [
									'in_list' 		=> 'Choose the available gender',
                                ],
		'first_name'        => [
									'required' 		=> 'Please enter First Name.',
                                    'alpha' 		=> 'Provide a proper name',
									'min_length' 	=> 'Too short!! Name must be atleast 3 characters long.',
								],
		'last_name'         => [
									'required' 		=> 'Please enter Other Name.',
                                    'alpha' 		=> 'Provide a proper name',
									'min_length' 	=> 'Too short!! Name must be atleast 3 characters long.',
								],								
        'telephone'            => [
									'required' 		=> 'Provide your phone number',
                                ],
        'whatsapp'            => [
									'required' 		=> 'Provide your whatsapp number',
                                ],
        'whatsapp'            => [
									'required' 		=> 'Branch name required',
                                ],
		'password'		    => 	[
									'required' 		=> 'Enter your Password.',
									'min_length' 	=> 'Password must be atleast 8 digits.',
									'strong_password' => 'Password must be strong'
								],					
		'password_confirm'				=>	[
									'required' 	=> 'Re-enter your password.',
									'matches' 	=> 'Confirm password and password must be same.'
								],					
		
	];

### VIEW - alert setting

`<!-- Alerts !-->
                <?php if(isset($validation)): ?>
                <div class="alert alert-danger"   >
                <?= \Config\Services::validation()->listErrors() ?>
                </div>
                <?php endif;?>

            <?php if(session()->getTempdata('error')):?>
							<div class="alert alert-danger">  <?= session()->getTempdata('error');?></div>
							<?php endif;?>
							<?php if(session()->getTempdata('success')):?>
							<div class="alert alert-success">  <?= session()->getTempdata('success');?></div>
							<?php endif;?>
            <!-- End of Alerts !-->`