Part Two: Log in and Registration Screen in PowerApps

In this second of the three-part series on how to create a user-friendly login and registration page in Power Apps, we’ll be building on the template that was created in the first part https://medium.com/@orisunmibaree/part-one-log-in-and-registration-screen-in-powerapps-f3e13e670b8d.
This part focuses on the login feature where users are required to provide a valid username and password before they can access the application. Passwords are validated by ensuring that the number of characters, uppercase letters, lowercase letters and symbols provided by users during login all match what was provided during registration.

Steps:

1. Add a vertical container to the right-hand side container created in Step 3 of Part 1 and set its properties to the values below.

1. Direction: Vertical 
2. Justify: Start
3. Align: Center
4. Gap: 8
5. Width: Parent.Width
6. Height: Parent.Height
7. Visible: If(MenuGallery.Selected.Name = "Log in", true, false)

2. Add an HTML control to the container created in step 1 above using the values provided below as its properties.

1. HTML Text: "<div style= 'padding:5px;height:45px; width: "&Parent.Width &"px;  text-align:center; font-size:2em; font-family: Trebuchet MS; font-weight:900'>Log in</div>"
2. Width: Parent.Width
3. Alight in container: Set by container, Center
4. Flexible Height: Off
5. Height: 70
6. Botton Padding: 0
7. Other paddings: 5

3. Add a text label to the container created in Step 1. This label would help us indicate the titles of data to be collected. Use the values provided below to set their properties. If done correctly, the text label would appear in a similar position to the ones in the image above.

1. Text: Username
2. Font: Open sans
3. Font Size: 11.5
4. Font Weight: Semi Bold
5. Width: 550
6. Align in container: Set by container, Center
7. Flexible height: Off
8. Height: 20
9. Left Padding: 0

4. Add a text input control and name it txtLoginUsername. The same properties used in step 3 should also be used for this, except for Height which now equals 50 with a border radius of 5 and a left padding of 12.

5. Repeat Step 3 to create a text label to display the title Password as seen in the image above. Also, repeat Step 4 to add a text input control named txtLoginPassword.

6. Add the code below to the border colour of the txtLoginUsername created in Step 4 above.

If(
    locUsernameError And IsBlank(txtLoginUsername.Text),
    Color.Red,
    If(
        locUsernameError,
        Color.Red,
        RGBA(99, 139, 44, 1)
    )
)

7. Add the code below to the border colour of the txtLoginPassword created in Step 5 above.

If(
    locPasswordError And IsBlank(txtLoginUsername.Text),
    Color.Red,
    If(
        locPasswordError || locNumberofCaps || locPasswordCount,
        Color.Red,
        RGBA(99, 139, 44, 1)
    )
)

8. To include the error icon/emoji as displayed below, add an HTML control under the previous text controls and input the code provided.

Display of the error icon

1. HTML Text:
    If(
    gblShowLoginErrorIcon, "<div style= 'padding:5px;height:60px; 
    width: " & Parent.Width & "px;  text-align:center; font-size:4em; 
    font-family: Trebuchet MS; font-weight:300'>☹️</div>",
    ""
    )
2. Visible:
    If(
    gblShowLoginErrorIcon,
    true,
    false
    )
3. Width: Parent.Width
4. Font size: 11
5. Height: 95

9. Then add a button control as seen in the image above and paste the code below into its OnSelect property.

Set(
    gblCheckPasswordInSharepoint,
    LookUp(
        LoginDemo,
        UserName = txtLoginUsername.Text
    ).Password
);
Set(
    gblCapsInSharepointPasswords,
    ClearCollect(
        colCaps,
        ForAll(
            Split(
                gblCheckPasswordInSharepoint,
                ""
            ),
            If(
                IsMatch(
                    Value,
                    "[A-Z]"
                ),
                Value,
                ""
            )
        )
    );
    Concat(
        colCaps,
        Value,
        ""
    )
);
Set(
    gblCapsInUserPassword,
    ClearCollect(
        colCaps,
        ForAll(
            Split(
                txtLoginPassword.Text,
                ""
            ),
            If(
                IsMatch(
                    Value,
                    "[A-Z]"
                ),
                Value,
                ""
            )
        )
    );
    Concat(
        colCaps,
        Value,
        ""
    )
);
UpdateContext(
    {
        locUsernameError: IsBlank(
            LookUp(
                LoginDemo,
                UserName = txtLoginUsername.Text
            ).UserName
        )
    }
);
UpdateContext({locNumberofCaps: gblCapsInUserPassword <> gblCapsInSharepointPasswords}); 
UpdateContext({locPasswordCount: Len(txtLoginPassword) <> Len(gblCheckPasswordInSharepoint)});
UpdateContext({locBlankPassword: IsBlank(gblCheckPasswordInSharepoint)});
UpdateContext({locPasswordError: locBlankPassword || (locPasswordCount And locNumberofCaps)});

If(
    locUsernameError,
    Notify(
        "Wrong username. Please try again",
        NotificationType.Error,
        3000
    );
    Set(
        gblShowLoginErrorIcon,
        true
    ),
    If(
        locPasswordError || locNumberofCaps || locPasswordCount,
        Notify(
            "Wrong password. Please try again",
            NotificationType.Error,
            3000
        );
        Set(
            gblShowLoginErrorIcon,
            true
        )
    )
);
If(
    locPasswordError || locUsernameError || locNumberofCaps || locPasswordCount,
    false,
    If(
        locPasswordError = false And locUsernameError = false And locNumberofCaps = false And locPasswordCount = false,
        Navigate(
            Dashboard,
            ScreenTransition.Fade
        );
        Notify(
            "Login Successful",
            NotificationType.Success,
            2000
        );
        Set(
            CurrentUser,
            LookUp(
                LoginDemo,
                UserName = txtLoginUsername.Text
            )
        );
        Set(
            ThisSession,
            Patch(
                LoginRecords,
                Defaults(LoginRecords),
                {
                    User: CurrentUser.UserName,
                    LoginTime: Now()
                }
            )
        );
        Reset(txtLoginPassword);
        Reset(txtLoginUsername);
    )
);

Next: Password Recovery

https://medium.com/@orisunmibaree/part-three-log-in-and-registration-screen-in-powerapps-8c52c3a92897