View Popup asking for authentication when you click on a screen component that you are not allowed to change

Question

How to create a mechanism for when the user clicks to try to change a date that is like datepicker and display a popup for authentication or something like that to make that change? If he has permission, he can, otherwise, he can’t do it.

 <script type="text/javascript">
            jQuery(function ($) {
                $.datepicker.regional['pt-BR'] = {
                    closeText: 'Fechar',
                    prevText: '&#x3c;Anterior',
                    nextText: 'Pr&oacute;ximo&#x3e;',
                    currentText: 'Hoje',
                    monthNames: ['Janeiro', 'Fevereiro', 'Mar&ccedil;o', 'Abril', 'Maio', 'Junho',
                    'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun',
                    'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    dayNames: ['Domingo', 'Segunda-feira', 'Ter&ccedil;a-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'],
                    dayNamesShort: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
                    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
                    weekHeader: 'Sm',
                    dateFormat: 'dd/mm/yy',
                    firstDay: 0,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ''
                };
                $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtNovaDtVenc").datepicker(
                    { changeMonth: true, changeYear: true }).attr('readonly', 'readonly');
            });
        </script>

@using (Html.BeginForm("Detalhes", "Faturas", FormMethod.Post, new { target = "_blank" }))
            { 
                <div class="div-detalhes">
                    <label> 
                        @Html.Hidden("NumeroDoc", Model.NumeroDocumento)
                        @Html.DisplayNameFor(model => model.NumeroDocumento) : 
                        @Html.DisplayFor(model => model.NumeroDocumento)
                    </label>
                    <label> 
                        Sacado : 
                        @Html.DisplayFor(model => model.sacado.Nome)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.ValorBoleto) : 
                        @Html.DisplayFor(model => model.ValorBoleto)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.DataVencimento) : 
                        @Html.DisplayFor(model => model.DataVencimento)
                    </label>
                    <label>
                        @Html.DisplayNameFor(model => model.DataDocumento) : 
                        @Html.DisplayFor(model => model.DataDocumento)
                    </label>
                    <label>
                        Nova dt. de vencimento : 
                        @Html.TextBox("txtNovaDtVenc", "", new { @class = "form-control form-control-custom", style="width:100px" })
                    </label>
                    <label>
                        <input class="btn btn-padrao-bv" type="submit" id="btnImprimir" value="Imprimir"/> |
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                   </label>
                </div>

            }

Answer 1

a possible solution I see would be, you bring from your Viewmodel a boolean, and then you could check in the view whether or not the user is logged in and if you have permission with a simple IF....

   <script type="text/javascript">
        $(document).ready(function () {
            $("#txtNovaDtVenc").datepicker(
                { changeMonth: true, changeYear: true
}).attr('readonly', 'readonly');
        });
    </script>

first I suggest that you instead of using the ID use the Class in the Input...

$(".DatePicker").datepicker(

because then you do not need to repeat the new code in other fields, if you can put in a better Partialview even!!! so you can use the code in all your Views that have dates that need to be changed.

then you could create a:

@Html.Hidden("IsLogado", Model.IsLogado)
@Html.Hidden("PodeAlterar", Model.PodeAlterar)

and then you take these values with the . val() of jquery.

var IsLogado = $( "#IsLogado" ).val();
var PodeAlterar = $( "#PodeAlterar" ).val();

you could create a Function to check if you can change the date: with if statement checking:

function PodeAlterarData {

if (!IsLogado) {

     return //código
  // para chamar a pop-up que irá pedir o login do usuário
  //         não se esqueça de setar os valores do input
  //com o usuario logado caso ele faça o log in
   }

if(!PodeAlterar) {

   return
  //exibir uma mensagem de erro dizendo que ele não possui 
  // privilégios de alteração

   }
return true;
}

Obs: don’t forget to give Returns if they are satisfied because then it closes Function.

and finally: you could make a simple:

<script type="text/javascript">
    $(document).ready(function () {

        $(".DatePicker").datepicker(
            { changeMonth: true, changeYear: true
}).attr('readonly', 'readonly');

        $(".DatePicker").click(function() { 
         if(!PodAlterar)  { 
         // bloqueia o campo
        }            
});

        $(".DatePicker").dblclick(function() {
          if(!PodAlterar)  { 
         // bloqueia o campo
});
    });
</script>

I suggest you put a verification timeout between one click and the other to ensure that no bugging !