WIP: 16 - Frontend for volunteers registrations and login

Gemfile

@@ -25,6 +25,7 @@ gem 'jbuilder', '~> 2.7'
 gem 'active_model_serializers', '~> 0.10.10'
 gem 'bcrypt', '~> 3.1.13'
 gem 'rack-attack', '~> 6.2', '>= 6.2.2'
+gem 'rack-cors'
 gem 'will_paginate', '~> 3.3'
 
 # Use Active Storage variant

Gemfile.lock

@@ -134,6 +134,8 @@ GEM
     rack (2.2.2)
     rack-attack (6.2.2)
       rack (>= 1.0, < 3)
+    rack-cors (1.1.1)
+      rack (>= 2.0.0)
     rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
@@ -276,6 +278,7 @@ DEPENDENCIES
   pry-rails
   puma (~> 4.1)
   rack-attack (~> 6.2, >= 6.2.2)
+  rack-cors
   rails (~> 6.0.2, >= 6.0.2.2)
   rspec-rails (~> 4.0)
   rubocop

app/controllers/api/volunteers_controller.rb

@@ -17,7 +17,7 @@ def auth
       volunteer = Volunteer.find_by(email: params[:auth][:email])
       if volunteer&.authenticate(params[:auth][:password])
         session[:volunteer_id] = volunteer.id
-        render json: volunteer, status: :ok
+        render json: volunteer, status: :created
       else
         session[:volunteer_id] = nil
         render json: { message: 'Authentication failed', code: 401 }, status: :unauthorized

app/javascript/client/components/Forms/Controls/Input/Input.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Input = (props) => {
+  return (
+    <div className="field">
+      <label className="label">{props.label}</label>
+      <div className="control">
+        <input
+          className={props.customInputClass}
+          name={props.name}
+          type={props.type}
+          placeholder={props.placeholder}
+          onChange={props.onChange}
+          value={props.value}
+        />
+      </div>
+    </div>
+  );
+};
+
+Input.propTypes = {
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.string,
+  placeholder: PropTypes.string,
+  customInputClass: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+Input.defaultProps = {
+  label: '',
+  type: 'string',
+  placeholder: '',
+  customInputClass: 'input',
+};
+
+export default Input;

app/javascript/client/components/Forms/Controls/Input/index.js

@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export default Input;

app/javascript/client/components/Forms/Controls/index.js

@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export { Input };

app/javascript/client/components/Forms/HelpOfferForm/HelpOfferForm.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HelpOfferForm = (props) => {
+  return <div></div>;
+};
+
+HelpOfferForm.propTypes = {};
+
+export default HelpOfferForm;

app/javascript/client/components/Forms/HelpOfferForm/index.js

@@ -0,0 +1,3 @@
+import HelpOfferForm from './HelpOfferForm';
+
+export default HelpOfferForm;

app/javascript/client/components/Forms/VolunteerLoginForm/VolunteerLoginForm.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from '../Controls';
+
+const VolunteerLoginForm = (props) => {
+  const [volunteerFormData, setVolunteerFormData] = useState({
+    email: '',
+    password: '',
+  });
+
+  const handleInputChange = (e) => {
+    setVolunteerFormData({
+      ...volunteerFormData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    console.log(volunteerFormData);
+  };
+
+  return (
+    <div>
+      <h1 className="title">Iniciar sessão</h1>
+      <form onSubmit={handleSubmit}>
+        <Input
+          label="Endereço de E-mail"
+          name="email"
+          type="email"
+          value={volunteerFormData.email}
+          onChange={handleInputChange}
+        />
+
+        <Input
+          label="Palavra-passe"
+          name="password"
+          value={volunteerFormData.password}
+          onChange={handleInputChange}
+          type="password"
+        />
+
+        <div className="filed">
+          <div className="control">
+            <button className="button is-success">Iniciar sessão</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+VolunteerLoginForm.propTypes = {};
+
+export default VolunteerLoginForm;

app/javascript/client/components/Forms/VolunteerLoginForm/index.js

@@ -0,0 +1,3 @@
+import VolunteerLoginForm from './VolunteerLoginForm';
+
+export default VolunteerLoginForm;

app/javascript/client/components/Forms/VolunteerRegisterForm/VolunteerRegisterForm.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Input } from '../Controls';
+
+const VolunteerRegisterForm = (props) => {
+  const [volunteerFormData, setVolunteerFormData] = useState({
+    fullname: '',
+    cellphone: '',
+    email: '',
+    password: '',
+    province: '',
+    county: '',
+    types_of_availability: '',
+  });
+
+  const handleInputChange = (e) => {
+    setVolunteerFormData({
+      ...volunteerFormData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    props.registerNewVolunteer(volunteerFormData);
+  };
+
+  return (
+    <div>
+      <h1 className="title">Criar nova conta</h1>
+      <form onSubmit={handleSubmit}>
+        <Input
+          label="Nome completo"
+          name="fullname"
+          value={volunteerFormData.fullname}
+          onChange={handleInputChange}
+        />
+
+        <Input
+          label="Número de telemóvel"
+          name="cellphone"
+          type="tel"
+          value={volunteerFormData.cellphone}
+          onChange={handleInputChange}
+        />
+
+        <Input
+          label="Endereço de E-mail"
+          type="email"
+          name="email"
+          value={volunteerFormData.email}
+          onChange={handleInputChange}
+        />
+
+        <Input
+          label="Palavra-passe"
+          name="password"
+          value={volunteerFormData.password}
+          onChange={handleInputChange}
+          type="password"
+        />
+
+        <Input
+          label="Província"
+          name="province"
+          value={volunteerFormData.province}
+          onChange={handleInputChange}
+        />
+
+        <Input
+          label="Município"
+          name="county"
+          value={volunteerFormData.county}
+          onChange={handleInputChange}
+        />
+
+        <div className="filed">
+          <div className="control">
+            <button className="button is-success">Criar nova conta</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+VolunteerRegisterForm.propTypes = {
+  registerNewVolunteer: PropTypes.func.isRequired,
+};
+
+export default VolunteerRegisterForm;

app/javascript/client/components/Forms/VolunteerRegisterForm/index.js

@@ -0,0 +1,3 @@
+import VolunteerRegisterForm from './VolunteerRegisterForm';
+
+export default VolunteerRegisterForm;

app/javascript/client/components/Forms/index.js

@@ -0,0 +1,5 @@
+import HelpOfferForm from './HelpOfferForm';
+import VolunteerLoginForm from './VolunteerLoginForm';
+import VolunteerRegisterForm from './VolunteerRegisterForm';
+
+export { HelpOfferForm, VolunteerLoginForm, VolunteerRegisterForm };

app/javascript/client/components/HelpPage/HelpPage.js

@@ -1,12 +1,76 @@
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import {
+  VolunteerRegisterForm,
+  VolunteerLoginForm,
+  HelpOfferForm,
+} from '../Forms';
+
 import { loadHelp } from '../../store/helps/actions';
+import { registerVolunteer } from '../../store/volunteers/actions';
 
 const HelpPage = (props) => {
   const { id } = useParams();
+  // TODO : Change default state to false
+  const [isHelping, setIsHelping] = useState(true);
+
+  const isAuthenticated = () => {
+    true;
+  };
+
+  const helpingForms = () => (
+    <div className="card" style={{ marginTop: '10px' }}>
+      <div className="card-content">
+        <div className="columns">
+          <div className="column">
+            <HelpOfferForm />
+          </div>
+        </div>
+      </div>
+
+      <footer className="card-footer">
+        <div className="card-footer-item">
+          <button
+            className="button is-danger"
+            onClick={() => setIsHelping(false)}
+          >
+            Cancelar
+          </button>
+        </div>
+      </footer>
+    </div>
+  );
+
+  const autheticationForms = () => (
+    <div className="card" style={{ marginTop: '10px' }}>
+      <div className="card-content">
+        <div className="columns">
+          <div className="column">
+            <VolunteerLoginForm />
+          </div>
+          <div className="column">
+            <VolunteerRegisterForm
+              registerNewVolunteer={props.registerVolunteer}
+            />
+          </div>
+        </div>
+      </div>
+
+      <footer className="card-footer">
+        <div className="card-footer-item">
+          <button
+            className="button is-danger"
+            onClick={() => setIsHelping(false)}
+          >
+            Cancelar
+          </button>
+        </div>
+      </footer>
+    </div>
+  );
 
   useEffect(() => {
     props.loadHelp(id);
@@ -22,20 +86,16 @@ const HelpPage = (props) => {
 
       <div>{props.help.description}</div>
       <br />
-      <button className="button">Oferecer Ajuda</button>
-      <br />
+      <button
+        className="button is-success"
+        onClick={() => setIsHelping(true)}
+        disabled={isHelping}
+      >
+        Oferecer Ajuda
+      </button>
       <br />
-      <div className="tabs">
-        <ul>
-          <li className="is-active">
-            <a>Ofertas de Ajuda Concluídas</a>
-          </li>
-          <li>
-            <a>Ajudas Pendentes</a>
-          </li>
-        </ul>
-      </div>
-      <div>Em Desenvolvimento...</div>
+
+      {isHelping ? (isAuthenticated ? helpingForms : autheticationForms) : null}
       <br />
       <br />
     </div>
@@ -55,6 +115,7 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     loadHelp: (id) => dispatch(loadHelp(id)),
+    registerVolunteer: (payload) => dispatch(registerVolunteer(payload)),
   };
 };
 

app/javascript/client/store/index.js

@@ -5,6 +5,7 @@ import { connectRouter, routerMiddleware } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 
 import helpsSlice from './helps/slice';
+import volunteersSlice from './volunteers/slice';
 
 export const history = createBrowserHistory();
 
@@ -16,6 +17,7 @@ const rootReducer = (history) =>
   combineReducers({
     router: connectRouter(history),
     helps: helpsSlice.reducer,
+    volunteers: volunteersSlice.reducer,
   });
 
 const store = configureStore({