musicland/src/screens/Profile/ChangePassword.js

import { BlurView } from 'expo-blur'
import React, { useState } from 'react'
import { Platform, Pressable, Text, View } from 'react-native'
import { responsiveHeight } from 'react-native-responsive-dimensions'
import { useGlobal } from 'reactn'
import { checkIfPasswordIsStrongEnough } from '../../actions/signupActions'
import { background } from '../../assets'
import GradientButton from '../../components/GradientButton'
import firebase from '../../config/firebase'
import { isWeb } from '../../hooks/useLayoutType'
import Page from '../../layouts/Page'
import { goBack } from '../../navigation/NavigationService'
import { gutters, Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import EditInput from './components/EditInput'

const ChangePassword = () => {
  const [oldPassword, setOldPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [passwordError, setPasswordError] = useState('')
  const [loading, setLoading] = useState(false)
  const [, setTooltip] = useGlobal('_tooltip')

  const onChangeNewPassword = (val) => {
    setNewPassword(val)
    if (!val) {
      setPasswordError('')
      return
    }
    if (!checkIfPasswordIsStrongEnough({ password: val })) {
      setPasswordError(
        'Le mot de passe doit contenir au moins 6 caractères, une majuscule et un chiffre.'
      )
    } else {
      setPasswordError('')
    }
  }

  const onSave = async () => {
    const oldVal = (oldPassword || '').trim()
    const newVal = (newPassword || '').trim()
    if (!oldVal || !newVal) return
    if (passwordError) return

    try {
      setLoading(true)
      const user = firebase.auth().currentUser
      if (!user?.email) return

      try {
        const credential = firebase.auth.EmailAuthProvider.credential(user.email, oldVal)
        await user.reauthenticateWithCredential(credential)
      } catch (reauthErr) {
        throw {
          code: 'auth/wrong-password',
          message: 'Mot de passe actuel incorrect.',
        }
      }

      await user.updatePassword(newVal)
      setTooltip({ type: 'success', text: 'Mot de passe mis à jour' })
      goBack()
    } catch (e) {
      console.log('ChangePassword error', e?.message)
      const msg =
        e?.code === 'auth/wrong-password'
          ? 'Mot de passe actuel incorrect.'
          : e?.message || 'Mise à jour impossible'
      setTooltip({ type: 'error', text: msg })
    } finally {
      setLoading(false)
    }
  }
  return (
    <Page
      headerType="NAVIGATE"
      title="Modifier mon mot de passe"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: isWeb ? 'transparent' : '#0000004D',
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={Platform.OS !== 'ios' ? 10 : 20}
          style={{
            paddingHorizontal: 20,
            paddingVertical: 16,
            borderRadius: 20,
            overflow: 'hidden',
            backgroundColor: Palette.glass,
            gap: 4,
          }}
          // experimentalBlurMethod={
          //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          // }
        >
          <EditInput
            placeholder="Mot de passe actuel"
            label="Mot de passe actuel"
            type="password"
            value={oldPassword}
            setValue={setOldPassword}
          />
          <EditInput
            placeholder="Nouveau mot de passe"
            label="Nouveau mot de passe"
            type="password"
            value={newPassword}
            setValue={onChangeNewPassword}
          />
          {!!passwordError && (
            <Text
              style={{
                fontSize: 12,
                color: Palette.red,
                fontFamily: FONT_FAMILY.InterRegular,
                marginTop: 6,
              }}
            >
              {passwordError}
            </Text>
          )}
          <Pressable>
            <Text
              style={{
                fontSize: 12,
                color: Palette.white,
                fontFamily: FONT_FAMILY.HelveticaNeueRegular,
              }}
            >
              Mot de passe oublié?
            </Text>
          </Pressable>
        </BlurView>
      </View>
      <GradientButton
        title={loading ? 'Chargement...' : 'Enregistrer les modifications'}
        containerStyle={{
          width: '80%',
          alignSelf: 'center',
        }}
        onPress={onSave}
        disabled={loading || !oldPassword?.trim() || !newPassword?.trim() || !!passwordError}
      />
    </Page>
  )
}

export default ChangePassword