<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Change_PW.aspx.vb" Inherits="login_Change_PW" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap -->
        <html lang="en"></html>
        <!-- Required meta tags -->
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1" title="Verag Spedition AG ChangePW"/>
   
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"/>
               <!-- Bootstrap CSS -->
        <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">-->      
          <link href="bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/>
         <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css"/>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>VERAG Spedition AG Passwort wechseln</title>
        <link rel="stylesheet" type="text/css" href="../css/main.css"/>
        <link rel="stylesheet" type="text/css" href="../css/style.css"/>
        <LINK REL="SHORTCUT ICON" HREF="../images/Icons/favicon/favicon.ico" />
        <!--    <link rel="stylesheet" type="text/css" href="css/edit_main.css"> -->
        <script src="js/netzwerk.js" type="text/javascript"></script>        
        <link rel="stylesheet" type="text/css" href="../css/login/ChangePW.css"/>        
        <link rel="stylesheet" type="text/css" href="../css/example.css"/>
   
        <script type="text/javascript">
            function FocusOnInput() {
                document.getElementById("UserID").focus();
            }
        </script>
     <%@ import Namespace="MySql.Data.MySqlClient"%>
       
        <script type="text/javascript">
            // Vergebe den Event-Handler
            document.onkeydown = handleKeyEvent;
            // Funktion, die den Event verarbeitet
            function handleKeyEvent(e) {
                // MSIE nimmt das Event-Objekt aus window.event, DOM-kompatible Browser aus dem e-Funktionsparameter
                if (!e) e = window.event;
                // keyCode muss 70 sein und ctrlKey true
                if (e.keyCode == 68 && e.ctrlKey) {
                    alert('Strg+D wurde gedrückt');
                    //topup
                }
            }
        </script>
<script  type = "text/javascript">        
    function goBack() {
        window.history.back()
    }
</script>   
        <style>
           .bg-key-icon {
            background: url("../../images/Icons/service/key-icon-png-22_small.png") no-repeat 1.75% 10px white;
            padding-left: 28px;
            padding-right: 50px;
            width: 227px;
            height: 32px;
            border: 1px gray solid;
            border-radius: 5px 5px 5px 5px;
            margin-left: -4px;
            }
            @media (max-width: 558.98px) {
                body {
                    font-family: 'Poppins', sans-serif;
                    background: #fafafa;
                    background-image: url(../../images/road.jpg);
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-attachment: fixed;
                    background-size: cover;
                    background-color: #fff;
                    overflow-y: clip;
                    overflow-x: clip;
                }

                #content_container {                    
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 400px;
                    height: 613px;
                    margin: 0 auto;
                    margin-left:10%;                
                }

                .container-fluid {                    
                    width: 400px;                    
                    background-color: rgba(255,255,255,0.5);                   
                    height: 613px;    
                    top:50%;
                    bottom: auto;
                    left: -195px;
                    right: 520px;
                    margin: auto;
                }

                #tbl_main_M {
                    font-family: Arial;
                    font-size: 11px;
                    border: 1px solid gray;
                    width: 300px;
                    height: 613px;
                }
                #btn_submitpw_M{
                    background-color: #003680;
                    color: #fff;
                    width: 325px;
                    height: 32px;
                    margin-bottom: 0px;
                    margin-left:-15px;
                    padding-inline: 2px 2px;
                    padding: -10px 0px 10px 1px;
                    font-weight:600;
                }
                #lbl_Ueberschrift_M{
                    font-size:30px;
                    margin-left:15px;
                }
            }
        </style>
              </head>
   
<body>
    <div id="content_container">
        <div class="container-fluid">
            <form id="form1" runat="server">
               <center>
                      <!-- Große Bildschirme-->   
            <div class="d-none d-md-block">
                <table id="main_table" runat="server" cellpadding="0" style="margin: 2px 4px 2px 2px; border:none" Width="400px">
                    <tr style="color:#003680;height:38px;">
                        <td>
                            <asp:Label ID="lbl_Ueberschrift" runat="server" Text="Password change:" style="margin-left:55px"></asp:Label>
                        </td>
                    </tr>
                   <tr style="color:#003680;height:26.67px;">
                       <td colspan="4">
                           <asp:TextBox id="txt_Pw" CssClass="bg-key-icon" runat="server" TextMode="Password" Width="250px" Font-Names="Verdana" OnTextChanged="txt_Pw_TextChanged" AutoCompleteType="Disabled" style="margin-left:42px;color:#003680" OnClick="this.value='';" Placeholder="Enter Password"></asp:TextBox>
                           <span></span>
                           <asp:Image ID="Image1" runat="server" ImageUrl="~/images/Icons/service/hilfe.png" Height="13px" Width="13px" style="margin-left:32px" ToolTip="The Password has to contain minimum 4 characters. It must have at least 1 special character, one uppercase letter and at least 1 downcase letter at an maximum of 30 characters."/>
                       </td>
                   </tr>
                    <tr style="color:#003680;height:10px;">
                                  <td>                            
                                      <asp:RegularExpressionValidator ID="reqPassw1txt"  style="margin-left:32px;" runat="server" ControlToValidate="txt_Pw" ValidationGroup="TXT_val" ForeColor="Red" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{4,35}$" Display="Dynamic" ErrorMessage="The Password has to match the criterias of the info-button." SetFocusOnError="true"></asp:RegularExpressionValidator>                            
                                  </td>
                             </tr>
                              
                         <tr style="color:#003680;height:36.67px;">
                            <td>
                                <asp:TextBox id="txt_Pw_WH" CssClass="bg-key-icon" Width="250px" OnTextChanged="txt_Pw_WH_TextChanged" runat="server" TextMode="Password" Font-Names="Verdana" AutoCompleteType="Disabled" style="margin-left:42px;color:#003680" OnClick="this.value='';" Placeholder="Repeat Password"></asp:TextBox>  
                                <span></span>
                                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/Icons/service/hilfe.png" Height="13px" Width="13px" style="margin-left:32px" ToolTip="The passwords have to match with each other."/>
                            </td>
                         </tr>    
                         <tr>
                             <td colspan="4">
                                 <asp:RequiredFieldValidator ID="reqPasswtxt" style="margin-left:32px;" runat="server" ControlToValidate="txt_Pw_WH" ErrorMessage="Please repeat the password!" Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
                             </td>
                         </tr>
                        <tr style="color:#003680;height:15.67px;">
                            <td>    
                                <asp:Button ID="btn_submitpw" runat="server" Text="Change the password!" OnClick="btn_submitpw_Click" Width="250px" style="margin-left:38px;border:none"/>
                            </td>
                        </tr>
                              <tr style="color:#003680;height:10px;">
                            <td>                                                                         
                                <asp:CompareValidator ID="confirmPasswordReq" style="margin-left:32px;" runat="server" ControlToCompare="txt_Pw" ControlToValidate="txt_Pw_WH" ErrorMessage="Please try again! The passwords didn't match." Display="Dynamic" ForeColor="Red"></asp:CompareValidator>                                
                                <asp:RegularExpressionValidator ID="regexval_txt_Pw"  style="margin-left:32px;" runat="server" ControlToValidate="txt_Pw" ValidationGroup="TXT_val" ForeColor="Red" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{4,35}$" Display="Dynamic" ErrorMessage="The Password has to match the criterias of the info-button." SetFocusOnError="true"></asp:RegularExpressionValidator>
                                <asp:RegularExpressionValidator ID="regexval_txt_Pw_WH" style="margin-left:32px;" runat="server" ControlToValidate="txt_Pw_WH"  ValidationGroup="TXT_val" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{4,35}$" Display="Dynamic" ForeColor="Red" ErrorMessage="The Password has to match the criterias of the info-button." SetFocusOnError="true"></asp:RegularExpressionValidator>                                                                                                                  
                                </td>
                        </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lbl_messagetext" runat="server" Text=""></asp:Label>
                        </td>
                    </tr>
                </table>
                </div>
                    <!--Smartphone-Bildschirme-->   
                      <div class="d-md-none"> 
                              <table id="tbl_main_M" cellpadding="0" style="margin: 2px 4px 1px 2px;border:none">
                         <tr style="color:#003680;height:38px;">
                            <td>                            
                                <asp:Label ID="lbl_Ueberschrift_M" runat="server" Text="Password change:" style="margin-left:35px;font-weight:600;color:#003681;"></asp:Label>
                             </td>
                          </tr>                    
                          <tr style="color:#003680;height:36.67px;">
                            <td>
                                <asp:TextBox id="txt_Pw_M" CssClass="bg-key-icon" runat="server" Font-Size="1.125em" ValidationGroup="TXT_val_M" TextMode="Password" Width="245px" Font-Names="Verdana" OnTextChanged="txt_Pw_TextChanged" AutoCompleteType="Disabled" style="margin-left:22px;color:#003680" Placeholder="Enter Password"></asp:TextBox> 
                                <span></span></td>
                                <td>
                                <asp:ImageButton ID="Image1_M" runat="server" ImageUrl="~/images/Icons/service/hilfe.png" Height="22px" Width="19px" style="margin-left:12px"/>
                                </td> 
                              </tr>
                              <tr style="height:15px">
                              <td>                                  
                                  <asp:RequiredFieldValidator ID="reqPassw1txt_M" runat="server" ControlToValidate="txt_Pw_M" ErrorMessage="Please enter the password!" ForeColor="Red" Font-Size="19" Display="Dynamic"></asp:RequiredFieldValidator>
                              </td>
                              </tr>                                 
                         <tr style="color:#003680;height:36.67px;">
                            <td>
                                <asp:TextBox id="txt_Pw_WH_M" CssClass="bg-key-icon" Width="245px" Font-Size="1.125em" ValidationGroup="TXT_val_WH_M" OnTextChanged="txt_Pw_WH_TextChanged" runat="server" TextMode="Password" Font-Names="Verdana" AutoCompleteType="Disabled" style="margin-left:22px;color:#003680" Placeholder="Repeat Password"></asp:TextBox>  
                                <span></span></td>
                                <td>
                                <asp:ImageButton ID="Image2_M" runat="server" ImageUrl="~/images/Icons/service/hilfe.png" Height="22px" Width="19px" style="margin-left:12px;border:none;margin-top:15px" />
                            </td>
                         </tr>
                      <tr style="height:15px">
                          <td colspan="2">
                              <asp:RequiredFieldValidator ID="reqPasswtxt_M" runat="server" ControlToValidate="txt_Pw_WH_M" ErrorMessage="Please repeat the password!" Font-Size="19" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                          </td>
                      </tr>
                        <tr style="color:#003680;height:26.67px;">
                            <td>    
                                <asp:Button ID="btn_submitpw_M" runat="server" Text="Change the password!" OnClick="btn_submitpw_Click" Width="290px" style="margin-left:15px;border:none;height:40px;margin-top:1px"/>
                            </td>
                        </tr>
                              <tr style="color:#003680;height:20px;">
                            <td>                                                                
                                <asp:CompareValidator ID="confirmPasswordReq_M" runat="server" ControlToCompare="txt_Pw_M" ControlToValidate="txt_Pw_WH_M" ValidationGroup="TXT_val_WH_M" Font-Size="19" ForeColor="Red" ErrorMessage="Please try again! The passwords didn't match." Display="Dynamic"></asp:CompareValidator>                                
                                <asp:RegularExpressionValidator ID="regexval_txt_Pw_WH_M" runat="server" ControlToValidate="txt_Pw_WH_M" ValidationGroup="TXT_val_WH_M" ForeColor="Red" Font-Size="19" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{4,35}$" Display="Dynamic" ErrorMessage="The Password has to match the criterias of the info-button." SetFocusOnError="true"></asp:RegularExpressionValidator>                                                                                  
                                <asp:RegularExpressionValidator ControlToValidate="txt_Pw_M" runat="server" ID="regexval_txt_Pw_M" ValidationGroup="TXT_val_M" ForeColor="Red" Font-Size="19" ValidationExpression="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d]).{4,35}$" Display="Dynamic" ErrorMessage="The Password has to match the criterias of the info-button." SetFocusOnError="true"></asp:RegularExpressionValidator>
                                <asp:Label ID="lbl_messagetext_M" runat="server" Text=""></asp:Label>
                                </td>
                        </tr>
                    </table>  
                      </div>
                </center>
            </form>
   </div>
   </div>
</body>
</html>
