Forem: No Face

Setup SSH for Github using PowerShell

No Face — Sun, 25 Jun 2023 10:45:07 +0000

This is a tutorial on how to setup SSH connection for GitHub using PowerShell.

Generate the SSH key.
```
 ssh-keygen -t ed25519 -C "email@sample.com"
```
When you're prompted to "Enter a file in which to save the key", you can press Enter to accept the default file location which is: C:\Users\<windows UserName>/.ssh/id_ed25519, or you can specify your desired file location / file name.

When done, 2 files should be generated.
1 private key file and 1 public key file (file with .pub extension).
Start up the ssh-agent.
```
 Start-Service ssh-agent
```

Add the SSH Key to the ssh-agent.

 ssh-add <path to your private SSH Key>

 # if you generate to the default file location
 ssh-add c:/Users/<WindowsUserName>/.ssh/id_ed25519

Clip / Copy your public SSH key.

 Get-Content c:/Users/<WindowsUserName>/.ssh/id_ed25519.pub | Set-Clipboard

Add your public key to your github account.
5.1. In the upper-right corner of any page, click your profile photo, then click Settings.

5.2. In the "Access" section of the sidebar, click SSH and GPG keys.

5.3. Click New SSH key or Add SSH key.

5.4. In the "Title" field, add a descriptive label for the new key.

5.5. In the "Key" field, paste your public key.

5.6. Click Add SSH key.

Test the connection.

 ssh -T git@github.com

You might see a warning like this.

 The authenticity of host 'github.com (IP ADDRESS)' can't be established.
 ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
 Are you sure you want to continue connecting (yes/no)?

if so, verify that the fingerprint the message matches you public key fingerprint. And if it does, type yes then enter.

If successful, you should see a message like this.

 Hi <github userName>! You've successfully authenticated, but GitHub does not provide shell access.

Extra

After setting up your SSH, and still could not connect or keeps getting an error (especially the error below.)

...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
...

Try setting up your SSH config.

Setting up SSH config

Go to your c:/Users/<WindowsUseName>/.ssh directory and check if a config file (no extension) is present.

If not, create one. If it already exist, edit.
And in the file, add the following text.

Host *
    Hostname github.com
    IdentityFile ~/.ssh/<private key filename>

Then try accessing git again.

Hope this helps!

--- END ---

Easy Multi-Page Form with React-Router and React-Hook-Form

No Face — Wed, 18 May 2022 17:15:56 +0000

In this tutorial, I'll be showing you how to create a multi-page form – consisting of a Form page, Confirm / Review page, and Complete page only using react-router and react-hook-form.

1. First, let's create our pages/components.

// Form

const Form = () => {
  return (
    <div>
      <form onSubmit={onSubmit}>
        <div>
          FirstName: <input type="text" />
        </div>
        <div>
          LastName: <input type="text" />
        </div>
        <div>
          Gender:
          <input type="radio" value="male" /> Male
          <input type="radio" value="female" /> Female
        </div>
        <div>
          Country:
          <select>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="India">India</option>
          </select>
        </div>
        <button type="submit">Confirm</button>
      </form>
    </div>
  );
};
export default Form;

// Confirm

const Confirm = () => {
  return (
    <div>
      <p>firstName: </p>
      <p>lastName: </p>
      <p>Gender: </p>
      <p>Country: </p>
      <button>back</button>
      <button>Submit</button>
    </div>
  );
};
export default Confirm;

// Complete

const Complete = () => {
  return (
    <div>
      <p>Registration successful!</p>
    </div>
  );
};
export default Complete;

2. Next, by using react-hook-form's useForm we will get the form data from our Form component.

const Form = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    // logs form data
    console.log(data);
  });

  return (
    <div>
      <form onSubmit={onSubmit}>
        <div>
          FirstName: <input type="text" {...register("firstName")} />
        </div>
        <div>
          LastName: <input type="text" {...register("lastName")} />
        </div>
        <div>
          Gender:
          <input type="radio" value="male" {...register("gender")} /> Male
          <input type="radio" value="female" {...register("gender")} /> Female
        </div>
        <div>
          Country:
          <select {...register("country")}>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
            <option value="India">India</option>
          </select>
        </div>
        <button type="submit">Confirm</button>
      </form>
    </div>
  );
};

This should show the form data in console on submit.

// output would be something like this
{
 firstName: "John"
 lastName: "Doe"
 gender: "male"
 country: "Canada"
}

3. Pass the data to our Confirm Page using react-router's useNavigate state prop.

const Form = () => {
  const navigate = useNavigate();
  const { register, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    // Pass the form data on state prop when navigating to confirm page.
    navigate("/confirm", { state: data });
  });
 ...

4. Displaying data on Confirm page -- this time using react-router's useLocation.

const Confirm = () => {
  // Get current location's state
  const { state } = useLocation();

  // Display the data using `state.{input name}`
  // In this case, input name will be the value we set on input register from the Form component
  return (
    <div>
      <p>firstName: {state.firstName}</p>
      <p>lastName: {state.lastName}</p>
      <p>Gender: {state.gender}</p>
      <p>Country: {state.country}</p>
      <Link to="/" state={state}>
        <button>back</button>
      </Link>
      <Link to="/complete">
        <button>Submit</button>
      </Link>
    </div>
  );
};

Note that we passed the form data again on this line.

...
      <Link to="/" state={state}>
        <button>back</button>
      </Link>
...

This is because when the user clicks the back button, we can "remember" the current input data and we would be able to display it to our form.

To do this, we will again get the form data values from the locations state prop and ww will display it as the defaultValues using useForm's reset.

const Form = () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const { register, reset, handleSubmit } = useForm();

  const onSubmit = handleSubmit((data) => {
    navigate("/confirm", { state: data });
  });

  useEffect(() => {
    // reset the entire form and set the defaultValues with state value
    reset(state);
  }, []);
...

We're done!

You can find the complete source in this link.