Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND
Accepted Solution

Password and Confirm Password using SystemPrompt?

Hello, 
Is it possible to use SystemCredentialsPrompt or SystemPrompt to show two textfields for Password and Confirm Password? 

With SystemCredentialsPrompt, the two fields are "userName" and "password". Instead, I would like to have Pass and Confirm Pass text fields?

I would do it using CustomDialog, but its too much work with layouts and stuff like that. 


just curious, when we turn on the development mode, how have they implemented the system prompt with two textfields?

 

Thanks!

 

S.

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: Password and Confirm Password using SystemPrompt?

Never mind, my bad, should have read the entire documentation of SystemCredentialsPrompt? i could use masking on the first textfield and show hintext as "Password". 

Sorry!

Developer
Posts: 1,636
Registered: ‎07-14-2008
My Device: Z10
My Carrier: Fido

Re: Password and Confirm Password using SystemPrompt?


shreyansjain wrote:

Never mind, my bad, should have read the entire documentation of SystemCredentialsPrompt? i could use masking on the first textfield and show hintext as "Password". 

Sorry!


I'm trying to mask the username field and set the inputmode to Password and it isn't working.

 

did you get it working?

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: Password and Confirm Password using SystemPrompt?

Yes. What I did was used a regular textfield and chose Password as Input method. Something like:

TextField {
inputMethod: TextFieldInputMode.Password
}

Let members know if it works for you!
Developer
Posts: 1,636
Registered: ‎07-14-2008
My Device: Z10
My Carrier: Fido

Re: Password and Confirm Password using SystemPrompt?


shreyansjain wrote:
Yes. What I did was used a regular textfield and chose Password as Input method. Something like:

TextField {
inputMethod: TextFieldInputMode.Password
}

Let members know if it works for you!

You add a TextField to SystemCredentialsPrompt class or you have a custom dialog class?

 

I just want to use SystemCredentialsPrompt and change the input mode for the username to Password.

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: Password and Confirm Password using SystemPrompt?

I am assuming you want the prompt for "Password" and "Confirm Password". Right?
If yes, the way I did was I created a custom dialog class with two TextField and both of them had "inputMethod: TextFieldInputMode.Password".

Ofcourse I had to use almost opaque background to let users know that they cant do anything else besides entering those fields (or OK and Cancel Button).

 

Wanna see my code?

 

S.

Developer
Posts: 1,636
Registered: ‎07-14-2008
My Device: Z10
My Carrier: Fido

Re: Password and Confirm Password using SystemPrompt?


shreyansjain wrote:

I am assuming you want the prompt for "Password" and "Confirm Password". Right?
If yes, the way I did was I created a custom dialog class with two TextField and both of them had "inputMethod: TextFieldInputMode.Password".

Ofcourse I had to use almost opaque background to let users know that they cant do anything else besides entering those fields (or OK and Cancel Button).

 

Wanna see my code?

 

S.


The SystemCredentialsPrompt dialog works perfectly except this problem.

 

Sure I would like to see your code.  Thanks

 

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: Password and Confirm Password using SystemPrompt?

So you Want "Password" and "ConfirmPassword" dialog instead of "Username" and "Password". Right?
Will share r the code in a bit.

S.
Developer
Posts: 1,636
Registered: ‎07-14-2008
My Device: Z10
My Carrier: Fido

Re: Password and Confirm Password using SystemPrompt?


shreyansjain wrote:
So you Want "Password" and "ConfirmPassword" dialog instead of "Username" and "Password". Right?
Will share r the code in a bit.

S.

Yes Please.

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: Password and Confirm Password using SystemPrompt?

As Promised!

Used this code in my app (StockDaddy Turbo).

 

import bb.cascades 1.0

Dialog {
    id: passDialog
    Container {
        preferredWidth: 768
        preferredHeight: 1280
        background: Color.create(0.0, 0.0, 0.0, 0.5)
        layout: DockLayout {
        }
        
        Container {
            topPadding: 50
            layout: DockLayout {
            }

            Container {
                leftPadding: 2
                ImageView {
                      // image for showing the dialog box
                    imageSource: "asset:///xxxxx.png"
                }
            }
            
            // for body of the dialog
            Container {
                topPadding: 5
                leftPadding: 23
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
                
                Container {
                    Label {
                        text: "Password Protection"
                        textStyle.base: SystemDefaults.TextStyles.TitleText
                        textStyle {
                            color: Color.White
                        }
                    }
                }
            }   
            Container {
                topPadding: 100
                leftPadding: 23
                Label {
                    text: "Please choose a password"
                    multiline: true
                    textStyle.base: SystemDefaults.TextStyles.BodyText
                    textStyle {
                        color: Color.Black
                    }
                }
                
                Container {
                    topPadding: 20
                    rightPadding: 50
                    TextField {
                        id: pass
                        hintText: "Password"
                        inputMode: TextFieldInputMode.Password
                        validator: Validator {
                            id: passValidator
                            mode: ValidationMode.Immediate
                            errorMessage: "Enter atleast 4 characters"
                            onValidate: {
                                if(pass.text.length >= 4){
                                    state = ValidationState.Valid;
                                }
                                else {
                                    state = ValidationState.Invalid;
                                }
                            }
                        }
                    }
                }
                
                Container {
                    topPadding: 20
                    rightPadding: 50
                    TextField {
                        id: confirmPass
                        hintText: "Confirm Password"
                        inputMode: TextFieldInputMode.Password
                        validator: Validator {
                            id: confirmPassValidator
                            mode: ValidationMode.Immediate
                            errorMessage: "Enter atleast 4 characters"
                            onValidate: {
                                if(confirmPass.text.length >= 4){
                                    state = ValidationState.Valid;
                                }
                                else {
                                    state = ValidationState.Invalid;
                                }
                            }
                        }
                    }
                }
                
                Container {
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    topPadding: 70
                    
                    Container {
                        leftPadding: 0
                        Button {
                            preferredWidth: 300
                            id: cancelButton
                            text: "Cancel"
                            onClicked: {
                                passDialog.close();
                            }
                        }                        
                    }
                    Container {
                        leftPadding: 40
                        rightPadding: 30
                    Button {
                        id: okButton
                        text: "OK"
                        preferredWidth: 300
                        onClicked: {
                            if(pass.text == "" && confirmPass.text == ""){
                                console.log("Please enter a Password!");
                            }
                            else{
                                if(confirmPassValidator.valid && passValidator.valid){
                                    if(pass.text == confirmPass.text){
                                        // DO some magic and then subsequently close the dialogBox
                                        // call the methods which needs to be invoked when OK button is clicked
                                        passDialog.close();
                                    }
                                    else {
                                        console.log("Password and Confirm Password doesn't match.");
                                         // reopen the dialog box
                                        passDialog.open();
                                    }                                     
                                }
                                else {
                                    console.log(passValidator.errorMessage);
                                }
                            }
                        }
                    }
                }
                }
                
                
            }
            
        }
    
    
    }
}

 

Make sense?