password state and the characters displayed on input must be different [7:13pm]

[frankcollins3]

first proposed approach: 1: create new redux state. Now password will have 2 states. the PW to save into DB & the PW to display onto input

[frankcollins3]

thought I closed this. it looked like I fixed it but the logged values that I intended to be non hashed are hashed [1:56am]

[frankcollins3]

heres the setting of state I believe to be non hashed:

const passwordinputhandler= (event:any) => {
        let value:string = event.target.value
        console.log('event from usernameinputhandler')
        console.log(event)
        console.log('value')
        console.log(value)
        SET_PASSWORD_INPUT( { payload: value })
        inputHandler(event, SET_DUMMY_PASSWORD_INPUT)
    }

import $ from 'jquery'
import attributeJQ from './attributeJQ'

export default async function inputHandler (event:any, SET_STATE:any) {
    let target = event.target
    let value:string = event.target.value
        if (event.target.id === 'password') {
            let hashedValue:string = '*'.repeat(value.length)
            $(event.target).attr('value', hashedValue)
            SET_STATE({payload: hashedValue})
        }
         else {
            // $(event.target).attr('value', value)
            attributeJQ(target, 'value', value)
            **SET_STATE({payload: value})**
        }        
}

heres the react element that has DUMMY_PASSWORD_INPUT state set to be its value. this works.

    const renderPasswordInput = () => {
        return (
<input style={{ color: '#72d3fe', fontSize: '20px'}} onFocus={inputfocus} value={DUMMY_PASSWORD_INPUT} onMouseEnter={ghosttext} onChange={passwordinputhandler} id="password" type="text"></input> 
        )
    }

what doesn't work is the hashing seems to somehow persist to: PASSWORD_INPUT

first proposed approach: thought of checking redux while writing this. the TYPE: might be wrong

[2:02am]

[frankcollins3]

wrong but decent guess:

      case 'SET_PASSWORD_INPUT':
      // case 'SET_PASSWORD_INPUT' || 'SET_EMAIL_INPUT' || 'SET_USERNAME_INPUT' || 'SET_AGE_INPUT':
        return {
          ...state,
          PASSWORD_INPUT: action.payload
        }

      case 'SET_DUMMY_PASSWORD_INPUT':
        return {
          ...state,
          DUMMY_PASSWORD_INPUT: action.payload
        }

[2:03am]

export const SET_PASSWORD_INPUT = (action) => {
  return {
    type: "SET_PASSWORD_INPUT",
    payload: action.payload
  }
}

export const SET_DUMMY_PASSWORD_INPUT = (action) => {
  return {
    type: "SET_DUMMY_PASSWORD_INPUT",
    payload: action.payload
  }
}

[2:03am] also the actions.js set up correctly.

[frankcollins3]

*let hashedValue:string = ''.repeat(value.length)** !!

I believe this is it. the param is being mutated by this value. time to create a duplicate copy of the strings to use 1 copy to be hashed that can't be used as the payload param of the other redux function which isn't the input state. 2: second copy that to stay away from invoked func that expresses the param as a .repeated('*')hash

[2:06am]

[frankcollins3]

    const passwordinputhandler= (event:any) => {
        let value:string = event.target.value

crazy because if that works its interesting because: the value is set over here.

SET_PASSWORD_INPUT( { payload: value })
        inputHandler(event, SET_DUMMY_PASSWORD_INPUT)

but the inputHandler(event) first argument is event. It seems to still mutate the other declared value (if this is correct) [2:07am]

[frankcollins3]

    const passwordinputhandler= (event:any) => {
        let value:string = event.target.value
        let valueNotToHash:string = value
        console.log('event from usernameinputhandler')
        console.log(event)
        console.log('value')
        console.log(value)
        SET_PASSWORD_INPUT( { payload: valueNotToHash })
        inputHandler(event, SET_DUMMY_PASSWORD_INPUT)
    }

if right about this being the obstacle it's a tangled situation.

proposed approach: was thinking of unhashing it but that doesn't make sense.

oh wow not a bad idea. one doesn't have to hash the string. they can just add an asterisk for every input. and change the other state to be the user submitted data from the password input. This allows the adding of "*" into the input without any hashing anywhere

[2:12am]

[frankcollins3]

const passwordinputhandler= (event:any) => {
        let value:string = event.target.value
        SET_PASSWORD_INPUT( { payload: value } )
        SET_DUMMY_PASSWORD_INPUT( { payload: '*' } )
}

code constraining user to entering only 1 character into input *SET_DUMMY_PASSWORD_INPUT( { payload: '' } )**

[2:16am]

[frankcollins3]

proposed approach: separate concerns by having this function call another function that deals with SET__STATE func1: SET_DUMMY_STATE func2: SET_STATE

[2:17am]

[frankcollins3]

so surprised this isn't working:

    const inputhandlerCB = (inputHandlerObj:any) => {
        let value:string = inputHandlerObj.target.value
        console.log('inputhandlerCB FUNCTION')
        console.log(value)

    }

    const passwordinputhandler= (event:any) => {
        inputhandlerCB(event)
        let value:string = event.target.value
        let duplicate:string = value
        // inputHandler(event, SET_DUMMY_PASSWORD_INPUT)

            let hashedValue:string = '*'.repeat(duplicate.length)
            // $(event.target).attr('value', hashedValue)
            SET_DUMMY_PASSWORD_INPUT({payload: hashedValue})
        //  SET_DUMMY_PASSWORD_INPUT({payload: hashedValue})

        // SET_PASSWORD_INPUT( { payload: value } )
        // SET_DUMMY_PASSWORD_INPUT( { payload: '*' } )
        // SET_PASSWORD_INPUT( { payload: 'a' })
        // SET_PASSWORD_INPUT( { payload: `${PASSWORD_INPUT}${value}`} )
    }

[2:34am]

[frankcollins3]

👎 wow:

          const passwordinputhandler = async (event:any) => {            
            let originalValue:string = event.target.value

            const clonedEvent = { ...event }
            let cloneValue:string = clonedEvent.target.value

            const PasswordPromise = new Promise( (resolve, reject) => {
                resolve(
                    SET_PASSWORD_INPUT({payload: cloneValue})
                )
                reject( console.log('SET_PASSWORD_INPUT failed!'))
            })

            PasswordPromise
            .then( () => {
                const DummyPasswordPromise = new Promise( (resolve, reject) => {
                    let hashedValue:string = '*'.repeat(originalValue.length)
                    $(event.target).attr('value', hashedValue)
                    resolve(

                        SET_DUMMY_PASSWORD_INPUT({payload: hashedValue })
                        )

                    reject(console.log("DUMMY_PASSWORD_REJECTED!"))
                })
                DummyPasswordPromise
                .then( () => {
                    console.log("if you're here you care.")
                    console.log('PASSWORD_INPUT in promise')
                    console.log(PASSWORD_INPUT)
                    console.log('DUMMY_PASSWORD_INPUT in promise')
                    console.log(DUMMY_PASSWORD_INPUT)
                })
            })

[2:46am]

[frankcollins3]

next approach is to see if one can .join() or make 2 functions at once. 2 different events in 2 different objects somehow.

[2:47am]

[frankcollins3]

also proposed approach is to try local setState() possibly merge these two attempts together. (2 funcs called at once) [3:18am]

[frankcollins3]

const passwordinputhandler = async (event:any) => {
let originalValue:string = event.target.value const clonedEvent = { ...event } const cloneOfTheClone = { ...clonedEvent}

trying to separate concerns

[3:34am]

[frankcollins3]

👎 const passwordinputhandler = async (event:any) => {

function demands this to be a populated param

[3:37am]

[frankcollins3]

👎

<input id="password" type="text" style={{ color: '#72d3fe', fontSize: '20px'}} onFocus={inputfocus} value={DUMMY_PASSWORD_INPUT} onMouseEnter={ghosttext} 
onClick={(event) => {
    passwordinputhandler(event:any);
    passwordinputhandler2(event:any);
  }}>
</input> 

seeing if I can avoid (event) definition errors but onClick( { } ) cant accept event

[3:42pm]

[frankcollins3]

const passwordinputhandler = (onChangeEvent:any) => {
            console.log('passwordinputhandler and event')
            console.log(passwordinputhandler)
            console.log(onChangeEvent)

            let hashedValue:string = "*".repeat(onChangeEvent.target.value)
            // let hashedValue:string = "*".repeat(onChangeEvent.target.value)
            SET_DUMMY_PASSWORD_INPUT({payload: hashedValue})
          }

          const passwordinputhandler2 = (onChangeEvent:any) => {
            console.log('passwordinputhandler2 ')
            console.log(passwordinputhandler2)
            console.log(onChangeEvent)
            let onChangeValue:string = onChangeEvent.target.value
            SET_PASSWORD_INPUT({payload: onChangeValue})           

          }

          const prepasswordinputhandler = (event:any) => {
                const clone_1 = {...event}
                console.log('clone_1')
                console.log(clone_1)

                const clone_2 = {...event}     
                console.log('clone_2')
                console.log(clone_2)

                passwordinputhandler(clone_1)
                passwordinputhandler2(clone_2)
          }

probably not DRY code but attempt is made [3:53am]

state wasn't setting but I didn't set DUMMY_INPUT and thats what the input state is.

[frankcollins3]

SET_DUMMY_PASSWORD_INPUT({payload: "*".repeat(event.target.value)}) attempt at constraining the asterisk-asserting expression to be within the payload function value [3:57am]

[frankcollins3]

SET_DUMMY_PASSWORD_INPUT({payload: "*".repeat(event.target.value)}) 👎 SET_PASSWORD_INPUT({payload: ${event.target.value}.repeat(event.target.value)})

"*".repeat(event.target.value) I'm surprised this doesn't work.

[4:05am]

[frankcollins3]

new proposed approach: set up a modularized reusable function so this can be expressed elsewhere [4:08pm]

[frankcollins3]

export default function halfAssHash(char:string, string:string) {
    let stringLength:number = string.length
    let hashedValue = `${char}`.repeat(stringLength)
    // SET_DUMMY_PASSWORD_INPUT({payload: "*".repeat(eventValueLength)})
    return hashedValue
}

export default function halfAssHash(char:string, string:string) {
    let stringLength:number = string.length
    let hashedValue = char.repeat(stringLength)
    // SET_DUMMY_PASSWORD_INPUT({payload: "*".repeat(eventValueLength)})
    return hashedValue
}

let hashedValue = **char.repeat**(stringLength)

object properties doesn't work but with string it does. kind of confused.

[4:20am]

[frankcollins3]

SET_PASSWORD_INPUT( { payload: hashedValue } ) nowhere does the redux facilitated PASSWORD_INPUT state meet with the hashedValue.

even with the clone = {...event} still need to have the "hashing" go in the payload function so that it doesn't somehow persist to assert asterisk on the state that needs to be preserved for the postgres db Users

[4:22am]

[frankcollins3]

98 still at it but have officially separated the inputs.

proposed approach: see if I can handle the transfer of characters from the input value to the "*" as an inline react element behavior

[3:24pm]

[frankcollins3]

<input value={"*".repeat(DUMMY_PASSWORD_INPUT.length)} onMouseEnter={ghosttext} insane that this works but isn't separated from the other state that is formed from the event.object params. [3:28pm]

[frankcollins3]

/utility/halfAssHash:

export default function halfAssHash(char:string, string:string) {
    let duplicate:string = string
    let stringLength:number = duplicate.length
    let hashedValue = `${char}`.repeat(stringLength)
    // SET_DUMMY_PASSWORD_INPUT({payload: "*".repeat(eventValueLength)})
    return hashedValue
}

this halfHasher that lazy-asserts specified characters upon designated strings now includes a duplicate of the value sent.

[3:34pm]

[frankcollins3]

const passwordinputhandler = (event: React.ChangeEvent) => { perhaps not using same keyword can unclog but it looks like the problem is original value mutation. [4:00pm]

[frankcollins3]

!!!!! /redux/reducers this is where the hashing should undergo execution. separation of concerns. [4:00pm]

[frankcollins3]

case 'SET_DUMMY_PASSWORD_INPUT':
        return {
          ...state,
          DUMMY_PASSWORD_INPUT: `${state.DUMMY_PASSWORD_INPUT}`
          // DUMMY_PASSWORD_INPUT: "*".repeat(action.payload.length)
        }

doing this within the reducer it seems. Just having trouble because its only setting 1 asterisk. and it currently sets the ast

[frankcollins3]

const doesn't prevent the value from changing which goes against my understanding of it. 👎 "*".repeat(event.target.value) [4:57pm]

[frankcollins3]

bookmarking the wonder of whether setTimeout() and delaying the hashing will work [4:59pm]

[frankcollins3]

setDummyState which is the <input value={}/> has ALL the characters continually updated EVERY input update

the PASSWORD_INPUT is continually set to be all length when the DUMMY_PASSWORD_INPUT is also interacting

separating the objects don't separate the fact that the source of truth is the react element inline value={} prop.

success is found in actually separating the source somehow [5:22pm]

[frankcollins3]

instead of string state Im considering that one of the new source of truths will be: useState( [] ) // array state and will toggle string by joining characters in the array.

[5:24pm]

[frankcollins3]

that moment you remember... pretty sure there's a native javascript input prop that toggles "*" asterisk. wow maybe I'm wrong.

[frankcollins3]

invocation connected to react element with onChange={} props

        const passwordinputhandler = async (evt: React.ChangeEvent<HTMLInputElement>) => {
            let target = evt.target
            let value:any = target.value  // cant use string because we'll be looping over it     
            const statePromise = new Promise( (resolve, reject) => {
                resolve([ SET_PASSWORD_INPUT({payload: value}) ])
            })            
            return value ? statePromise : []               
        };

input:

onChange={}: onChange={(event) => { passwordinputhandler(event); }}>

[6:10pm]