Practical project -- log in to the homepage, retrieve password

analyze

  1. Login Method

    • Username and password combination login

    • Mobile number and verification code combination login

  2. The difference between the above login methods

    • The left title of the password input box and the verification code input box and the prompt words inside the input box are different

    • If it is a password login, it needs to support retrieving the password; if it is a verification code login, it needs to support sending a verification code to the user's mobile phone;

    • Password login can provide the function of remembering the password, and the value of the verification code is different every time, so there is no need to remember the verification code.

  3. retrieve password

    • If the user forgets the password, he needs to jump to the separate password retrieval page, enter and confirm the new password on this page, and verify the validity of the retrieved password (checked by SMS verification code)

interface design

  • Radio button RadioButton: Used to distinguish whether it is a password login or a verification code login.

  • Text View TextView: The left side of the input box displays what information should be entered here.

  • Edit box EditText: used to input mobile phone number, password and verification code.

  • Check Box CheckBox: Used to determine whether to remember the password.

  • Button Button: Contains three buttons: Login, Forgot Password and Get Verification Code.

  • Linear layout LinearLayout: The interface is arranged from top to bottom, using a vertical linear layout.

  • Relative layout RelativeLayout: Forgot password button and password input box are superimposed, and "forgot password" is right-aligned with the superior view.

  • Radio Group RadioGroup: Place the two radio buttons of password login and verification code login.

  • Alert Dialog AlertDialog: Feedback results to the user through an alert dialog

Parameter passing

The entire login module consists of a login page and a password retrieval page, so data interaction is required between these two pages

  • Jump from the login page to the password retrieval page, and carry the unique mobile phone number as the request parameter;

  • Return to the login page from the password retrieval page, and return the modified new password as a response parameter

exhibit:

​​​​​​​

 

resource configuration file

Add the following files to the drwable directory:

1, edittext_select.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/shape_edit_focus"/>
    <item android:state_focused="false" android:drawable="@drawable/shape_edit_nofocus"/>
</selector>

2,shape_circular.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Specifies the fill color inside the shape-->
    <solid android:color="@color/greyc"/>
    <!--Specifies the color of the shape outline (border size, color)-->
    <stroke
        android:width="2dp"
        android:color="@color/grey"
        />
    <!--Specify the corner radius-->
    <corners android:radius="5dp"/>

</shape>

constant configuration file

value directory

1,themes.xml

Cancel the style settings that come with the Button system

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.IntermediateControl" parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

2,strings.xml

<resources>
    <string name="app_name">retrieve password</string>
    <string name="login_by_password">password login</string>
    <string name="login_by_verifycode">Verification code login</string>
    <string name="phone_number">cellphone number:</string>
    <string name="input_phone_number">Please enter the phone number</string>
    <string name="login_password">login password:</string>
    <string name="input_password">Please enter password</string>
    <string name="forget_password">Forgot password</string>
    <string name="remember_password">remember password</string>
    <string name="login">climb&#160; &#160; &#160; record</string>
    <string name="input_new_password">Enter a new password:</string>
    <string name="input_new_password_hint">Please enter a new password</string>
    <string name="confirm_new_password">Confirm the new password:</string>
    <string name="input_new_password_again">Please enter new password again</string>
    <string name="verifycode">&#160; &#160; verification code: </string>
    <string name="verifycode2">&#160; &#160; &#160; &#160; verification code: </string>
    <string name="input_verifycode">please enter verification code</string>
    <string name="get_verifycode">get verification code</string>
    <string name="done">sure&#160; &#160; &#160;fixed</string>
</resources>

3,colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="xian_green">#058531</color>
    <color name="grey">#666666</color>
    <color name="greyc">#CCCCCC</color>
    <color name="yellow">#FFFF00</color>
    <color name="red">#FF0033</color>
    <color name="blue">#0066CC</color>
    <color name="green">#33CC33</color>
    <color name="gold">#FFDD66</color>
    <color name="main_page">#CCFFFF</color>
</resources>

4,dimens.xml

width and height variables

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="common_font_size">20sp</dimen>
    <dimen name="common_width">150sp</dimen>
    <dimen name="button_font_size">20sp</dimen>
    <dimen name="button_height">35sp</dimen>
    <dimen name="item_layout_height">50dp</dimen>
    <dimen name="margin_top">10dp</dimen>
</resources>

5,AndroidManifest.xml

Manifest resource file (launched Java class)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.intermediatecontrol">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.IntermediateControl">
        <activity
            android:name=".LoginForgetActivity"
            android:exported="true" />
        <activity
            android:name=".LoginMainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

layout file

1,activity_login_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="@color/main_page">

    <RadioGroup
        android:id="@+id/rg_login"
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        android:padding="2dp">

        <RadioButton
            android:id="@+id/rb_password"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/login_by_password"
            android:textSize="@dimen/common_font_size" />

        <RadioButton
            android:id="@+id/rb_verifycode"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="@string/login_by_verifycode"
            android:textSize="@dimen/common_font_size" />
    </RadioGroup>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/phone_number"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <EditText
            android:id="@+id/et_phone"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:layout_weight="1"
            android:background="@drawable/edittext_select"
            android:hint="@string/input_phone_number"
            android:inputType="number"
            android:maxLength="11"
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textSize="@dimen/common_font_size" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/login_password"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1"
                android:background="@drawable/edittext_select"
                android:hint="@string/input_password"
                android:inputType="numberPassword"
                android:maxLength="11"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"
                android:textSize="@dimen/common_font_size" />

        </RelativeLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="5dp"
        android:orientation="horizontal">

        <CheckBox
            android:id="@+id/ck_remember"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@drawable/checkbox"
            android:text="@string/remember_password"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <Button
            android:id="@+id/btn_forget"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:background="@drawable/shape_circular"
            android:layout_weight="1"
            android:text="@string/forget_password"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

    </LinearLayout>


    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="@string/login"
        android:textColor="@color/black"
        android:background="@drawable/shape_circular"
        android:textSize="@dimen/button_font_size" />
</LinearLayout>

2,activity_login_forget.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/main_page">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/input_new_password"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <EditText
            android:id="@+id/et_password_first"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/edittext_select"
            android:hint="@string/input_new_password_hint"
            android:inputType="numberPassword"
            android:maxLength="11"
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textSize="@dimen/common_font_size" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/confirm_new_password"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <EditText
            android:id="@+id/et_password_second"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/edittext_select"
            android:hint="@string/input_new_password_again"
            android:inputType="numberPassword"
            android:maxLength="11"
            android:textColor="@color/black"
            android:textColorHint="@color/grey"
            android:textSize="@dimen/common_font_size" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/item_layout_height"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/verifycode2"
            android:textColor="@color/black"
            android:textSize="@dimen/common_font_size" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginTop="@dimen/margin_top">

            <EditText
                android:id="@+id/et_verifycode"
                android:layout_width="@dimen/common_width"
                android:layout_height="wrap_content"
                android:background="@drawable/edittext_select"
                android:hint="@string/input_verifycode"
                android:inputType="numberPassword"
                android:maxLength="11"
                android:textColor="@color/black"
                android:textColorHint="@color/grey"
                android:textSize="@dimen/common_font_size" />

            <Button
                android:id="@+id/btn_verifycode"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/button_height"
                android:layout_alignParentEnd="true"
                android:layout_marginLeft="20dp"
                android:text="@string/get_verifycode"
                android:background="@drawable/shape_circular"
                android:textColor="@color/black"
                android:textSize="@dimen/common_font_size" />
        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="@string/done"
        android:textColor="@color/black"
        android:background="@drawable/shape_circular"
        android:textSize="@dimen/button_font_size" />
</LinearLayout>

logic program file

1,LoginMainActivity.java

package com.example.intermediatecontrol;

import androidx.activity.result.ActivityResult;
import androidx.activity.result.ActivityResultCallback;
import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.Intent;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;

import com.example.intermediatecontrol.util.ViewUtil;

import java.util.Random;

public class LoginMainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, View.OnClickListener, View.OnFocusChangeListener {

    private TextView tv_password;
    private EditText et_password;
    private Button btn_forget;
    private CheckBox ck_remember;
    private EditText et_phone;
    private RadioButton rb_password;
    private RadioButton rb_verifycode;
    private ActivityResultLauncher<Intent> register;
    private Button btn_login;
    private String mPassword = "111111";
    private String mVerifyCode;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login_main);
        //Set a radio listener for rg_login

        RadioGroup rb_login = findViewById(R.id.rg_login);
        tv_password = findViewById(R.id.tv_password);
        et_phone = findViewById(R.id.et_phone);
        et_password = findViewById(R.id.et_password);
        btn_forget = findViewById(R.id.btn_forget);
        ck_remember = findViewById(R.id.ck_remember);
        rb_password = findViewById(R.id.rb_password);
        rb_verifycode = findViewById(R.id.rb_verifycode);
        btn_login = findViewById(R.id.btn_login);
        // Set a radio listener for rg_login
        rb_login.setOnCheckedChangeListener(this);
        // Add a text change listener to et_phone
        et_phone.addTextChangedListener(new HideTextWatcher(et_phone, 11));
        // Add a text change listener to et_password
        et_password.addTextChangedListener(new HideTextWatcher(et_password, 6));
        //Incorrect mobile number
        et_password.setOnFocusChangeListener(this);
        btn_forget.setOnClickListener(this);
        btn_login.setOnClickListener(this);

        register = registerForActivityResult(new ActivityResultContracts.StartActivityForResult(), new ActivityResultCallback<ActivityResult>() {
            @Override
            public void onActivityResult(ActivityResult result) {
                Intent intent = result.getData();
                if (intent != null && result.getResultCode() == Activity.RESULT_OK) {
                    // The user password has been changed to a new password, so update the password variable
                    mPassword = intent.getStringExtra("new_password");
                }
            }
        });
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            // Password login selected
            case R.id.rb_password:
                tv_password.setText(getString(R.string.login_password));
                et_password.setHint(getString(R.string.input_password));
                btn_forget.setText(getString(R.string.forget_password));
                ck_remember.setVisibility(View.VISIBLE);
                break;
            // Verification code login selected
            case R.id.rb_verifycode:
                tv_password.setText(getString(R.string.verifycode));
                et_password.setHint(getString(R.string.input_verifycode));
                btn_forget.setText(getString(R.string.get_verifycode));
                ck_remember.setVisibility(View.GONE);
                break;
        }
    }

    @Override
    public void onClick(View v) {

        String phone = et_phone.getText().toString();
        if (phone.length() < 11) {
            Toast.makeText(this, "please enter a valid phone number", Toast.LENGTH_SHORT).show();
            return;
        }
        switch (v.getId()) {
            case R.id.btn_forget:
                // The password verification method is selected, at this time, you need to jump to the retrieve password page
                if (rb_password.isChecked()) {
                    // Bring your mobile number below to jump to the password reset page
                    Intent intent = new Intent(this, LoginForgetActivity.class);
                    intent.putExtra("phone", phone);
                    register.launch(intent);
                } else if (rb_verifycode.isChecked()) {
                    // Generate a six-digit random number verification code
                    mVerifyCode = String.format("%06d", new Random().nextInt(999999));
                    // The following pop-up reminder dialog box prompts the user to remember the six-digit verification code number
                    AlertDialog.Builder buider = new AlertDialog.Builder(this);
                    buider.setTitle("Please remember the verification code");
                    buider.setMessage("Phone number" + phone + ",This verification code is" + mVerifyCode + ",please enter verification code");
                    buider.setPositiveButton("Sure", null);
                    AlertDialog dialog = buider.create();
                    dialog.show();
                }
                break;
            case R.id.btn_login:
                // password verification
                if (rb_password.isChecked()) {
                    if (!mPassword.equals(et_password.getText().toString())) {
                        Toast.makeText(this, "Please enter the correct password", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    // Prompt the user to log in successfully
                    loginSuccess();
                } else if (rb_verifycode.isChecked()) {
                    // verification code verification
                    if (!mVerifyCode.equals(et_password.getText().toString())) {
                        Toast.makeText(this, "Please enter correct verify code", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    // Prompt the user to log in successfully
                    loginSuccess();
                }
                break;
        }

    }

    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            String phone = et_phone.getText().toString();
            //The mobile phone number is less than 11 digits
            if (TextUtils.isEmpty(phone) || phone.length() < 11){
                et_phone.requestFocus();
                Toast.makeText(this, "Please enter an 11-digit mobile phone number", Toast.LENGTH_SHORT).show();
            }
        }

    }

    private class HideTextWatcher implements TextWatcher {

        private EditText mView;
        private int mMaxLength;

        public HideTextWatcher(EditText v, int maxLength) {
            this.mView = v;
            this.mMaxLength = maxLength;
        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }

        @Override
        public void afterTextChanged(Editable s) {
            if (s.toString().length() == mMaxLength) {
                // Hide input method soft keyboard
                ViewUtil.hideOneInputMethod(LoginMainActivity.this, mView);
            }
        }
    }
    // The verification is passed, the login is successful
    private void loginSuccess() {
        String desc = String.format("your mobile number is%s，Congratulations, you passed the login verification, click the "OK" button to return to the previous page",
                et_phone.getText().toString());
        // The following dialog box pops up, prompting the user to log in successfully
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("login successful");
        builder.setMessage(desc);
        builder.setPositiveButton("OK to return", (dialog, which) -> {
            // End the current active page
            finish();
        });
        builder.setNegativeButton("I'll look again", null);
        AlertDialog dialog = builder.create();
        dialog.show();
    }
}

2,LoginForgetActivity.java

package com.example.intermediatecontrol;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

import java.util.Random;

public class LoginForgetActivity extends AppCompatActivity implements View.OnClickListener {

    private String mPhone;
    private String mVerifyCode;
    private EditText et_password_first;
    private EditText et_password_second;
    private EditText et_verifycode;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login_forget);
        et_password_first = findViewById(R.id.et_password_first);
        et_password_second = findViewById(R.id.et_password_second);
        et_verifycode = findViewById(R.id.et_verifycode);
        // Get the mobile number whose password you want to change from the previous page
        mPhone = getIntent().getStringExtra("phone");

        findViewById(R.id.btn_verifycode).setOnClickListener(this);
        findViewById(R.id.btn_confirm).setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_verifycode:
                // Clicked the "Get Verification Code" button
                // Generate a six-digit random number verification code
                mVerifyCode = String.format("%06d", new Random().nextInt(999999));
                // The following pop-up reminder dialog box prompts the user to remember the six-digit verification code number
                AlertDialog.Builder buider = new AlertDialog.Builder(this);
                buider.setTitle("Please remember the verification code");
                buider.setMessage("Phone number" + mPhone + ",This verification code is" + mVerifyCode + ",please enter verification code");
                buider.setPositiveButton("OK", null);
                AlertDialog dialog = buider.create();
                dialog.show();
                break;

            case R.id.btn_confirm:
                // Clicked the "OK" button
                String password_first = et_password_first.getText().toString();
                String password_second = et_password_second.getText().toString();
                if (password_first.length() < 6) {
                    Toast.makeText(this, "Please enter the correct password", Toast.LENGTH_SHORT).show();
                    return;
                }

                if (!password_first.equals(password_second)) {
                    Toast.makeText(this, "The new password entered twice does not match", Toast.LENGTH_SHORT).show();
                    return;
                }

                if (!mVerifyCode.equals(et_verifycode.getText().toString())) {
                    Toast.makeText(this, "Please enter correct verify code", Toast.LENGTH_SHORT).show();
                    return;
                }

                Toast.makeText(this, "Password reset complete", Toast.LENGTH_SHORT).show();
                // The following returns the modified new password to the previous page
                Intent intent = new Intent();
                intent.putExtra("new_password", password_first);
                setResult(Activity.RESULT_OK, intent);
                finish();
                break;
        }
    }
}

Tags: Java Android programming language

Posted by Adastra on Sat, 17 Sep 2022 01:53:39 +0930

Popular Tags

©2023 Programs Wiki