Login Register Menu

1. Overview/Description

The Login/Register Menu is an essential feature that allows players to login to their existing account or create a new one to start using game services. It enhances user security while also providing an intuitive user experience.

2. Features:

There's currently UI only, no functionality has been implemented yet. In the future, some features will be added, including:

• • Login as guest: Allows users to login without creating an account, creating an account based on their phones ip address.
• • Login via social media: Provides the option to sign in using social media accounts (e.g., Google, Facebook) for quick and easy access.
• • Register: Enables new users to create an account by providing necessary information, such as username, email, and password.
• • Password Reset: Offers users a way to reset their password if they forget it, ensuring account recovery.
• • User data storage: Username, email and password are stored online.

3. UI Implementation:

We firstly initialize the table and title:

public void initializeTable() {
   table = new Table();
   topTable = new Table();
   contentTable = new Table();
   table.setBackground(new TextureRegionDrawable(new TextureRegion(backgroundTexture)));
   table.setSize(663, 405);
   title = new Label("Login", skin, "title-white");
}

Then, initializing the username, password and confirm password input field:

private void addInputField() {
   title = new Label("Login", skin, "title-white");
   usernameField = new TextField("", skin);
   passwordField = new TextField("", skin);
   passwordField.setPasswordMode(true);
   passwordField.setPasswordCharacter('*');
   confirmPasswordField = new TextField("", skin);
   confirmPasswordField.setPasswordMode(true);
   confirmPasswordField.setPasswordCharacter('*');
}

Next, initializing buttons:

private void addButtons() {
   closeButton = new Button(new TextureRegionDrawable(new TextureRegion(closeButtonTexture)));
   submitButton = new TextButton("Submit", skin);
   switchButton = new TextButton("Switch to Register", skin);
}

Finally, implementing position, size and for these things we implemented before. The name of function is "updateUI()" because it clears the contents every time the function is called. The function checks if the application is in login mode to create the appropriate login UI, or otherwise generates the register UI.

private void updateUI() {
   table.clear();  // Clear the table to re-add elements

   // Update title
   if (isLoginMode) {
       title.setText("Login");
   } else {
       title.setText("Register");
   }

   topTable.top().padTop(10);
   topTable.add(title).expandX().center().padTop(5);
   topTable.row();
   topTable.add(closeButton).size(80, 80).right().expandX().padRight(-25).padTop(-110);

   // Add title, username, and password fields
   contentTable.add(new Label("Username:", skin)).padRight(10);
   contentTable.add(usernameField).width(200).padBottom(10);
   contentTable.row();
   contentTable.add(new Label("Password:", skin)).padRight(10);
   contentTable.add(passwordField).width(200).padBottom(10);
   contentTable.row();
   // If it's the register screen, add the confirm password field
   if (!isLoginMode) {
      contentTable.add(new Label("Confirm Password:", skin)).padRight(10);
      contentTable.add(confirmPasswordField).width(200).padBottom(10);
      contentTable.row();
   }


   // Add submit and switch buttons
   contentTable.add(submitButton).colspan(2).padBottom(10);
   contentTable.row();
   contentTable.add(switchButton).colspan(2);

   // Update switch button text
   switchButton.setText(isLoginMode ? "Switch to Register" : "Switch to Login");

   table.add(topTable).expandX().fillX(); // Top-right table
   table.row().padTop(30f);
   table.add(contentTable).expandX().expandY().padLeft(50);
   table.row().padTop(30f);
}

4. Functionality Implementation:

In development.

5. Testing

Nothing to test currently as there is only UI implementation.