sign-in and sign-up requests

we should create a useState variable for each field in the form. remember to import useState from 'react' in the first line of the file.

import React, { useState } from 'react';
// ...
const [email, setEmail] = useState('');

each <input> tag should show the variable as its value each <input> tag should have an onChange attribute that updates the variable in useState

<input value={email} onChange={((e) => setEmail(e.target.value))}></input>

in LogIn screen we have button "Login", it should call a function "login", so it should have the attribute

<button onClick={login}`>Log In</button>

function "login" should send a REST POST request from the login form, receive a JSON response, store token and navigate to the menu screen

documentation of sign-in API is at https://retina.docs.norcivilianlabs.org/api.html

we use fetch to send REST requests.

for example, if a POST request in the documentation is this

POST https://functions.yandexcloud.net/d4esr6ie5khkuno72hib Content-Type: text/plain { "op": "login", "email": "fetsorn@gmail.com", "password": "G3jbME5UTjmPRV" }

in the Login component we call fetch like this

function login() {
  const response = await fetch(
    "https://functions.yandexcloud.net/d4esr6ie5khkuno72hib", 
    { 
      method: "post", 
      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, 
      body: JSON.stringify({ 
        op: "login", 
        email: email, // this is variable from useState
        password: password, // this is variable from useState  
      }) 
    }
  );
}

The response is according to Fetch API and Response type. It has 200 in response.status and { token: "..."} in response.body

so at the end of login function we need to save that token to a useState variable

function login() {
  // ...
  setToken(response.body.token);
}