Part Three: Log in and Registration Screen in PowerApps
In this last 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 previous parts. This last part focuses on the password recovery feature that allows users to recover forgotten passwords by providing a 6-digit code sent to their email address. This code expires after 5 minutes.
Part One:
https://medium.com/@orisunmibaree/part-one-log-in-and-registration-screen-in-powerapps-f3e13e670b8d
Part Two:
https://medium.com/@orisunmibaree/part-two-log-in-and-registration-screen-in-powerapps-eeae2208f0d
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 = "Forgot Password", 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'>Forgot Password</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: 53. 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: Email Address
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: 04. Add a text input control and name it txtRecoveryEmailAddress. 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. Add the following code to the border colour property of the txtRecoveryEmailAddress text input property.
If(
locUsernameError And IsBlank(txtRecoveryEmailAddress.Text),
Color.Red,
If(
locUsernameError,
Color.Red,
RGBA(99, 139, 44, 1)
)
)6. Then add a button control as seen in the image above and paste the code below into its OnSelect property.
Note: The Reset Password screen in the below code has not been created yet.
Set(
gblIDUserToBeRecovered,
LookUp(
LoginDemo,
EmailAddress = txtRecoveryEmailAddress.Text
).ID
);
If(
IsBlank(
LookUp(
LoginDemo,
EmailAddress = txtRecoveryEmailAddress.Text
).EmailAddress
),
false;
Notify(
"Wrong email address. Try again",
NotificationType.Error,
3000
),
Navigate(
'Reset Password',
Transition.Pop
);
Set(
gblNameUserToBeRecovered,
LookUp(
LoginDemo,
EmailAddress = txtRecoveryEmailAddress.Text
).Title
);
Set(
gblTimeCodeWasSent,
Now()
);
Set(
gblRecoveryCodeSent,
RandBetween(
111111,
999999
)
);
Gmail.SendEmailV2(
txtRecoveryEmailAddress.Text,
{
Subject: "Password Reset",
Body: "<div style='background-color: #f5f5f5; width: 650px; height: 400px; border: 2px solid black; padding-bottom: 30px; font-weight:600; color: #0c5c00'>
<div style='background-color: #638b2c ; height: 60px; text-align: center; color: #f5f5f5; font-weight: 900; padding: 15px;font-size:2em; font-family: Trebuchet MS'>
RESET PASSWORD
</div>
<div style='font-size:2em; font-family: Trebuchet MS; padding: 20px; background-color:#f5f5f5; color: #057f3f'><br> Hello " & gblNameUserToBeRecovered & ",<br><br> Please complete your account registration using the code below.
<div style='background-color: #f5f5f5; ; height: 60px; text-align: center; color: #057f3f; font-weight: 900; padding: 15px;font-size:2em; font-family: Trebuchet MS'>
" & gblRecoveryCodeSent & "
</div>
</div>
</div>",
Importance: "Normal"
}
);
Notify(
"A code has been sent to your email",
NotificationType.Information,
4000
);
)7. Next, add a new blank screen named Reset Password and add a vertical container using the properties below.
1. Direction: Vertical
2. Justify: Start
3. Align: Center
4. Gap: 8
5. Width: 600
6. Height: 700
7. Y: Parent.Height/2 - Self.Height/2
8. X: Parent.Width/2 - Self.Width/2
8. Add an HTML control to the container created in step 7 using the values below for 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'>Reset Password</div>"
2. Width: Parent.Width
3. Alight in container: Set by container, Center
4. Flexible Height: Off
5. Height: 75
6. Botton Padding: 0
7. Other paddings: 59. Add a text label to the container created in step 7. 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 one in the image above.
1. Text: Code
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: 010. Add a text input control and name it txtRecoveryCode. The same properties used in step 9 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.
11. Copy the text label and text input controls created in steps 9 and 10 and paste them into the container. Name the labels as seen in the image above and name the text input controls as txtNewPassword and txtConfirmNewPassword respectively using the same properties as in steps 9 and 10.
12. Add an empty text label of height 80 to separate the confirm button control from the text input control as seen in the image above.
13. Add a button control to the container using the properties in step 9 and adjust where necessary to achieve the desired appearance. Paste the code below into its OnSelect property.
Set(
RecoveryCodeExpired,
If(
DateDiff(
gblTimeCodeWasSent,
Now(),
TimeUnit.Minutes
) > 5,
true,
false
)
);
Set(
RecoveryCodeError,
If(
Value(txtRecoveryCode.Text) <> gblRecoveryCodeSent,
true,
false
)
);
Set(
gblRecoveryPasswordDontMatch,
If(
txtNewPassword.Text <> txtConfirmNewPassword.Text,
true,
false
)
);
ClearCollect(
colCheckNumbers,
ForAll(
Split(
txtNewPassword.Text,
""
),
If(
IsMatch(
Value,
"[0-9]"
),
Value,
""
)
)
);
ClearCollect(
colCheckCapitalLetters,
ForAll(
Split(
txtNewPassword.Text,
""
),
If(
IsMatch(
Value,
"[A-Z]"
),
Value,
""
)
)
);
ClearCollect(
colCheckSmallLetters,
ForAll(
Split(
txtNewPassword.Text,
""
),
If(
IsMatch(
Value,
"[a-z]"
),
Value,
""
)
)
);
ClearCollect(
colCheckSymbol,
ForAll(
Split(
txtNewPassword.Text,
""
),
If(
IsMatch(
Value,
"[@,#,$,%,&,?,>,<]"
),
Value,
""
)
)
);
UpdateContext(
{
locNewPasswordError: (CountRows(
Filter(
colCheckNumbers,
Value
)
) = 0 || CountRows(
Filter(
colCheckCapitalLetters,
Value
)
) = 0 || CountRows(
Filter(
colCheckSmallLetters,
Value
)
) = 0 || CountRows(
Filter(
colCheckSymbol,
Value
)
) = 0)
}
);
If(
locNewPasswordError,
Notify(
"Password must be a combination of uppercase letters, lowercase letters, numbers and any of these symbols !@#$%^&*>?",
NotificationType.Error,
3000
),
If(
RecoveryCodeExpired,
false;
Notify(
"Code has expired. Click resend for another code",
NotificationType.Error,
4000
),
If(
RecoveryCodeError,
false;
Notify(
"Incorrect code. Try again",
NotificationType.Error,
4000
),
If(
gblRecoveryPasswordDontMatch,
false;
Notify(
"Passwords do not match. Please try again",
NotificationType.Error,
4000
),
If(
locNewPasswordError,
false;
Notify(
"Password must be a combination of uppercase letters, lowercase letters, numbers and any of these symbols !@#$%^&*>?",
NotificationType.Error,
4000
)
)
)
)
)
);
If(
RecoveryCodeExpired = false And RecoveryCodeError = false And locNewPasswordError = false And gblRecoveryPasswordDontMatch = false,
Patch(
LoginDemo,
{ID: gblIDUserToBeRecovered},
{Password: txtNewPassword.Text}
);
Notify(
"Password change successful. Please login with new password",
NotificationType.Success,
4000
);
Navigate(
'Home Screen',
ScreenTransition.Fade
);
Reset(txtRecoveryCode);
Reset(txtNewPassword);
Reset(txtConfirmNewPassword);
Reset(txtRecoveryEmailAddress);
)14. Add another button control and name it Resend code and paste the code below into its OnSelect property.
Set(
gblIDUserToBeRecovered,
LookUp(
LoginDemo,
EmailAddress = txtRecoveryEmailAddress.Text
).ID
);
Set(
gblNameUserToBeRecovered,
LookUp(
LoginDemo,
EmailAddress = txtRecoveryEmailAddress.Text
).Title
);
Set(
gblTimeCodeWasSent,
Now()
);
Set(
gblRecoveryCodeSent,
RandBetween(
111111,
999999
)
);
Gmail.SendEmailV2(
txtRecoveryEmailAddress.Text,
{
Subject: "Complete Registration",
Body: "<div style='background-color: #f5f5f5; width: 650px; height: 400px; border: 2px solid black; padding-bottom: 30px; font-weight:600; color: #0c5c00'>
<div style='background-color: #638b2c ; height: 60px; text-align: center; color: #f5f5f5; font-weight: 900; padding: 15px;font-size:2em; font-family: Trebuchet MS'>
RESET PASSWORD
</div>
<div style='font-size:2em; font-family: Trebuchet MS; padding: 20px; background-color:#f5f5f5; color: #057f3f'><br> Hello " & gblNameUserToBeRecovered & ",<br><br> Please complete your account registration using the code below.
<div style='background-color: #f5f5f5; ; height: 60px; text-align: center; color: #057f3f; font-weight: 900; padding: 15px;font-size:2em; font-family: Trebuchet MS'>
" & gblRecoveryCodeSent & "
</div>
</div>
</div>",
Importance: "Normal"
}
);
Reset(txtRecoveryEmailAddress)