locked
Implement Forgot Password in Login Control RRS feed

  • Question

  • User1769015664 posted

    How do I add the link 'Forgot Password' and 'Register' within the Login (Login1) control and activate a page based on the click?

    Monday, May 11, 2020 6:03 AM

Answers

  • User409696431 posted

    To add a Forgot Password link, use the PasswordRecovery attributes of the Login control.  There is no equivalent attribute for Registration, but since that is just another link to page, you can hijack the HelpPage attributes.

    <asp:Login id="Login1" runat="server" 
        PasswordRecoveryText="Forgot your password?" 
        PasswordRecoveryUrl="getPass.aspx"
        HelpPageText="Register" 
        HelpPageUrl="Register.aspx" />
    </asp:Login>

    You can inspect the elments produced in the page and add CSS to align things as you want.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2020 6:30 PM
  • User409696431 posted

    Do you mean you want to align the start of the Login button with the start of the two new links?  If so, there is no good way to do that.  If you look at the login page in multiple browsers, you'll see differences in widths for the entry fields and for the exact placement of the login button.  The login button is aligned right in its cell.  There is no one location across the major browsers where that button starts.

    You can see what I mean by looking at the following styling in Firefox, Chrome, Edge, IE.  I've used absolute positioning to place the URLs.

    <head runat="server">
    <style type="text/css">
    #Login1_PasswordRecoveryLink {
    	;
    	left: 200px;
    	top: 130px;
    }
    #Login1_HelpLink {
    	;
    	left: 200px;
    	top: 155px;
    }
    #Login1 {
    	width: 100%; /* so the two new urls won't be wrapped */
    }
    
    </style>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    <asp:Login id="Login1" runat="server" 
        PasswordRecoveryText="Forgot your password?" 
        PasswordRecoveryUrl="getPass.aspx"
        HelpPageText="Register" 
        HelpPageUrl="Register.aspx" >
    </asp:Login>
    </form>
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 10:45 PM

All replies

  • User288213138 posted

    Hi NJ2,

    How do I add the link 'Forgot Password' and 'Register' within the Login (Login1) control and activate a page based on the click?

    According to your description, I am not clear about your requirement.

    Do you want to put 'Forgot Password' and 'Register' into the Login control, If so, I suggest that you place it outside the control, because this design will be much easier.

    activate a page based on the click

    And what is activate a page based on the click?

    Best regards,

    Sam

    Monday, May 11, 2020 10:36 AM
  • User1769015664 posted

    Yes, I want to put 'Forgot Password' and 'Register' inside the Login control aligned with the 'Login' button.

    Monday, May 11, 2020 11:06 AM
  • User409696431 posted

    To add a Forgot Password link, use the PasswordRecovery attributes of the Login control.  There is no equivalent attribute for Registration, but since that is just another link to page, you can hijack the HelpPage attributes.

    <asp:Login id="Login1" runat="server" 
        PasswordRecoveryText="Forgot your password?" 
        PasswordRecoveryUrl="getPass.aspx"
        HelpPageText="Register" 
        HelpPageUrl="Register.aspx" />
    </asp:Login>

    You can inspect the elments produced in the page and add CSS to align things as you want.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 11, 2020 6:30 PM
  • User1769015664 posted

    Thanks, it worked.

    Do you happen to have a sample CSS to align to align these URLs?

    Tuesday, May 12, 2020 4:35 AM
  • User288213138 posted

    Hi NJ2,

    Do you happen to have a sample CSS to align to align these URLs?

    What style do you want? You can view the id of the url you want to modify through f12, and you can modify its style through this id.

    For example, The Forgot your password id of this url is "Login1_PasswordRecoveryLink", the id of Register is "Login1_HelpLink".

     <style>
            #Login1_PasswordRecoveryLink{
               
            }
            #Login1_HelpLink{
               
            }
        </style>

    Best regards,

    Sam

    Tuesday, May 12, 2020 5:56 AM
  • User409696431 posted

    Do you mean you want to align the start of the Login button with the start of the two new links?  If so, there is no good way to do that.  If you look at the login page in multiple browsers, you'll see differences in widths for the entry fields and for the exact placement of the login button.  The login button is aligned right in its cell.  There is no one location across the major browsers where that button starts.

    You can see what I mean by looking at the following styling in Firefox, Chrome, Edge, IE.  I've used absolute positioning to place the URLs.

    <head runat="server">
    <style type="text/css">
    #Login1_PasswordRecoveryLink {
    	;
    	left: 200px;
    	top: 130px;
    }
    #Login1_HelpLink {
    	;
    	left: 200px;
    	top: 155px;
    }
    #Login1 {
    	width: 100%; /* so the two new urls won't be wrapped */
    }
    
    </style>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    <asp:Login id="Login1" runat="server" 
        PasswordRecoveryText="Forgot your password?" 
        PasswordRecoveryUrl="getPass.aspx"
        HelpPageText="Register" 
        HelpPageUrl="Register.aspx" >
    </asp:Login>
    </form>
    
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 10:45 PM