lockBox.jpg


Goal: Build an app that controls access to a separate screen by allowing the user to create a password.

This video demonstrates the app functionality.



Overview:

•The user will enter a password.

•If the password is correct, control is transferred to a separate screen which displays Private Stuff. (In our case, privateStuff.jpg is an image which is shown.)

•The user will then transfer control back to the main screen.

•A tinyTB will be used to remember the password even when the cell phone is turned off.




Phase 1



1. Add a button. This button will control switching to a private screen.


2. Add a **PasswordTextbox component.

A) This will allow the user to enter a password (which will be displayed as dots). Let's call it the CurrentPasswordTextbox.

3. When the button is pressed, make sure the value the user entered has the value you are using as a password. If it is, use TextToSpeech to speak "Yes, that is right".

A) You will need an if-then statement to do this.

4. Test your app. It is important to test your app after small changes, as errors are easier to locate that way.



Phase 2



1. Create a second screen using **AddScreen.

A) Add the background image to the screen2.
B) It should be called privateStuff.jpg. It isprivateStuff.jpg

2. While looking at Screen2: Add a button to Screen2.

A) It can be called "BackButton" or "Exit"
B) It will allow the user to return to the first screen or exit the current screen.

3. While looking at Screen1: Add the following code to switch to the second screen when the button is clicked.

PrivateScreen.PNG

4. Test your app.



Phase 3



1. Add the code to return from Screen2 when the back button is clicked. Where do you think it goes back to?

CloseScreen.png

2. Now change the code so you only switch to the private screen when a special password is entered. The password can be anything you like:

PrivateScreen2.PNG
When we type in a constant value, we say it is "hard coded" meaning it is hard and unchageable. You are likely thinking, "This won't work well." You are absolutely right, but it is a good first step.


3. Test your app.



Phase 4: How to Change your password



1. Add a second button.

The second button will be used to request changing of the password.

2. Add a second PasswordTextbox component.

A) The first one will allow the user to enter the current password.
B) The second box will allow users to enter a new password (which will be displayed as dots.). Let's call it the NewPasswordTextbox.
*NOTE, the NewPasswordTextbox should be made invisible (until it is needed).

3. Because the password will change, we can't just put it in a string. The value in a string doesn't change. Add a variable to store your password. Set it to any value you like. For example, I could have something like:

MyPassword.PNG

While the password itself can be crazy, the name of the variable should not be. Someone who changes (or maintains) your code will not be amused with variables like rabbit, allison, or hello.

4. Changing the password requires several steps. This is pretty complicated. Review the intro video to recall your goal. (This **video demonstrates the app functionality.)

A) On clicking the ChangePassword Button for the first time, the NewPassword Textbox will not be visible.
B) Make NewPassword Textbox visible.
C) Set the EnterPassword Hint to be "Old Password" so the user knows what is expected..
D) Set the NewPassword Hint to be "New Password" so the user knows what is expected.
ChangingPasswordCode.png

5. After the Old and New Password boxes are both visible, the users will:

A) Enter the Old Password
B) Enter the New Password
C) Click the ChangePassword button again.

Therefore we need to do the following:

A) If the NewPassword Textbox is visible, then verify that the contents of the CurrentPasswordTextbox matches current password.
B) IF it matches, then change MyPassword be what was entered in the NewPasswordTextbox.
C) Clean Up:
  • Set the New PasswordTextbox to be invisible.
  • Set the EnterPasswordTextbox hint to be "Password'
  • Clear the contents of the NewPasswordTextbox.
***Looking at the vocabulary used in the above tasks, what blocks will you need?

6. Test your app.



Phase 5 Resetting the password.



1. Drag in a label to control the spacing. Since the items are automatically inserted one below another, inserting a blank label will cause following items to appear after the label.

A) Set the label height to 225 pixels.

2. Add a button to allow the user to reset the password to its original value.

A) Make the button Red. Call it ResetButton.
B) Typically an email is sent to the email address on file with instructions for how to reset it. We will do something much simpler. We are just going to set the value of the password back to an initial value "special" (or whatever value you like)
C) Obviously, this is not a secure thing to do. This is just to help us debug. In a real application, the reset would need to be much more sophisticated.

3. Test your app.



Phase 6:



1. Using a tinyDB

A)Your app is working great, but if you exit the app, it will forget your new password which you stored in MyPassword. To enable it to remember the password between instantiations, we need a tiny data base - tinyDB.
B) We will read the password value from the tinyDB.
C) We will store changes to the tinyDB. In fact, we can get rid of our password variable (MyPassword), because the tinyDB takes its place.

2. When Screen1 initializes, store an initial password in the TinyDB.

A) To store something in the TinyDB, you need a tag (how you will ask for it) and a value (the value of the thing you want to store).
InitializeHandler.png

3. When the privateScreenButton is clicked, make sure the value which the user entered matches that in the tinyDB.


PrivateScreen3.PNG

4. Whenever you change the password, you will need to store it in the tinyDB.


password1.PNG


5. Actually, we need to make sure they know the old password before allowing them to change it. Explain to your mentor what you want to do. If you are desperate, you can look at the **code - but only if you are desperate. If you do take a peek, read the code, try to understand it, exit the screen, and try to reproduce equivalent code without looking. There is very little gained if you just copy code you see.



6. When you reset the password (back to the factory default), you will need to change the tinyDB.


7. Download the app to your phone using the build/ APP (Provide QR code for .apk). Start the app. Change the password. Exit the app. Start the app again. Make sure the password is remembered.

==

Challenges==
1. When the user requests a password change, ask the user if they really want to change it. "Notifier" (under User Interface) can help with this.
2. When a password is entered, check to see if it has at least one digit and one special character. Otherwise, have the user enter a new password. There are 'text manipulation" operations available under the Text drawer.