React native form - forms

I'm very new to react-native and I'm having trouble of what things to use.
I'm building an app in which I need to login or register. For now I just want to use a form, when I fill it submits datas to my api and get logged. I don't know what kind of form component I should use, there seem to be different component to install and use, I need some advice 'cause I'm a little bit lost.
Thanks in advance

I highly recommend you redux-form along with react-native-elements or nativebase

You can use tcomb-form-native.It simplifies creating a form.

Well to code it from scratch you need 2 textInput one for the username or email and the other for password and a button or touchableOpacity for Login or signUp button. and authfunction which is the function to certify the credentials. In your APP file you check wether the user is authenticated or no and display the next screen you can use redux to pass data around but I will make it simple here and use AsyncStorage to Authenticate the user let me know if you need it.
import React,{Component,useState} from ‘react’;
import {TextInput,Text,SafeAreaView,StyleSheet, Button} from ‘react-native’
export default function Login = () => { [username,setUsername]=useState();
[password,setPassword]=useState();
return(
setUsername(val)} />
setPassword(val)} />
authfunction(username,password)} />
);
}

Related

Send a code for password reset via email - Swift + Firebase

I am creating a simple Swift app. I have got the login working with Swift app. Now, when a user clicks on forgot-password, I want to send them an email with a code. Once he enters that code, he can enter a new password.
I looked up at Firebase.auth.auth() I saw functions like checkActionCode() and applyActionCode() - I couldnot understand a clear difference between them!
I also saw some other functions like confirmpasswordReset() and verifyPasswordResetCode().
However, I do not understand what function to use and how to send an email with the code. Can someone give me an overview of how can I do this? Thank you!
If the user forgot their password, you can send them a password reset email with:
Auth.auth().sendPasswordReset(withEmail: email) { (error) in
// ...
}
This email contains so-called OOB code and a link to an auto-generated page that allows them to reset their password. I recommend getting started with this approach, since you'll have to do the least work to get it up and running.
If you want to create your own page instead of the auto-generated one, have a look at the documentation on custom email action handlers. That page also contains an example showing how to call the handleResetPassword, handleRecoverEmail, and handleVerifyEmail methods.

Angular2 How to get specific data that users choose after selecting choices from dropdown option.

Hi I am really new to Angular2 (I know most of the concepts that angular2 provides tho) and I am having problems with getting specific data after choosing some options.
Currently, I have fake database and created some profiles of random people in the database.
And I have components with dropdown options. I want users to choose one of the options and once they are done with choosing, I want them to click 'Complete' button.
Once they do, they will be redirected to another component that shows data corresponding to their choice.
I am guessing I need to store data that users choose into a service and communication between these two components(one components with options, the other with lists of information based on users' choice) should utilize the service.
But I've got no idea how to do so. Help will be appreciated! Thank you!
First,Define you routes with an parameter like '/anotherRouter:option'
Then, keep the selected option in you component.
<select id="option" name="option" required [(ngModel)]="selectedOption" #address="ngModel">
...
</select>
Then, By click the Complete button, goto another component like this.
<button (click)="go()">Complete</button>
And at your component, define a function go like this(let guess you have inject Router from #angular/router):
go() {
this.router.navigate(['anotherRouter', selectedOption]);
}
Then get the selectedOption in your new component from the Params of #angular/router like +params['option'](the parameter passed while navigate).

Google Chrome Inspect Element Issue With Hidden ID's

I am not 100% sure if this is as big an issue has I seem to think it is right now but I think I may of found an issue or at else an hole within the Inspect Element viewer within Chrome.
I was using (I have now changed my settings) hidden ID's to set a number of defaults, one was users levels, another was to make the user active by default.
However when I view these ID's within the inspect Element view and then changed the values, submitting the form would submit the NEW value to the server and not the value I had given it.
For Example:
I had something like the following within my code,
<input type="hidden" name="data[user][level][id]" value="1" id="MyID">
I then changed it within the Inspect view to,
<input type="hidden" name="data[user][level][id]" value="2" id="MyID">
Then I submitted the form and was surprised that the NEW value was submitted, I was always under the inpresion that hidden ID's where not changeable and the browser should only submit the default values held within.
I have now changed this to letting the database default to a basic user and then I can change the users setting has I want to. But in some cases this may not be an option, so I was hoping for an answer or some feedback about how to make this more safe.
Am I just a bit slow, are there better methods (different ones) to passing 'hidden' data from forms to the server?
I was thinking about maybe using JQuery to add the needed hidden fields to the forms once the user had selected / submitted the form, but i am not sure if this is 100% safe or even if its a good idea.
Any ideas / feedback are very welcome.....
Many Thanks,
Glenn.
I had the same problem passing the database data into a modal,the solution i know is to use jquery ajax to get the informations from the database requesting a file,adding them into variables and compare the variables
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});
I used this code sample to do it.
Of course there are a few modifications to be done depending on your script
I found a better way of doing this, at lest in CakePHP. The CakePHP framework has inbuilt security calls. These in-built functions when added give you all sorts of stuff but the main reason I used them was to stop this sort of form tampering.
I am not 100% sure how it does this, but it adds a token to all forms and it checks to see if the form being submitted is right? Again not sure how the token works.
But here is the code I used ::
public function beforeFilter() {
$this->Auth->allow('index', 'SystemAccess');
$this->Security->blackHoleCallback = 'blackhole';
}
public function blackhole($type) {
$this->Auth->logout();
$this->Session->setFlash('Sorry a security issue has been detected, please try again or contact us for support.', 'default', array(), 'bad');
$this->redirect($this->Auth->redirect('/'));
}
Now I will add that the call the Auth logout I added to this for extra added security, as the user maybe have logged in on a system and it just not be them that is trying to do things that they should not.
Hope that helps others out!
But this is only a fix for when CakePHP is in use. I would take it that other frameworks would have their options but if your only using basic HTML? or a CMS like Drupal again there might be in built security.
Many Thanks
Glenn.
The only safe and best solution that I found for this issue is to check on the server side whether the user_id sent with the form is the same user_id logged in with or not.
Although using jquery is good idea, but, did not work with my case as am using data: $(this).serialize(),
However here's my code on the server side (Note, am using Laravel 5.4, but am sure it won't matter with your case)
if ($request->user_id != Auth::user()->id)
return json_encode("F**K YOU ! Don't Play Smart -_- !");
else
raw_material_category::create($request->all());
Hope this helped ;)

Drupal 7, user_profile_form form values not passing through drupal_get_form

Drupal 7, I want to load the user profile form into a module page. I have a custom field also that the user can configure, let's call this field "blah". It's a implemented as a dropdown field.
When I load the form using the following code everything is fine apart from the blah field which does not populate its user stored data.
form_load_include($form_state, 'inc', 'user', 'user.pages');
global $user;
$output .= drupal_render((drupal_get_form('user_profile_form', $user)));
Does anyone know how I would get the blah variable/value/user data into this rendered form? It is populated if I go to the standard user profile editing page at http://example.com/user/2/edit.
You should be able to achieve this using user_load api.
global $user;
$user_fields = user_load($user->uid);
print_r($user_fields);
Solved it! I think the very act of posting on Stack Overflow sometimes brings you around to working it out. It was just as simple as $user->field_blah['und'][0]['value'] = 12345;
Possible Solutions:-
1)If its a custom field make it belong to user entity bundle and true for user register form while attaching it to user bunble.
2)U can use field_attach_form,
3)form alter

How to clear the form when the user doesn't provide valid username/password

I designed a form as follows:
User Name: _______________
Password: _______________
Login
I also use jQuery Form Plugin to submit the form to the server side.
It will return if the server script finds some errors. The data returned by server is in JSON format. I would like to know how I can reset the user name + password when I know the username/password is invalid in a decent way.
In other words, I can manually use jQuery to empty the username/password field if the returned result indicates a failure. In fact, I am looking for a decent way built in Form Plugin or sth else that can do this part me for automatically. The only thing I have to do is to set a flag so that if the submission is failed, then the form will be resetted.
Thank you
You cam simply do:
$('#form_id').reset();
I don't think you need a plugin for such simple task. You simply call above code based on the response.
Run this.form.reset() when a form button (e.g. Reset) is being pressed.
e.g.
<form>
...
<input type="button" value="Reset!" onclick="this.form.reset();">
</form>