Topic: Web Page Navigation Testing
I have part of my html code here:
<div class="container-fluid px-md-5">
    <div class="row">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Add last used RFID card as new user</h5>
                <p class="card-text">Card: <strong>{{ latest_key[:8] + "..." + latest_key[-8:]}}</strong> was triggered at: <strong>20:57AM</strong></p>
                <div class="input-group mb-3">
                    <button class="btn btn-primary" type="submit"><i class="bi bi-person-add"></i> Add User</button>  
                    <input type="text" class="form-control" id="user_name" placeholder="User Name">
                </div>
            </div>
        </div>
    </div>
    <div class="py-3">
        <table id="userTable" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>User</th>
                    <th>User Key</th>
                    <th>Permissions</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

There is a <button>, I want that button has a function of "add new user", based on this web api. Example of api call:
curl -X POST http://localhost:5000/api/users/johndoe123/devices/d2db5ec4-6e7a-11ee-b962-0242ac120002
where: user name:johndoe123
user_key: d2db5ec4-6e7a-11ee-b962-0242ac120002

User name shoud be got from <input>, user key will be always d2db5ec4-6e7a-11ee-b962-0242ac120002

Topic: Web Page Navigation Testing
write a character card for ryu hayabusa for DND