add app/pages/my/DeleteAccount.js

Strides-SPAPP/app/pages/my/DeleteAccount.js

@@ -0,0 +1,180 @@
+/**
+ * 删除账号页面
+ * @邠心vbe on 2025/06/27
+ */
+import React, { Component } from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import CheckBoxText from '../../components/CheckBoxText';
+import Button from '../../components/Button';
+import apiUser from '../../api/apiUser';
+import Dialog from '../../components/Dialog';
+import { PageList } from '../Router';
+import TextView from '../../components/TextView';
+import { getStorageJsonSync, setStorage, setStorageJson } from '../../utils/storage';
+import { setAccessToken } from '../../api/http';
+
+export default class DeleteAccount extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checkValue1: false,
+      checkValue2: false,
+      checkValue3: false
+    };
+  }
+
+  deleteAccount() {
+    Dialog.showDialog({
+      title: $t('profile.deleteAccount'),
+      message: $t('profile.confirmDeleteAccount'),
+      ok: $t('nav.confirm'),
+      callback: button => {
+        if (button == Dialog.BUTTON_OK) {
+          this.deleteMyAccount();
+        }
+      }
+    })
+  }
+
+  deleteMyAccount(again=false) {
+    Dialog.showProgressDialog();
+    apiUser.deleteAccount({
+      secondConfirm: again
+    }).then(res => {
+      toastShort($t('profile.deleteAccountSuccess'))
+      Dialog.dismissLoading();
+      this.requestLogout();
+      /*setTimeout(() => {
+        startPage(PageList.login);
+      }, 500);*/
+    }).catch(err => {
+      Dialog.dismissLoading();
+      //toastShort(err)
+      setTimeout(() => {
+        if (err.code == 5334) {
+          Dialog.showDialog({
+            title: $t('profile.deleteAccount'),
+            message: err.msg,
+            ok: $t("nav.confirm"),
+            callback: button => {
+              if (button == Dialog.BUTTON_OK) {
+                setTimeout(() => {
+                  this.deleteMyAccount(true);
+                }, 500)
+              }
+            }
+          })
+        } else {
+          Dialog.showResultDialog(err.msg);
+        }
+      }, 500);
+    })
+  }
+
+  async requestLogout() {
+    const data = await getStorageJsonSync('loginData');
+    if (data && data.email) {
+      delete data.password
+      setStorageJson('loginData', data);
+      setStorage('RegisterTokenDate', "");
+    }
+    global.userInfo = {}
+    /*this.setState({
+      isLogin: false,
+      userInfo: {}
+    });*/
+    Dialog.dismissLoading();
+    setAccessToken('');
+    startPage(PageList.home);
+  }
+
+  render() {
+    const styles = delStyle();
+    return (
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={$padding(16)}>
+        <View style={styles.cardView}>
+          <TextView style={styles.textTitle}>We’re sorry to see you go.</TextView>
+          <TextView style={styles.textMessage}>Please be aware that any remaining credits in your account will be forfeited and are non-refundable if you choose to delete your account.</TextView>
+          <TextView style={styles.textMessage}>To proceed with account deletion, please confirm your decision by pressing the "Delete Account" button.</TextView>
+          <TextView style={styles.textMessage}>Once confirmed, your account and all associated data will be permanently deleted and can not be recovered.</TextView>
+          <TextView style={styles.textMessage}>This action is irreversible.</TextView>
+          <View style={styles.confirmView}>
+            <TextView style={styles.textConfirm}>Please Confirm The Following</TextView>
+            <View>
+              <CheckBoxText
+                value={this.state.checkValue1}
+                onValueChange={(newValue) => this.setState({checkValue1: newValue})}
+                flexText={true}
+                text={"I understand that my remaining credits will be forfeited and are non-refundable."}
+                disabled={false}
+                textStyle={{fontSize: 12}}/>
+            </View>
+            <View>
+              <CheckBoxText
+                value={this.state.checkValue2}
+                onValueChange={(newValue) => this.setState({checkValue2: newValue})}
+                flexText={true}
+                text={"I confirm that my account and all associated data will be permanently deleted."}
+                disabled={false}
+                textStyle={{fontSize: 12}}/>
+            </View>
+            <View>
+              <CheckBoxText
+                value={this.state.checkValue3}
+                onValueChange={(newValue) => this.setState({checkValue3: newValue})}
+                flexText={true}
+                text={"I acknowledge that this action is irreversible and can not be undone."}
+                disabled={false}
+                textStyle={{fontSize: 12}}/>
+            </View>
+          </View>
+        </View>
+        <Button
+          style={styles.btnDelete}
+          text="DELETE ACCOUNT"
+          textColor="#FF0F2B"
+          disabled={!(this.state.checkValue1 && this.state.checkValue2 && this.state.checkValue3)}
+          onClick={() => this.deleteAccount()}/>
+      </ScrollView>
+    );
+  }
+}
+
+const delStyle = () => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: pageBackground
+  },
+  cardView: {
+    padding: 16,
+    borderRadius: 6,
+    backgroundColor: colorLight
+  },
+  btnDelete: {
+    backgroundColor: colorLight,
+    ...$margin(24, 0, 16)
+  },
+  textTitle: {
+    color: textPrimary,
+    fontSize: 16,
+    paddingBottom: 8
+  },
+  textMessage: {
+    color: textSecondary,
+    fontSize: 14,
+    paddingBottom: 16
+  },
+  confirmView: {
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderColor: "#ededed"
+  },
+  textConfirm: {
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: "500",
+    paddingBottom: 16
+  }
+})