Update phone number style

MixinNetwork · Oct 30, 2024 · 9508f4a · 9508f4a
1 parent 0c2a06c
commit 9508f4a
Show file tree

Hide file tree

Showing 7 changed files with 338 additions and 1 deletion.
diff --git a/app/src/main/java/one/mixin/android/ui/setting/AddPhoneBeforeFragment.kt b/app/src/main/java/one/mixin/android/ui/setting/AddPhoneBeforeFragment.kt
@@ -0,0 +1,42 @@
+package one.mixin.android.ui.setting
+
+import android.os.Bundle
+import android.view.View
+import androidx.core.view.isVisible
+import dagger.hilt.android.AndroidEntryPoint
+import one.mixin.android.R
+import one.mixin.android.databinding.FragmentComposeBinding
+import one.mixin.android.extension.navTo
+import one.mixin.android.session.Session
+import one.mixin.android.ui.common.BaseFragment
+import one.mixin.android.ui.common.VerifyFragment
+import one.mixin.android.ui.setting.ui.page.AddPhoneBeforePage
+import one.mixin.android.util.viewBinding
+
+@AndroidEntryPoint
+class AddPhoneBeforeFragment : BaseFragment(R.layout.fragment_compose) {
+    companion object {
+        const val TAG: String = "AddPhoneBeforeFragment"
+
+        fun newInstance(
+        ): AddPhoneBeforeFragment =
+            AddPhoneBeforeFragment().apply {
+
+            }
+    }
+
+    private val binding by viewBinding(FragmentComposeBinding::bind)
+
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        super.onViewCreated(view, savedInstanceState)
+        binding.titleView.isVisible = false
+        binding.compose.setContent {
+            AddPhoneBeforePage(Session.hasPhone()) {
+                navTo(VerifyFragment.newInstance(VerifyFragment.FROM_PHONE), VerifyFragment.TAG)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/one/mixin/android/ui/setting/AddPhoneFragment.kt b/app/src/main/java/one/mixin/android/ui/setting/AddPhoneFragment.kt
@@ -0,0 +1,41 @@
+package one.mixin.android.ui.setting
+
+import android.os.Bundle
+import android.view.View
+import androidx.core.view.isVisible
+import dagger.hilt.android.AndroidEntryPoint
+import one.mixin.android.R
+import one.mixin.android.databinding.FragmentComposeBinding
+import one.mixin.android.extension.navTo
+import one.mixin.android.session.Session
+import one.mixin.android.ui.common.BaseFragment
+import one.mixin.android.ui.setting.ui.page.AddPhonePage
+import one.mixin.android.util.viewBinding
+
+@AndroidEntryPoint
+class AddPhoneFragment : BaseFragment(R.layout.fragment_compose) {
+    companion object {
+        const val TAG: String = "AddPhoneFragment"
+
+        fun newInstance(
+        ): AddPhoneFragment =
+            AddPhoneFragment().apply {
+
+            }
+    }
+
+    private val binding by viewBinding(FragmentComposeBinding::bind)
+
+    override fun onViewCreated(
+        view: View,
+        savedInstanceState: Bundle?,
+    ) {
+        super.onViewCreated(view, savedInstanceState)
+        binding.titleView.isVisible = false
+        binding.compose.setContent {
+            AddPhonePage(Session.hasPhone()) {
+                navTo(AddPhoneBeforeFragment.newInstance(), AddPhoneBeforeFragment.TAG)
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/one/mixin/android/ui/setting/RecoveryFragment.kt b/app/src/main/java/one/mixin/android/ui/setting/RecoveryFragment.kt
@@ -8,6 +8,7 @@ import dagger.hilt.android.AndroidEntryPoint
 import one.mixin.android.R
 import one.mixin.android.databinding.FragmentComposeBinding
 import one.mixin.android.extension.navTo
+import one.mixin.android.session.Session
 import one.mixin.android.ui.common.BaseFragment
 import one.mixin.android.ui.common.VerifyFragment
 import one.mixin.android.ui.setting.ui.page.RecoveryKitPage
@@ -36,7 +37,7 @@ class RecoveryFragment : BaseFragment(R.layout.fragment_compose) {
         binding.titleView.isVisible = false
         binding.compose.setContent {
             RecoveryKitPage({
-                navTo(VerifyFragment.newInstance(VerifyFragment.FROM_PHONE), VerifyFragment.TAG)
+                navTo(AddPhoneFragment.newInstance(), AddPhoneFragment.TAG)
             }, {
                 navTo(MnemonicPhraseBackupFragment.newInstance(), MnemonicPhraseBackupFragment.TAG)
             }, {

diff --git a/app/src/main/java/one/mixin/android/ui/setting/ui/page/AddPhoneBeforePage.kt b/app/src/main/java/one/mixin/android/ui/setting/ui/page/AddPhoneBeforePage.kt
@@ -0,0 +1,125 @@
+package one.mixin.android.ui.setting.ui.page
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import one.mixin.android.R
+import one.mixin.android.compose.MixinTopAppBar
+import one.mixin.android.compose.theme.MixinAppTheme
+import one.mixin.android.ui.landing.components.HighlightedTextWithClick
+import one.mixin.android.ui.landing.components.NumberedText
+import one.mixin.android.ui.setting.AddPhoneFragment
+
+@Composable
+fun AddPhoneBeforePage(hasPhone: Boolean, next: () -> Unit) {
+    MixinAppTheme {
+        Column {
+            MixinTopAppBar(
+                title = {
+                },
+                actions = {
+                    IconButton(onClick = {}) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_support),
+                            contentDescription = null,
+                            tint = MixinAppTheme.colors.icon,
+                        )
+                    }
+                },
+            )
+            Column(modifier = Modifier.padding(horizontal = 20.dp)) {
+                Spacer(modifier = Modifier.height(50.dp))
+                Icon(modifier = Modifier.align(Alignment.CenterHorizontally), painter = painterResource(R.drawable.ic_moblie_number), tint = Color.Unspecified, contentDescription = null)
+                Spacer(modifier = Modifier.height(20.dp))
+                Text(
+                    stringResource(
+                        if (hasPhone) {
+                            R.string.Change_Mobile_Number
+                        } else {
+                            R.string.Add_Mobile_Number
+                        }
+                    ),
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                    fontSize = 18.sp, fontWeight = FontWeight.W600, color = MixinAppTheme.colors.textPrimary
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                HighlightedTextWithClick(
+                    stringResource(R.string.Add_Phone_desc, stringResource(R.string.Set_up_Pin_more)),
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                    stringResource(R.string.Set_up_Pin_more),
+                    color = MixinAppTheme.colors.textAssist,
+                    fontSize = 14.sp,
+                    lineHeight = 21.sp
+                ) {
+
+                }
+                Spacer(modifier = Modifier.height(16.dp))
+                NumberedText(
+                    modifier = Modifier
+                        .fillMaxWidth(), numberStr = "1", instructionStr = stringResource(R.string.add_phone_instruction_1)
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                NumberedText(
+                    modifier = Modifier
+                        .fillMaxWidth(), numberStr = "2", instructionStr = stringResource(R.string.add_phone_instruction_2)
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                NumberedText(
+                    modifier = Modifier
+                        .fillMaxWidth(), numberStr = "3", instructionStr = stringResource(R.string.add_phone_instruction_3)
+                )
+                Spacer(modifier = Modifier.height(16.dp))
+                NumberedText(
+                    modifier = Modifier
+                        .fillMaxWidth(), numberStr = "4", instructionStr = stringResource(R.string.add_phone_instruction_4),
+                    color = MixinAppTheme.colors.red
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
+                Button(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(48.dp),
+                    onClick = next,
+                    colors =
+                    ButtonDefaults.outlinedButtonColors(
+                        backgroundColor = MixinAppTheme.colors.accent
+                    ),
+                    shape = RoundedCornerShape(32.dp),
+                    elevation =
+                    ButtonDefaults.elevation(
+                        pressedElevation = 0.dp,
+                        defaultElevation = 0.dp,
+                        hoveredElevation = 0.dp,
+                        focusedElevation = 0.dp,
+                    ),
+                ) {
+                    Text(
+                        text = stringResource(R.string.Start),
+                        color = Color.White
+                    )
+                }
+                Spacer(modifier = Modifier.height(30.dp))
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/one/mixin/android/ui/setting/ui/page/AddPhonePage.kt b/app/src/main/java/one/mixin/android/ui/setting/ui/page/AddPhonePage.kt
@@ -0,0 +1,79 @@
+package one.mixin.android.ui.setting.ui.page
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import one.mixin.android.R
+import one.mixin.android.compose.MixinTopAppBar
+import one.mixin.android.compose.theme.MixinAppTheme
+import one.mixin.android.session.Session
+import one.mixin.android.ui.landing.components.HighlightedTextWithClick
+
+@Composable
+fun AddPhonePage(hasPhone: Boolean, next: () -> Unit) {
+    MixinAppTheme {
+        Column {
+            MixinTopAppBar(
+                title = {
+                    Text(stringResource(R.string.Mobile_Number))
+                },
+                actions = {
+
+                },
+            )
+            Column(modifier = Modifier.padding(horizontal = 20.dp)) {
+                Spacer(modifier = Modifier.height(50.dp))
+                Icon(modifier = Modifier.align(Alignment.CenterHorizontally), painter = painterResource(R.drawable.ic_moblie_number), tint = Color.Unspecified, contentDescription = null)
+                Spacer(modifier = Modifier.height(36.dp))
+                if (hasPhone) {
+                    HighlightedTextWithClick(
+                        stringResource(R.string.Change_Phone_desc, Session.getAccount()?.phone ?: "", stringResource(R.string.Set_up_Pin_more)),
+                        modifier = Modifier.align(Alignment.CenterHorizontally),
+                        stringResource(R.string.Set_up_Pin_more),
+                        color = MixinAppTheme.colors.textAssist,
+                        fontSize = 14.sp,
+                        lineHeight = 21.sp
+                    ) {
+
+                    }
+                } else {
+                    HighlightedTextWithClick(
+                        stringResource(R.string.Add_Phone_desc, stringResource(R.string.Set_up_Pin_more)),
+                        modifier = Modifier.align(Alignment.CenterHorizontally),
+                        stringResource(R.string.Set_up_Pin_more),
+                        color = MixinAppTheme.colors.textAssist,
+                        fontSize = 14.sp,
+                        lineHeight = 21.sp
+                    ) {
+
+                    }
+                }
+                Spacer(modifier = Modifier.height(36.dp))
+                ClickItem(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(8.dp))
+                        .clickable { next.invoke() },
+                    stringResource(if (hasPhone) R.string.Change_Mobile_Number else R.string.Add_Mobile_Number), ""
+                )
+            }
+        }
+    }
+}
diff --git a/app/src/main/res/drawable/ic_moblie_number.xml b/app/src/main/res/drawable/ic_moblie_number.xml
@@ -0,0 +1,41 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="72dp"
+    android:viewportWidth="76"
+    android:viewportHeight="72">
+  <path
+      android:pathData="M15,2L42,2A6,6 0,0 1,48 8L48,64A6,6 0,0 1,42 70L15,70A6,6 0,0 1,9 64L9,8A6,6 0,0 1,15 2z"
+      android:strokeWidth="4"
+      android:fillColor="#00000000"
+      android:strokeColor="#D3D4D5"/>
+  <path
+      android:pathData="M24,9H33"
+      android:strokeWidth="4"
+      android:fillColor="#00000000"
+      android:strokeColor="#D3D4D5"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M64.89,50H41L35.293,54.615C33.986,55.673 32.036,54.742 32.036,53.06V50H30C26.686,50 24,47.314 24,44V30C24,26.686 26.686,24 30,24H64.967C68.294,24 70.985,26.706 70.967,30.033L70.89,44.033C70.872,47.334 68.191,50 64.89,50Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="4"
+      android:fillColor="?attr/bg_white"
+      android:strokeColor="#D3D4D5"/>
+  <path
+      android:pathData="M33,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+  <path
+      android:pathData="M51,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+  <path
+      android:pathData="M39,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+  <path
+      android:pathData="M57,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+  <path
+      android:pathData="M45,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+  <path
+      android:pathData="M63,37m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"
+      android:fillColor="#D3D4D5"/>
+</vector>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -1795,4 +1795,12 @@
     <string name="Backup_Now">Backup Now</string>
     <string name="Backup_Mnemonic_Phrase_desc">Protect your assets by backing up your mnemonic phrase now.</string>
     <string name="Backup_Mnemonic_Phrase_Warning">Please back up your mnemonic words now! This mnemonic is one of the MPC wallet key fragments. Once the device is lost or the application is uninstalled, if you do not have a backup, you will not be able to log in to your current Mixin account again (%1$s).</string>
+    <string name="Add_Phone_desc">你可以通过手机号登录你的账号，手机号将关联至 MPC 钱包的密钥分片，完整的密钥只存在当前设备的 TEE 安全环境中，阅读文档以了解%1$s。</string>
+    <string name="Change_Phone_desc">你可以通过手机号登录你的账号，当前手机号（%1$s）已关联到 MPC 钱包的密钥分片，完整的密钥只存在当前设备的 TEE 安全环境中，阅读文档以了解%2$s。</string>
+    <string name="Add_Mobile_Number">Add Mobile Number</string>
+    <string name="add_phone_instruction_1">手机号和助记词将链接到同一个密钥分片。</string>
+    <string name="add_phone_instruction_2">手机号和助记词登录的是同一个账号。</string>
+    <string name="add_phone_instruction_3">无法添加一个已注册为 Mixin Messenger 账号的手机号。</string>
+    <string name="add_phone_instruction_4">手机号绑定后无法删除。</string>
+    <string name="Change_Mobile_Number">Change Mobile Number</string>
 </resources>