Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Rev 2642 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 2641
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from "react";
 1 
import React, { useEffect, useState } from "react";
2 
import PhoneInput from "react-phone-input-2";
 2 
import PhoneInput from "react-phone-input-2";
3 
import "react-phone-input-2/lib/style.css";
 3 
import "react-phone-input-2/lib/style.css";
4 
import { useForm } from "react-hook-form";
 4 
import { useForm } from "react-hook-form";
5 
import {axios} from '../../../utils';
 5 
import { axios } from '../../../utils';
6 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
 6 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
7 
import { connect } from "react-redux";
 7 
import { connect } from "react-redux";
8 
import { addNotification } from "../../../redux/notification/notification.actions";
 8 
import { addNotification } from "../../../redux/notification/notification.actions";
9 
import styled from "styled-components";
 9 
import styled from "styled-components";
10 
import Spinner from "../../../shared/loading-spinner/Spinner";
 10 
import Spinner from "../../../shared/loading-spinner/Spinner";
Línea 89... Línea 89...
89 
    });
 89 
    });
90 
    setLoading(false);
 90 
    setLoading(false);
91 
  }, []);
 91 
  }, []);
Línea 92... Línea 92...
92 
 
 92 
 
93 
  return (
 93 
  return (
94 
    <div className="acc-setting" style={{ position: "relative" }}>
 94 
    <div className="settings-container">
- 
 
 95 
      <h1>Básica</h1>
95 
      <h3>Básica</h3>
 96 
      <div className="acc-setting_content">
- 
 
 97 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
96 
      <form onSubmit={handleSubmit(handleOnSubmit)}>
 98 
          <div className="d-flex" style={{ gap: '1rem' }}>
97 
        <div className="cp-field">
 99 
            <div className="cp-field">
98 
          <label htmlFor="first_name">Nombre</label>
 100 
              <label htmlFor="first_name">Nombre</label>
99 
          <input
 101 
              <input
100 
            type="text"
 102 
                type="text"
101 
            name="first_name"
 103 
                name="first_name"
102 
            id="first_name"
 104 
                id="first_name"
103 
            ref={register({
 105 
                ref={register({
104 
              required: "Por favor ingrese su nombre",
 106 
                  required: "Por favor ingrese su nombre",
105 
            })}
 107 
                })}
106 
          />
 108 
              />
107 
          {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}
 109 
              {<FormErrorFeedback>{errors?.first_name?.message}</FormErrorFeedback>}
108 
        </div>
 110 
            </div>
109 
        <div className="cp-field">
 111 
            <div className="cp-field">
110 
          <label htmlFor="last_name">Apellido</label>
 112 
              <label htmlFor="last_name">Apellido</label>
111 
          <input
 113 
              <input
112 
            type="text"
 114 
                type="text"
113 
            name="last_name"
 115 
                name="last_name"
114 
            id="last_name"
 116 
                id="last_name"
115 
            ref={register({
 117 
                ref={register({
116 
              required: "Por favor ingrese su apellido",
 118 
                  required: "Por favor ingrese su apellido",
117 
            })}
 119 
                })}
118 
          />
 120 
              />
- 
 
 121 
              {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
119 
          {<FormErrorFeedback>{errors?.last_name?.message}</FormErrorFeedback>}
 122 
            </div>
- 
 
 123 
          </div>
120 
        </div>
 124 
          <div className="d-flex" style={{ gap: '1rem' }}>
121 
        <div className="cp-field">
 125 
            <div className="cp-field">
122 
          <label htmlFor="phone">Teléfono</label>
 126 
              <label htmlFor="phone">Teléfono</label>
123 
          <PhoneInput
 127 
              <PhoneInput
124 
            name="phone"
 128 
                name="phone"
125 
            value={watch("phone")}
 129 
                value={watch("phone")}
126 
            onChange={(phone) => {
 130 
                onChange={(phone) => {
127 
              setValue("phone", phone);
 131 
                  setValue("phone", phone);
128 
            }}
 132 
                }}
129 
          />
 133 
              />
130 
          {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
 134 
              {<FormErrorFeedback>{errors?.phone?.message}</FormErrorFeedback>}
131 
        </div>
 135 
            </div>
132 
        <div className="cp-field">
 136 
            <div className="cp-field">
133 
          <label htmlFor="last_name">Email</label>
 137 
              <label htmlFor="last_name">Email</label>
134 
          <input
 138 
              <input
135 
            type="text"
 139 
                type="text"
136 
            name="email"
 140 
                name="email"
137 
            id="email"
 141 
                id="email"
138 
            ref={register({
 142 
                ref={register({
139 
              required: "Por favor ingrese su apellido",
 143 
                  required: "Por favor ingrese su apellido",
140 
              pattern: {
 144 
                  pattern: {
141 
                value: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
 145 
                    value: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/,
142 
                message: "Por favor ingrese un correo válido",
 146 
                    message: "Por favor ingrese un correo válido",
143 
              },
 147 
                  },
144 
            })}
 148 
                })}
145 
          />
 149 
              />
- 
 
 150 
              {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
146 
          {<FormErrorFeedback>{errors?.email?.message}</FormErrorFeedback>}
 151 
            </div>
- 
 
 152 
          </div>
147 
        </div>
 153 
          <div className="d-flex" style={{ gap: '1rem' }}>
148 
        <div className="cp-field">
 154 
            <div className="cp-field">
149 
          <label htmlFor="gender">Género</label>
 155 
              <label htmlFor="gender">Género</label>
150 
          <select
 156 
              <select
151 
            name="gender"
 157 
                name="gender"
152 
            id="gender"
 158 
                id="gender"
153 
            defaultValue=""
 159 
                defaultValue=""
154 
            className="form-control"
 160 
                className="form-control"
155 
            ref={register}
 161 
                ref={register}
156 
          >
 162 
              >
157 
            <option value="" hidden>
 163 
                <option value="" hidden>
158 
              Seleccione un género
 164 
                  Seleccione un género
159 
            </option>
 165 
                </option>
160 
            <option value="m">Masculino</option>
 166 
                <option value="m">Masculino</option>
161 
            <option value="f">Femenino</option>
 167 
                <option value="f">Femenino</option>
162 
          </select>
 168 
              </select>
163 
          {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}
 - 
 
164 
        </div>
 - 
 
165 
        <div className="save-stngs pd2">
 - 
 
166 
          <ul>
 169 
              {<FormErrorFeedback>{errors?.gender?.message}</FormErrorFeedback>}
167 
            <li>
 170 
            </div>
168 
              <button type="submit" className="btn-save-basic">
 171 
            <button type="submit" className="btn btn-secondary">
169 
                Guardar
 172 
              Guardar
170 
              </button>
 - 
 
171 
            </li>
 173 
            </button>
172 
          </ul>
 174 
          </div>
173 
        </div>
 - 
 
174 
        {/* <!--save-stngs end--> */}
 - 
 
175 
        {/* <?php echo $this->form()->closeTag($form); ?>	 */}
 175 
        </form>
176 
      </form>
 176 
      </div>
177 
      {loading && (
 177 
      {loading &&
178 
        <StyledSpinnerContainer>
 178 
        <StyledSpinnerContainer>
179 
          <Spinner />
 179 
          <Spinner />
180 
        </StyledSpinnerContainer>
 180 
        </StyledSpinnerContainer>
181 
      )}
 181 
      }
182 
    </div>
 182 
    </div>
183 
  );
 183 
  );
Línea 184... Línea 184...
184 
};
 184 
};