Ignore:
Timestamp:
11/29/21 23:10:44 (3 years ago)
Author:
beratkjufliju <kufliju@…>
Branches:
master
Children:
79aa35c
Parents:
dbc5976
Message:

added confirmation modal on userSettings

File:
1 edited

Legend:

Unmodified
Added
Removed

  • resources/views/dashboard/settings/index.blade.php

    rdbc5976 rec7b69d  
    152152                            <div class="card">
    153153                                <div class="card-body">
    154                                     <form class="actionForm" action="{{ route("dashboard.settings.username") }}"
    155                                           method="post" accept-charset="UTF-8">
    156 
    157                                         @method("patch")
    158                                         @csrf
    159 
    160                                         <fieldset class="form-fieldset">
    161154
    162155                                            <h4 class="font-weight-normal border-bottom pb-2">Username</h4>
    … …  
    167160                                            <div class="row">
    168161
    169 
    170162                                                <div class="col-md-6">
    171163                                                    <div class="form-group">
    172164                                                        <label class="form-label">Username</label>
    173                                                         <input type="text"
     165                                                        <input type="text" id="username"
    174166                                                               value="{{ old("username", $user->username) }}"
    175167                                                               name="username" class="form-control">
    … …  
    179171                                                <div class="col-md-12">
    180172                                                    <div class="form-group mb-0 float-right">
    181                                                         <input type="submit" value="Submit"
    182                                                                class="submitBtn btn btn-primary">
    183                                                     </div>
    184                                                 </div>
    185 
    186                                             </div>
    187 
    188                                         </fieldset>
    189 
    190                                     </form>
     173                                                        <a href="javascript:void(0)" class="submitBtn btn btn-primary text-white" data-toggle="modal" id="submitUserName" data-target="#confirmUsernameModal">Submit</a>
     174                                                    </div>
     175                                                </div>
     176
     177                                            </div>
    191178
    192179                                </div>
    … …  
    195182                            <div class="card">
    196183                                <div class="card-body">
    197                                     <form class="actionForm" action="{{ route("dashboard.settings.email") }}"
    198                                           method="post" accept-charset="UTF-8">
    199 
    200                                         @method("patch")
    201                                         @csrf
    202 
    203                                         <fieldset class="form-fieldset">
    204184
    205185                                            <h4 class="font-weight-normal border-bottom pb-2">E-mail</h4>
    … …  
    216196                                                        <input type="email"
    217197                                                               value="{{ old("email", $user->email) }}"
    218                                                                name="email" class="form-control">
     198                                                               name="email" id="email" class="form-control">
    219199                                                    </div>
    220200                                                </div>
    … …  
    222202                                                <div class="col-md-12">
    223203                                                    <div class="form-group mb-0 float-right">
    224                                                         <input type="submit" value="Submit"
    225                                                                class="submitBtn btn btn-primary">
    226                                                     </div>
    227                                                 </div>
    228 
    229                                             </div>
    230 
    231                                         </fieldset>
    232                                     </form>
     204                                                        <a href="javascript:void(0)" class="submitBtn btn btn-primary text-white" data-toggle="modal" id="submitEmail" data-target="#confirmEmailModal">Submit</a>
     205                                                    </div>
     206                                                </div>
     207
     208                                            </div>
    233209                                </div>
    234210                            </div>
    … …  
    261237                                    </div>
    262238                                </div>
    263 @endif
     239                        @endif
    264240                        </div>
    265241                    </div>
    … …  
    270246    </div>
    271247
     248    <div class="modal fade" id="confirmUsernameModal" tabindex="-1" role="dialog" aria-hidden="true">
     249        <div class="modal-dialog modal-dialog-centered" role="document">
     250            <div class="modal-content">
     251                <div class="modal-header">
     252                    <h5 class="modal-title" id="exampleModalCenterTitle">Update confirmation</h5>
     253                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     254                        <i class="ti-close"></i>
     255                    </button>
     256                </div>
     257                <div class="modal-body">
     258                    <form action="{{ route("dashboard.settings.username") }}" method="POST">
     259
     260                        @method('patch')
     261                        @csrf
     262
     263                        <p>Are you sure you want to update your username to <span id="user_name" class="font-weight-bold"></span>?</p>
     264                        <input type="hidden" id="user_name_input" value="" name="username">
     265                        <div class="modal-footer">
     266                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
     267                            </button>
     268                            <button type="submit" class="btn btn-primary">Save changes</button>
     269                        </div>
     270                    </form>
     271                </div>
     272            </div>
     273        </div>
     274    </div>
     275
     276    <div class="modal fade" id="confirmEmailModal" tabindex="-1" role="dialog" aria-hidden="true">
     277        <div class="modal-dialog modal-dialog-centered" role="document">
     278            <div class="modal-content">
     279                <div class="modal-header">
     280                    <h5 class="modal-title" id="exampleModalCenterTitle">Update confirmation</h5>
     281                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
     282                        <i class="ti-close"></i>
     283                    </button>
     284                </div>
     285                <div class="modal-body">
     286                    <form action="{{ route("dashboard.settings.email") }}" method="POST">
     287
     288                        @method('patch')
     289                        @csrf
     290
     291                        <p>Are you sure you want to update your email to <span id="user_email" class="font-weight-bold"></span>?</p>
     292                        <input type="hidden" id="user_email_input" value="" name="email">
     293                        <div class="modal-footer">
     294                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close
     295                            </button>
     296                            <button type="submit" class="btn btn-primary">Save changes</button>
     297                        </div>
     298                    </form>
     299                </div>
     300            </div>
     301        </div>
     302    </div>
     303
    272304@endsection
    273305
    274306@section('script')
    275     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    276     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     307
    277308    <script>
    278         //redirect to specific tab
    279         $(document).ready(function () {
    280             $('#tabMenu a[href="#{{ old('tab') }}"]').tabs('show')
     309        $("#submitUserName").click(function () {
     310            var name = $("#username").val();
     311            $("#user_name").html(name);
     312            $("#user_name_input").val(name);
     313        });
     314    </script>
     315
     316    <script>
     317        $("#submitEmail").click(function () {
     318            var email = $("#email").val();
     319            $("#user_email").html(email);
     320            $("#user_email_input").val(email);
    281321        });
    282322    </script>
Note: See TracChangeset for help on using the changeset viewer.