#htmlfor | Explore Tumblr posts and blogs

holytheoristtastemaker · 5 years ago

Quote

In this post, we are going to leverage AWS Amplify authentication while still building the UI we want. Prerequisites Seeing as this is a post about AWS and AWS Amplify, you should be set up with both of those. Don't have an AWS account yet? You can set one up here. To interact with AWS Amplify you need to install the CLI via npm. $ yarn global add @aws-amplify/cli Setting up our project Before we can show how to build a custom UI using Amplify, we first need a project to work from. Let's use create-react-app to get a React app going. $ npx create-react-app amplify-demo $ cd amplify-demo With our boilerplate project created we can now add the Amplify libraries we are going to need to it. $ yarn add aws-amplify aws-amplify-react Now we need to initialize Amplify and add authentication to our application. From the root of our new amplify-demo application, run the following commands with the following answers to each question. $ amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project amplify-demo ? Enter a name for the environment prod ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building: javascript ? What javascript framework are you using react ? Source Directory Path: src ? Distribution Directory Path: build ? Build Command: npm run-script build ? Start Command: npm run-script start $ amplify add auth Using service: Cognito, provided by: awscloudformation The current configured provider is Amazon Cognito. Do you want to use the default authentication and security configuration? Default configuration Warning: you will not be able to edit these selections. How do you want users to be able to sign in? Username Do you want to configure advanced settings? No, I am done. Successfully added resource amplifydemobc1364f5 locally Now that we have the default authentication via Amplify added to our application we can add the default login. To do that go ahead and update your App component located at src/App.js to have the following code. import React from "react"; import logo from "./logo.svg"; import "./App.css"; import { withAuthenticator } from "aws-amplify-react"; import Amplify from "aws-amplify"; import awsconfig from "./aws-exports"; Amplify.configure(awsconfig); function App() { return ( Internal Application behind Login ); } export default withAuthenticator(App); The default Amplify authentication above leverages the higher-order component, withAuthenticator. We should now be able to see that our App component is behind a login. Go ahead and start the app up in development mode by running yarn start. We should see something like below. Customizing The Amplify Authentication UI Now that we have the default authentication wired up it's time to customize it. In the previous blog post we essentially inherited from the internal Amplify components like SignIn. This allowed us to leverage the functions already defined in that component. But, this felt like the wrong abstraction and a bit of a hack for the long term. It was/is a valid way to get something working. But it required knowing quite a few of the implementation details implemented in the parent component. Things like knowing how handleInputChange and _validAuthStates were getting used in SignIn were critical to making the brute force version below work as expected. import React from "react"; import { SignIn } from "aws-amplify-react"; export class CustomSignIn extends SignIn { constructor(props) { super(props); this._validAuthStates = ["signIn", "signedOut", "signedUp"]; } showComponent(theme) { return ( Username .....omitted..... ); } } But in running with this brute force approach for a bit I was able to form up a better way to customize the Amplify authentication UI. The approach, as we are going to see, boils down to three changes. Instead of using the higher-order component, withAuthenticator. We are going to instead use the component instead. This is the component built into the framework that allows for more customization. We are going to change our App component to make use of an AuthWrapper component that we will write. This is the component that can manage the various states of authentication we can be in. Finally, we will write our own CustomSignIn component to have it's own UI and logic. Let's go ahead and dive in with 1️⃣. Below is what our App component is going to look like now. import React from "react"; import { Authenticator } from "aws-amplify-react"; import "./App.css"; import Amplify from "aws-amplify"; import awsconfig from "./aws-exports"; import AuthWrapper from "./AuthWrapper"; Amplify.configure(awsconfig); function App() { return ( ); } export default App; Notice that our App component is now an entry point into our application. It uses the Authenticator component provided by Amplify instead of the higher-order component. We tell that component to hide all the default authentication UI, we are going to create our own. Then inside of that, we make use of a new component we are going to create called AuthWrapper. This new component is going to act as our router for the different authentication pieces we want to have. For this blog post, we are just going to implement the login workflow. But the idea is transferrable to other things like signing up and forgot password. Here is what AuthWrapper ends up looking like. import React, { Component } from "react"; import { InternalApp } from "./InternalApp"; import { CustomSignIn } from "./SignIn"; class AuthWrapper extends Component { constructor(props) { super(props); this.state = { username: "" }; this.updateUsername = this.updateUsername.bind(this); } updateUsername(newUsername) { this.setState({ username: newUsername }); } render() { return ( ); } } export default AuthWrapper; Here we can see that AuthWrapper is a router for two other components. The first one is CustomSignIn, this is the custom login UI we can build-out. The second one is our InternalApp which is the application UI signed in users can access. Note that both components get the authState passed into them. Internally the components can use this state to determine what they should do. Before taking a look at the CustomSignIn component, let's look at InternalApp to see how authState is leveraged. import React, { Component } from "react"; import logo from "../src/logo.svg"; export class InternalApp extends Component { render() { if (this.props.authState === "signedIn") { return ( Internal Application behind Login ); } else { return null; } } } Notice that we are checking that authState === "signedIn" to determine if we should render the application UI. This is a piece of state that is set by the authentication components defined in AuthWrapper. Now let's see what our customized authentication for the login prompt looks like. Here is what CustomSignIn looks like. import React, { Component } from "react"; import { Auth } from "aws-amplify"; export class CustomSignIn extends Component { constructor(props) { super(props); this._validAuthStates = ["signIn", "signedOut", "signedUp"]; this.signIn = this.signIn.bind(this); this.handleInputChange = this.handleInputChange.bind(this); this.handleFormSubmission = this.handleFormSubmission.bind(this); this.state = {}; } handleFormSubmission(evt) { evt.preventDefault(); this.signIn(); } async signIn() { const username = this.inputs.username; const password = this.inputs.password; try { await Auth.signIn(username, password); this.props.onStateChange("signedIn", {}); } catch (err) { if (err.code === "UserNotConfirmedException") { this.props.updateUsername(username); await Auth.resendSignUp(username); this.props.onStateChange("confirmSignUp", {}); } else if (err.code === "NotAuthorizedException") { // The error happens when the incorrect password is provided this.setState({ error: "Login failed." }); } else if (err.code === "UserNotFoundException") { // The error happens when the supplied username/email does not exist in the Cognito user pool this.setState({ error: "Login failed." }); } else { this.setState({ error: "An error has occurred." }); console.error(err); } } } handleInputChange(evt) { this.inputs = this.inputs || {}; const { name, value, type, checked } = evt.target; const check_type = ["radio", "checkbox"].includes(type); this.inputs[name] = check_type ? checked : value; this.inputs["checkedValue"] = check_type ? value : null; this.setState({ error: "" }); } render() { return ( {this._validAuthStates.includes(this.props.authState) && ( Username Password Login )} ); } } What we have defined up above is a React component that is leveraging the Amplify Authentication API. If we take a look at signIn we see many calls to Auth to sign a user in or resend them a confirmation code. We also see that this._validAuthStates still exists. This internal parameter to determines whether we should show this component inside of the render function. This is a lot cleaner and is not relying on knowing the implementation details of base components provided by Amplify. Making this not only more customizable but a lot less error-prone as well. If you take a look at the class names inside of the markup you'll see that this component is also making use of TailwindCSS. Speaking as a non-designer, Tailwind is a lifesaver. It allows you to build out clean looking interfaces with utility first classes. To add Tailwind into your own React project, complete these steps. Run yarn add tailwindcss --dev in the root of your project. Run ./node_modules/.bin/tailwind init tailwind.js to initialize Tailwind in the root of your project. Create a CSS directory mkdir src/css. Add a tailwind source CSS file at src/css/tailwind.src.css with the following inside of it. @tailwind base; @tailwind components; @tailwind utilities; From there we need to update the scripts in our package.json to build our CSS before anything else. "scripts": { "tailwind:css":"tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css", "start": "yarn tailwind:css && react-scripts start", "build": "yarn tailwind:css && react-scripts build", "test": "yarn tailwind:css && react-scripts test", "eject": "yarn tailwind:css && react-scripts eject" } Then it is a matter of importing our new Tailwind CSS file, import "./css/tailwind.css"; into the root of our app which is App.js. 💥 We can now make use of Tailwind utility classes inside of our React components. Conclusion AWS Amplify is gaining a lot of traction and it's not hard to see why. They are making it easier and easier to integrate apps into the AWS ecosystem. By abstracting away things like authentication, hosting, etc, folks are able to get apps into AWS at lightning speed. But, with abstractions can come guard rails. Frameworks walk a fine line between providing structure and compressing creativity. They need to provide a solid foundation to build upon. But at the same time, they need to provide avenues for customization. As we saw in this post the default Amplify authentication works fine. But we probably don't want exactly that when it comes to deploying our own applications. With a bit of work and extending the framework into our application, we were able to add that customization.

http://damianfallon.blogspot.com/2020/04/customizing-aws-amplify-authentication.html

#SEO #Local SEO training

1 note · View note

dipitca · 6 years ago

Photo

Variety of Wheel Kits and Kits Bundles at DipIt.ca If you want to purchase Wheel Kits and Kits Bundles then shop if from DipIt.ca. Here you will get the largest collection of Plasti Dip products at the lowest prices in Canada. Watch the infographic or visit the website at https://dipit.ca/kits-bundles/wheel-kits.htmlfor more details.

#Wheel Kits #Kits Bundles #Plasti Dip Aerosols products #Plasti Dip #Plastidip #plastidip canada #Plasti Dip Canada

4 notes · View notes

jedi--archives · 2 years ago

Text

htmlのforと区別するためね。classNameと同じってので納得。

0 notes

newdb211 · 4 years ago

Text

James Cameron Avatar Serial Key Generator

James Cameron Avatar Movie

Keygen for the Avatar game Find Education Purpose. 070201 2 avatar game demo download avatar PC game rar download avatar game crack avatar game series Avatar game keygen. Gamers, Navi, indigenous Pandora meet and discover other life forms that have ever been seen in.

First start avatar and choose manual option to enter the serial code. Then run keygen and copy 'Hardware-ID' and then click generate. Simply copy the generated key from keygen and paste it in place of serial code.Click finish and game will start. Click to download: Download avatar game cd key keygen Download avatar. On the highly 8. Open Avatar Keygen - Reloaded folder and click on keygen.exe. HtmlFor James Cameron s Avatar The Game on the PC. James Cameron’s Avatar: The Game is a shooter game and published by Ubisoft, Gameloft released on December 1, 2009 & designed for Microsoft Windows. As a soldier player is equipped with firearms such as assault rifles, shotguns, grenade launchers & flamethrowers. For James Cameron's Avatar: The Game on the PC, a GameFAQs Q&A question titled 'Serial number or activation key for james cameron avatar the game plsssss?'

30 Jul 2012 avatar maker game james cameron’s avatar avatar creator game avatar airbender game create avatar game avatar the game download for free. 17 Jan 2013 James Cameron’s Avatar The Game Activation Keygen.. HOW TO DOWNLOAD JAMES CAMERON AVATAR ZOHAIB TORRENT WORKING. 18 Jul 2013 James Cameron’s Avatar 100% Working Keygen Ultima Forever Quest for the Avatar Crack, Keygen, Patch, Serial by SKIDROW [Leaked] dm_51e7a0daa6cf4 is now on Dailymotion Games Download Link: l.gg6t. For James Cameron’s Avatar: The Game on the PC, a GameFAQs Answers Does anyone know the serial number to play this game? Link for download is. Software And Games » activation key james cameron avatar TOTAL. WEEK. DOWNLOAD james camerons avatar 0. DOWNLOAD product key explorer. The website of Avatar The Game, the official licensed videogame for the James Cameron movie. Available Decemeber 2009 on Playstation 3, Xbox 360,. 29 Jan 2010 Open up what you downloaded, 2.don’t worry bout the update just yet. 3. TURN OFF YOUR INTERNET!! For the love of all thats holly, just turn it. Hi..i need keygen for James Cameron Avatar : The game. help me please. Just download, run and generate a serial number oblokujemy the full version of the. 11 Dec 2009 James Cameron’s Avatar: The Game is the official video game based on the film, and it takes you deep into the heart of Pandora. 26 Jun 2010 I am going to show you how to activate james cameron avatar. First download the crack+keygen (100% working + reloaded). Download From this First start avatar and choose manual option to enter the serial code. Then run.

James Cameron Avatar Movie

0 notes

suzanneshannon · 5 years ago

Text

Using Formik to Handle Forms in React

Component-driven front-end libraries, like React, can ease the task of wiring web forms but can also get verbose and redundant. That’s why I want to introduce you to Formik, a small library that solves the three most annoying parts of writing forms in React:

State manipulation

Form validation (and error messages)

Form submission

We’re going to build a form together in this post. We’ll start with a React component then integrate Formik while demonstrating the way it handles state, validation, and submissions.

Creating a form as a React component

Allowing form elements to manage their own state in React makes them uncontrolled components. That’s just a fancy way of saying the DOM handles the state instead of React. And while that works, it is often easier to use controlled components, where React handles the state and serves as the single source of truth rather than the DOM.

The markup for a straightforward HTML form might look something like this:

<form> <div className="formRow"> <label htmlFor="email">Email address</label> <input type="email" name="email" className="email" /> </div> <div className="formRow"> <label htmlFor="password">Password</label> <input type="password" name="password" className="password" /> </div> <button type="submit">Submit</button> </form>

We can convert that into a controlled React component like so:

This is a bit verbose but it comes with some benefits:

We get a single source of truth for form values in the state.

We can validate the form when and how we want.

We get performance perks by loading what we need and when we need it.

OK, so why Formik again?

As it is with anything JavaScript, there’s already a bevy of form management libraries out there, like React Hook Form and Redux Form, that we can use. But there are several things that make Formik stand out from the pack:

It’s declarative: Formik eliminates redundancy through abstraction and taking responsibility for state, validation and submissions.

It offers an Escape Hatch: Abstraction is good, but forms are peculiar to certain patterns. Formik abstracts for you but also let’s you control it should you need to.

It co-locates form states: Formik keeps everything that has to do with your form within your form components.

It’s adaptable: Formik doesn’t enforce any rules on you. You can use as less or as much Formik as you need.

Easy to use: Formik just works.

Sound good? Let’s implement Formik into our form component.

Going Formik

We will be building a basic login form to get our beaks wet with the fundamentals. We’ll be touching on three different ways to work with Formik:

Using the useFormik hook

Using Formik with React context

Using withFormik as a higher-order component

I’ve created a demo with the packages we need, Formik and Yup.

Method 1: Using the useFormik hook

As it is right now, our form does nothing tangible. To start using Formik, we need to import the useFormik hook. When we use the hook, it returns all of the Formik functions and variables that help us manage the form. If we were to log the returned values to the console, we get this:

We’ll call useFormik and pass it initialValues to start. Then, an onSubmit handler fires when a form submission happens. Here’s how that looks:

Then we’ll bind Formik to our form elements:

// This is a React component function BaseFormik() { const formik = useFormik({ initialValues: { email: "", password: "" }, onSubmit(values) { // This will run when the form is submitted } }); // If you're curious, you can run this Effect // useEffect(() => { // console.log({formik}); // }, [])   return ( // We bind "onSubmit" to "formik.handleSubmit" <form className="baseForm" onSubmit={formik.handleSubmit} noValidate> <input type="email" name="email" id="email" className="email formField" value={formik.values.email} // We also bind our email value onChange={formik.handleChange} // And, we bind our "onChange" event. /> </form> ) }

This is how the binding works:

It handles form submission with onSubmit={formik.handleSubmit}.

It handles the state of inputs with value={formik.values.email} and onChange={formik.handleChange}.

If you take a closer look, we didn’t have to set up our state, nor handle the onChange or onSubmit events as we’d typically do with React. The complete change to our form goes:

However as you might have noticed, our form contains some redundancy. We had to drill down formik and manually bind the form input’s value and onChange event. That means we should de-structure the returned value and immediately bind the necessary props to a dependent field, like this:

// This is a React component function BaseFormik() { const {getFieldProps, handleSubmit} = useFormik({ initialValues: { email: "", password: "" }, onSubmit(values) { // This will run when the form is submitted } }); // If you're curious, you can run this Effect // useEffect(() => { // console.log({formik}); // }, [])   return ( <form className="baseForm" onSubmit={handleSubmit} noValidate> <input type="email" id="email" className="email formField" {...getFieldProps("email")} // We pass the name of the dependent field /> </form> ) }

Let’s take things even further with the included <Formik/> component.

Method 2: Using Formik with React context

Keep in mind, you don’t have to use these components when working with <Formik/> but they do require <Formik/> (or withFormik) when using them.

Using <Formik/> requires an overhaul because it uses the render props pattern as opposed to hooks with useFormik. The render props pattern isn’t something new in React. It is a pattern that enables code re-usability between components — something hooks solve better. Nevertheless, <Formik/> has a bagful of custom components that make working with forms much easier.

import { Formik } from "formik";   function FormikRenderProps() { const initialValues = { email: "", password: "" }; function onSubmit(values) { // Do stuff here... alert(JSON.stringify(values, null, 2)); } return ( <Formik {...{ initialValues, onSubmit }}> {({ getFieldProps, handleSubmit }) => ( <form className="baseForm" onSubmit={handleSubmit} noValidate> <input type="email" id="email" className="email formField" {...getFieldProps("email")} /> </form> )} </Formik> ); }

Notice that initialValues and onSubmit have been completely detached from useFormik. This means we are able to pass the props that <Formik/> needs, specifically initialValues and useFormik.

<Formik/> returns a value that’s been de-structured into getFieldProps and handleSubmit. Everything else basically remains the same as the first method using useFormik.

Here’s a refresher on React render props if you’re feeling a little rusty.

We haven’t actually put any <Formik/> components to use just yet. I’ve done this intentionally to demonstrate Formik’s adaptability. We certainly do want to use those components for our form fields, so let’s rewrite the component so it uses the <Form/> component.

import { Formik, Field, Form } from "formik";   function FormikRenderProps() { const initialValues = { email: "", password: "" }; function onSubmit(values) { // Do stuff here... alert(JSON.stringify(values, null, 2)); } return ( <Formik {...{ initialValues, onSubmit }}> {() => ( <Form className="baseForm" noValidate> <Field type="email" id="email" className="email formField" name="email" /> </Form> )} </Formik> ); }

We replaced <form/> with <Form/> and removed the onSubmit handler since Formik handles that for us. Remember, it takes on all the responsibilities for handling forms.

We also replaced <input/> with <Field/> and removed the bindings. Again, Formik handles that.

There’s also no need to bother with the returned value from <Formik/> anymore. You guessed it, Formik handles that as well.

Formik handles everything for us. We can now focus more on the business logic of our forms rather than things that can essentially be abstracted.

We’re pretty much set to go and guess what? We’ve haven’t been concerned with state managements or form submissions!

“What about validation?” you may ask. We haven’t touched on that because it’s a whole new level on its own. Let’s touch on that before jumping to the last method.

Form validation with Formik

If you’ve ever worked with forms (and I bet you have), then you’re aware that validation isn’t something to neglect.

We want to take control of when and how to validate so new opportunities open up to create better user experiences. Gmail, for example, will not let you input a password unless the email address input is validated and authenticated. We could also do something where we validate on the spot and display messaging without additional interactions or page refreshes.

Here are three ways that Formik is able to handle validation:

At the form level

At the field level

With manual triggers

Validation at the form level means validating the form as a whole. Since we have immediate access to form values, we can validate the entire form at once by either:

using validate, or

using a third-party library with validationSchema.

Both validate and validationSchema are functions that return an errors object with key/value pairings that those of initialValues. We can pass those to useFormik, <Formik/> or withFormik.

While validate is used for custom validations, validationSchema is used with a third-party library like Yup.

Here’s an example using validate:

// Pass the `onSubmit` function that gets called when the form is submitted. const formik = useFormik({ initialValues: { email: "", password: "" }, // We've added a validate function validate() { const errors = {}; // Add the touched to avoid the validator validating all fields at once if (formik.touched.email && !formik.values.email) { errors.email = "Required"; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formik.values.email) ) { errors.email = "Invalid email address"; } if (formik.touched.password && !formik.values.password) { errors.password = "Required"; } else if (formik.values.password.length <= 8) { errors.password = "Must be more than 8 characters"; } return errors; }, onSubmit(values) { // Do stuff here... } }); // ...

And here we go with an example using validationSchema instead:

const formik = useFormik({ initialValues: { email: "", password: "" }, // We used Yup here. validationSchema: Yup.object().shape({ email: Yup.string() .email("Invalid email address") .required("Required"), password: Yup.string() .min(8, "Must be more than 8 characters") .required("Required") }), onSubmit(values) { // Do stuff here... } });

Validating at the field level or using manual triggers are fairly simple to understand. Albeit, you’ll likely use form level validation most of the time. It’s also worth checking out the docs to see other use cases.

Method 3: Using withFormik as a higher-order component

withFormik is a higher-order component and be used that way if that’s your thing. Write the form, then expose it through Formik.

A couple of practical examples

So, let’s look at a couple of practical applications: displaying error messages and generating a username based on what’s entered in the email input.

Displaying error messages

We’ve built our form and validated it. And we’ve caught some errors that can be found in our errors object. But it’s no use if we aren’t actually displaying those errors.

Formik makes this a pretty trivial task. All we need to do is check the errors object returned by any of the methods we’ve looked at — <Formik/>, useFormik or withFormik — and display them:

<label className="formFieldLabel" htmlFor="email"> Email address <span className="errorMessage"> {touched["email"] && errors["email"]} </span> </label> <div className="formFieldWrapInner"> <input type="email" id="email" className="email formField" {...getFieldProps("email")} /> </div>

If there’s an error during validation, {touched["email"] && errors["email"]} will display it to the user.

We could do the same with <ErrorMessage/>. With this, we only need to tell it the name of the dependent field to watch:

<ErrorMessage name="email"> {errMsg => <span className="errorMessage">{errMsg}</span>} </ErrorMessage>

Generating a username from an email address

For example: [email protected] produces @jane.

Formik exposes helpers that can “intercept” its functionality and lets us perform some effects.In the case of auto-generating a username, one way will be through Formik’s setValues:

onSubmit(values) { // We added a `username` value for the user which is everything before @ in their email address. setValues({ ...values, username: `@${values.email.split("@")[0]}` }); }

Type in an email address and password, then submit the form to see your new username!

Wrapping up

If you’re ready to take Formik to the next level, I’d suggest looking through their resources as a starting point. There are so many goodies in there and it’s a good archive of what Formik can do as well as more tutorials that get into deeper use cases.

Good luck with your forms!

The post Using Formik to Handle Forms in React appeared first on CSS-Tricks.

Using Formik to Handle Forms in React published first on https://deskbysnafu.tumblr.com/

0 notes

recruitmentdubai · 5 years ago

Text

Using Formik to Handle Forms in React

State manipulation

Form validation (and error messages)

Form submission

We’re going to build a form together in this post. We’ll start with a React component then integrate Formik while demonstrating the way it handles state, validation, and submissions.

Creating a form as a React component

The markup for a straightforward HTML form might look something like this:

We can convert that into a controlled React component like so:

This is a bit verbose but it comes with some benefits:

We get a single source of truth for form values in the state.

We can validate the form when and how we want.

We get performance perks by loading what we need and when we need it.

OK, so why Formik again?

It’s declarative: Formik eliminates redundancy through abstraction and taking responsibility for state, validation and submissions.

It offers an Escape Hatch: Abstraction is good, but forms are peculiar to certain patterns. Formik abstracts for you but also let’s you control it should you need to.

It co-locates form states: Formik keeps everything that has to do with your form within your form components.

It’s adaptable: Formik doesn’t enforce any rules on you. You can use as less or as much Formik as you need.

Easy to use: Formik just works.

Sound good? Let’s implement Formik into our form component.

Going Formik

We will be building a basic login form to get our beaks wet with the fundamentals. We’ll be touching on three different ways to work with Formik:

Using the useFormik hook

Using Formik with React context

Using withFormik as a higher-order component

I’ve created a demo with the packages we need, Formik and Yup.

Method 1: Using the useFormik hook