App.tsx

import { SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import React, {useState} from 'react'

import BouncyCheckbox from 'react-native-bouncy-checkbox'

//Form validation
import * as Yup from 'yup'
import {Formik } from 'formik'

// Create some requirements for a password
// Use this later when checking if a user-inputted password meets the requirements
const PasswordSchema = Yup.object().shape({
  passwordLength: Yup.number()
  .min(4, 'Should be min of 4 characters')
  .max(16, 'Should be max of 16 characters')
  .required('Length is required')
})

export default function App() {

  // let password = ''
  // let setPassword = (value) => {password = value};

  // setPassword('Ham');

  // function useState(defaultValue : object) {
  //   let data = defaultValue;
  //   let setter = function (value : object) {
  //     data = value;
  //   }
  //   return data, setter;
  // }

  const [password, setPassword] = useState('')
  const [isPassGenerated, setIsPassGenerated] = useState(false)
  const [lowerCase, setLowerCase] = useState(true)
  const [upperCase, setUpperCase] = useState(false)
  const [numbers, setNumbers] = useState(false)
  const [symbols, setSymbols] = useState(false)

  const generatePasswordString = (passwordLength: number) => {
    /*  This is what we would do to replace the Yup package
    let newPass = "SFhgdsf^%987";
    if (newPass.length < 4) {
      console.log("Should be min of 4 characters");
      return null;
    } else if (newPass.length > 16) {
      console.log("Should be max of 16 characters");
      return null;
    }
    return newPass;
    */

    let characterList = ''
    const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz'
    const digitChars = '0123456789'
    const specialChars = '!@#$%^&*()_+-='

    if (upperCase) {
      characterList += upperCaseChars
    }
    if (lowerCase) {
      characterList += lowerCaseChars
    }
    if (numbers) {
      characterList += digitChars
    }
    if (symbols) {
      characterList += specialChars
    }

    // if (/* condition1 */) {
    //   // code will run if condition1 is true
    // } else if (/* condition2 */) {
    //   // code will run if condition2 is true, and condition1 is false
    // } else if (/* condition3 */) {
    //   // code will run if condition3 is true, and condition1 and condition2 is false.
    // } else {
    //   // code will run if all above branches did not run
    // }

    // if (/* condition4 */) {
    //   // code will run if condition4 is true
    // }
    // if (/* condition5 */) {
    //   // code will run if condition5 is true
    // }

    const passwordResult = createPassword(characterList, passwordLength);
    //const passwordResult2 = createPassword('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', 5);

    //Update UI with whatever password is generated
    setPassword(passwordResult)
    setIsPassGenerated(true)

  }

  const createPassword = (characters: string, passwordLength: number) => {
    let result = ''
    for(let i = 0; i < passwordLength; i++) {
      const characterIndex = Math.floor(Math.random() * characters.length);
      result += characters.charAt(characterIndex);
    }
    return result
  }

  const resetPasswordState = () => {
    setPassword('')
    setIsPassGenerated(false)
    setLowerCase(true)
    setUpperCase(false)
    setNumbers(false)
    setSymbols(false)
  }

  return (
    <ScrollView keyboardShouldPersistTaps = 'handled'>
      <SafeAreaView style = {styles.appContainer}>
        <View style = {styles.formContainer}>
          <Text style = {styles.title}>Password Generator</Text>
          <Formik
       initialValues={{ passwordLength: '' }}
       validationSchema={PasswordSchema}
       onSubmit={ values => {
        console.log(values)
        generatePasswordString(Number(values.passwordLength)) // TODO: 
       }}
     >
       {({
         values,
         errors,
         touched,
         isValid,
         handleChange,
         handleSubmit,
         handleReset
         /* and other goodies */
       }) => (
          <>
          <View style = {styles.inputWrapper}>
            <View style = {styles.inputColumn}>
              <Text style = {styles.heading}>Password Length</Text>
              {touched.passwordLength && errors.passwordLength && (
                <Text style = {styles.errorText}>
                  {errors.passwordLength}
                </Text>
              )}
            </View>
            <TextInput 
              style = {[styles.inputStyle, styles.textColorBlack]} 
              value = {values.passwordLength} 
              onChangeText={handleChange('passwordLength')} 
              placeholder = 'Ex. 8'
              keyboardType ='numeric'
              />
          </View>
          <View style = {styles.inputWrapper}>
            <Text style = {styles.heading}>Include lowercase</Text>
            <BouncyCheckbox
            disableBuiltInState
            isChecked = {lowerCase}
            onPress={() => setLowerCase(!lowerCase)}
            fillColor='#038aff'  
            />
          </View>
          <View style = {styles.inputWrapper}>
            <Text style = {styles.heading}>Include uppercase</Text>
            <BouncyCheckbox
            disableBuiltInState
            isChecked = {upperCase}
            onPress={() => setUpperCase(!upperCase)}
            fillColor='#038aff'  
            />
          </View>
          <View style = {styles.inputWrapper}>
            <Text style = {styles.heading}>Include numbers</Text>
            <BouncyCheckbox
            disableBuiltInState
            isChecked = {numbers}
            onPress={() => setNumbers(!numbers)}
            fillColor='#038aff'  
            />
          </View>
          <View style = {styles.inputWrapper}>
            <Text style = {styles.heading}>Include symbols</Text>
            <BouncyCheckbox
            disableBuiltInState
            isChecked = {symbols}
            onPress={() => setSymbols(!symbols)}
            fillColor='#038aff'  
            />
          </View>
          <View style = {styles.inputWrapper}></View>
          <View style = {styles.inputWrapper}></View>
          <View style = {styles.inputWrapper}></View>

          <View style = {styles.formActions}>
            <TouchableOpacity
            disabled = {!isValid}
            style = {styles.primaryBtn}
            onPress = {handleSubmit}
            >
              <Text style = {styles.primaryBtnTxt}>Generate Password</Text>
            </TouchableOpacity>
            <TouchableOpacity
            style = {styles.secondaryBtn}
            onPress={ () => {
              handleReset()
              resetPasswordState()
            } }
            >
              <Text style = {styles.secondaryBtnTxt}>Reset</Text>
            </TouchableOpacity>
          </View>
          </>
       )}
     </Formik>
        </View>
        {isPassGenerated ? (
          <View style = {[styles.card, styles.cardElevated]}>
            <Text style = {styles.subTitle}>Result: </Text>
            <Text style = {styles.description}>Long Press to Copy </Text>
            <Text selectable = {true} style = {styles.generatedPassword}>{password}</Text>
          </View>
        ) : null}
      </SafeAreaView>
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  appContainer: {
    flex: 1,
  },
  formContainer: {
    margin: 8,
    padding: 8,
  },
  title: {
    fontSize: 32,
    fontWeight: '600',
    marginBottom: 15,
  },
  subTitle: {
    fontSize: 26,
    fontWeight: '600',
    marginBottom: 2,
  },
  description: {
    color: '#758283',
    marginBottom: 8,
  },
  heading: {
    fontSize: 15,
  },
  inputWrapper: {
    marginBottom: 15,
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  inputColumn: {
    flexDirection: 'column',
  },
  inputStyle: {
    padding: 8,
    width: '30%',
    borderWidth: 1,
    borderRadius: 4,
    borderColor: '#16213e',
  },
  errorText: {
    fontSize: 12,
    color: '#ff0d10',
  },
  formActions: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  primaryBtn: {
    width: 120,
    padding: 10,
    borderRadius: 8,
    marginHorizontal: 8,
    backgroundColor: '#5DA3FA',
  },
  primaryBtnTxt: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: '700',
  },
  secondaryBtn: {
    width: 120,
    padding: 10,
    borderRadius: 8,
    marginHorizontal: 8,
    backgroundColor: '#CAD5E2',
  },
  secondaryBtnTxt: {
    textAlign: 'center',
  },
  card: {
    padding: 12,
    borderRadius: 6,
    marginHorizontal: 12,
  },
  cardElevated: {
    backgroundColor: '#ffffff',
    elevation: 1,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowColor: '#333',
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  generatedPassword: {
    fontSize: 22,
    textAlign: 'center',
    marginBottom: 12,
    color:'#000'
  },
  textColorBlack: {
    color: '#000000'
  }
})