Mini Password Protection
Published on February 24, 2022
In this tutorial, we will create a mini password app which uses the PasswordTextBox component. There is an image of a dog in the app, but to access it, one must enter the correct password.
🏷️ Tags: #newbie, #tutorials-and-guides
Step 1. Setting Up Screen1 and Screen2.
Create a new project, give it a suitable name.
From the User Interface, drag out a PasswordTextBox. A PasswordTextBox is a TextBox, the difference between these two is that this PasswordTextBox hides the text entered with dots.
From the User Interface again, drag out a Button and place it below the PasswordTextBox. Set its Text to 'Submit'.
Drag out a Notifier from the User Interface. Notifier is a non-visible component, so you should see it below the phone case, under Non-visible components.
(optional) You can do some more customizing: e.g. The following
Set the AlignHorizontal of the Screen to Center : 3 and AlignVertical to Center : 2.
Set both the PasswordTextBox's width and the Button's width to 90%.
On the right/below is an output after designing.
6. On the top, you see Add Screen. Click on it and add a screen named Screen2. This diagram shows you how to add a screen.
7. After you added the screen, you should be redirected to that screen. If not, click on the Screen1 drop down on the top left corner, just next to the Add Screen button, and select Screen2.
8. Drag out an Image from the Designer.
9. Done! Your Screen2 design should look like this.
10. Go back to Screen1 and go to the Screen1 Blocks editor.
Step 2. Blocks for Screen1.
Set up your password via creating a global variable. For me, the password the user has to enter is 1234.
2. Use these blocks to check whether the password is correct. If it isn't, the Notifier will show an alert saying that the user has entered the wrong password.
3. Go back to the Designer, and select 'Screen2' in the Screen1 drop down on the top left corner, just next to the Add Screen button, and select Screen2.
Step 3. Blocks for Screen2.
Use these blocks to show the image in Screen2. The text block is a URL to a dog image. You can directly drag the blocks screenshot to your Blocks editor, or you can use your own dog image URL.
When you see the No available assets block, delete it and replace it with the text block.
You're done! Go back to Screen1 and test your app out with the Companion. Or, you can download the AIA file here.