Coversion FechaNacimiento a Edad y correcion de formato Fecha en detallepostulante

.vscode/settings.json

+{
+    "java.configuration.updateBuildConfiguration": "interactive"
+}
\ No newline at end of file

curriculumsearch/pom.xml

@@ -75,12 +75,23 @@
 		<version>1.18.22</version>
 		<scope>provided</scope>
 	</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-mail</artifactId>
+		</dependency>
 <!--		<dependency>-->
 <!--			<groupId>org.projectlombok</groupId>-->
 <!--			<artifactId>lombok</artifactId>-->
 <!--			<version>1.18.22</version>-->
 <!--			<scope>provided</scope>-->
 <!--		</dependency>-->
+		<dependency>
+			<groupId>kr.pe.kwonnam.jsp</groupId>
+			<artifactId>jsp-template-inheritance</artifactId>
+			<version>0.3.RELEASE</version>
+			<scope>compile</scope>
+		</dependency>
+
 	</dependencies>
 
 	<build>

curriculumsearch/src/main/java/com/roshka/configuration/CustomUserDetails.java

@@ -53,4 +53,8 @@ public class CustomUserDetails implements UserDetails {
         return user.getFirstName() + " " + user.getLastName();
     }
 
+    @Override
+    public String toString(){
+        return user.getEmail();
+    }
 }
\ No newline at end of file

curriculumsearch/src/main/java/com/roshka/configuration/WebSecurityConfig.java

@@ -55,6 +55,7 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
                 .antMatchers("/convocatoria*").authenticated()
                 .antMatchers("/tecnologia*").authenticated()
                 .antMatchers("/postulantes").authenticated()
+                .antMatchers("/edit-user-data").authenticated()
                 .anyRequest().permitAll()
                 .and()
                 .formLogin()

curriculumsearch/src/main/java/com/roshka/controller/CargoController.java

 package com.roshka.controller;
 
 
+import javax.validation.Valid;
+
 import com.roshka.modelo.Cargo;
 import com.roshka.repositorio.CargoRepository;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -42,8 +44,11 @@ public class CargoController {
     }
 
     @PostMapping(path = {"/cargo","/cargo/{id}"})
-    public String guardarCargo(@ModelAttribute Cargo cargo, BindingResult result, @PathVariable(required = false) Long id) {
-        if(result.hasErrors()); 
+    public String guardarCargo(@Valid @ModelAttribute Cargo cargo, BindingResult result, @PathVariable(required = false) Long id, Model model) {
+        if(result.hasErrors() || (id==null && cargoRepo.existsByNombreIgnoreCase(cargo.getNombre())  )){
+            model.addAttribute("mismoNombre", true);
+            return "cargo-form";
+        }; 
         if(id != null ) cargo.setId(id);
         cargoRepo.save(cargo);
         System.out.println(cargo.getNombre());

curriculumsearch/src/main/java/com/roshka/controller/HomeController.java

+package com.roshka.controller;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.RequestMapping;
+@Controller
+@RequestMapping("/home")
+public class HomeController {
+    @RequestMapping()
+    public String home(Model model) {
+        return "index";
+    }
+}

curriculumsearch/src/main/java/com/roshka/controller/PostulanteController.java

@@ -81,13 +81,6 @@ public class PostulanteController {
         this.carRepo=carRepo;
     }
 
-    @RequestMapping("home")
-    public String index() {
-      
-
-      return "index";
-    }
-
     @RequestMapping("/postulantes")
     public String postulantes(Model model,
                             @RequestParam(required = false)Long tecId,
@@ -184,8 +177,8 @@ public class PostulanteController {
                 return "redirect:/postulacion-correcta";
             }
 
-            @GetMapping("/postulacion-correcta")
-            public String successPostulation(Model model){
+    @GetMapping("/postulacion-correcta")
+    public String successPostulation(Model model){
         model.addAttribute("mensaje1", "Tu informacion se ha recibido correctamente!");
         model.addAttribute("mensaje2", " espera por que nos pongamos en contacto!");
         return "exitoRegistro";
@@ -197,35 +190,35 @@ public class PostulanteController {
         MethodArgumentNotValidException ex) {
         return ResponseEntity.status(HttpStatus.BAD_REQUEST)
                 .body(ex.getMessage());
-            }
+    }
             
-            @ResponseStatus(HttpStatus.BAD_REQUEST)
-            @ExceptionHandler({ConstraintViolationException.class})
-            public ResponseEntity<String> handleValidationExceptions2(
-                ConstraintViolationException ex) {
-                    return ResponseEntity.status(HttpStatus.BAD_REQUEST)
-                    .body(ex.getMessage());
-                }
-                
-                
-                
-                @GetMapping({"/postulante/{postulanteId}"})
-                public String getPostulanteDetalle(Model model, @PathVariable("postulanteId") Long postulanteId) {
-                    Postulante p = post.findById(postulanteId).orElse(null);
-                    model.addAttribute("postulante",p);
-                    model.addAttribute("estadoP", EstadoPostulante.values());				
-                    return "detallepostulante";
-                    
-                }
-                @PostMapping({"/postulante/{postulanteId}"})
-                public String setPostulanteEstado(@ModelAttribute Postulante postulante, BindingResult result, @PathVariable("postulanteId") Long postulanteId) {
-                    //post.setPostulanteEstadoAndComentario(postulante.getEstadoPostulante(),postulante.getComentarioRRHH(), postulante.getId());
-                    Postulante postulanteVd = post.getById(postulanteId);
-                    postulanteVd.setEstadoPostulante(postulante.getEstadoPostulante());
-                    postulanteVd.setComentarioRRHH(postulante.getComentarioRRHH());
-                    post.setPostulanteEstadoAndComentario(postulante.getEstadoPostulante(), postulante.getComentarioRRHH(), postulanteId); 
-                    //post.save(postulanteVd);
-                    return "redirect:/postulante/"+postulanteId;
-                }
-            }
+    @ResponseStatus(HttpStatus.BAD_REQUEST)
+    @ExceptionHandler({ConstraintViolationException.class})
+    public ResponseEntity<String> handleValidationExceptions2(
+        ConstraintViolationException ex) {
+            return ResponseEntity.status(HttpStatus.BAD_REQUEST)
+            .body(ex.getMessage());
+        }
+
+
+
+    @GetMapping({"/postulante/{postulanteId}"})
+    public String getPostulanteDetalle(Model model, @PathVariable("postulanteId") Long postulanteId) {
+        Postulante p = post.findById(postulanteId).orElse(null);
+        model.addAttribute("postulante",p);
+        model.addAttribute("estadoP", EstadoPostulante.values());				
+        return "detallepostulante";
+        
+    }
+    @PostMapping({"/postulante/{postulanteId}"})
+    public String setPostulanteEstado(@ModelAttribute Postulante postulante, BindingResult result, @PathVariable("postulanteId") Long postulanteId) {
+        //post.setPostulanteEstadoAndComentario(postulante.getEstadoPostulante(),postulante.getComentarioRRHH(), postulante.getId());
+        Postulante postulanteVd = post.getById(postulanteId);
+        postulanteVd.setEstadoPostulante(postulante.getEstadoPostulante());
+        postulanteVd.setComentarioRRHH(postulante.getComentarioRRHH());
+        post.setPostulanteEstadoAndComentario(postulante.getEstadoPostulante(), postulante.getComentarioRRHH(), postulanteId);
+        //post.save(postulanteVd);
+        return "redirect:/postulante/"+postulanteId;
+    }
+}
             
\ No newline at end of file

curriculumsearch/src/main/java/com/roshka/controller/RRHHUserController.java

@@ -2,14 +2,39 @@ package com.roshka.controller;
 
 import com.roshka.modelo.RRHHUser;
 import com.roshka.repositorio.RRHHUserRepository;
+import com.roshka.service.EmailAsyncService;
+import com.roshka.service.RRHHUserService;
+import net.bytebuddy.utility.RandomString;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.repository.query.Param;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.mail.javamail.MimeMessageHelper;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContext;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
+import org.springframework.web.bind.MethodArgumentNotValidException;
+import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.servlet.ModelAndView;
+import org.springframework.web.servlet.mvc.support.RedirectAttributes;
+import org.springframework.web.servlet.view.RedirectView;
 
+import javax.mail.MessagingException;
+import javax.mail.internet.MimeMessage;
 import javax.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import java.io.UnsupportedEncodingException;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
 
 @Controller
 public class RRHHUserController {
@@ -54,4 +79,120 @@ public class RRHHUserController {
 
         return "register_success";
     }
+
+    @GetMapping("/edit-user-data")
+    public String editUserData(HttpServletRequest request, Model model){
+        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
+        System.out.println(auth.getPrincipal().toString());
+        System.out.println(rrhhUserRepository.findByEmail(auth.getPrincipal().toString()));
+        model.addAttribute("user", rrhhUserRepository.findByEmail(auth.getPrincipal().toString()));
+        return "edit-user-data";
+    }
+
+    @PostMapping("/edit-user-data")
+    public RedirectView processEditUser(HttpServletRequest request, RRHHUser user,
+                                        RedirectAttributes redirectAttributes){
+        RRHHUser editUser = rrhhUserRepository.findByEmail(SecurityContextHolder.getContext().getAuthentication()
+                .getPrincipal().toString());
+        if(user.getEmail()!=null){
+            editUser.setEmail(user.getEmail());
+        }
+        if(user.getFirstName()!=null){
+            editUser.setFirstName(user.getFirstName());
+        }
+        if(user.getLastName()!=null){
+            editUser.setLastName(user.getLastName());
+        }
+        rrhhUserRepository.save(editUser);
+        RedirectView redirectView = new RedirectView("/home",true);
+        redirectAttributes.addFlashAttribute("success", "Datos actualizados");
+        return redirectView;
+    }
+
+    @Autowired
+    private RRHHUserService userService;
+
+    @Autowired
+    private EmailAsyncService emailAsyncService;
+
+    @GetMapping("/forgot-password")
+    public String showForgotPasswordForm(HttpServletRequest request, Model model) {
+        model.addAttribute("error", request.getParameter("error"));
+//        if(request.getParameter("error")!=null){
+//
+//        }
+        return "forgot_password_form";
+    }
+
+    @PostMapping("/forgot-password")
+    public String processForgotPassword(HttpServletRequest request, Model model) {
+        String email = request.getParameter("email");
+        String token = RandomString.make(30);
+
+        try {
+            userService.updateResetPasswordToken(token, email);
+        }catch (UsernameNotFoundException e){
+            model.addAttribute("error", "Error al enviar el mail. Checkee sus credenciales " +
+                    "y intentelo de nuevo.");
+            return "forgot_password_form";
+        }
+        String resetPasswordLink = Utility.getSiteURL(request) + "/reset-password?token=" + token;
+        ExecutorService emailExecutor = Executors.newSingleThreadExecutor();
+        emailExecutor.execute(new Runnable() {
+            @Override
+            public void run() {
+                try {
+                    emailAsyncService.sendEmail(email, resetPasswordLink);
+                } catch (IOException | MessagingException e) {
+                    e.printStackTrace();
+                }
+            }
+        });
+        emailExecutor.shutdown();
+
+        return "forgot_password_form";
+    }
+
+
+
+    @GetMapping("/reset-password")
+    public String showResetPasswordForm(@Param(value = "token") String token, Model model) {
+        RRHHUser user = userService.getByResetPasswordToken(token);
+        model.addAttribute("token", token);
+
+        if (user == null) {
+            model.addAttribute("error", "Invalid Token");
+            return "error";
+        }
+
+        return "reset_password_form";
+    }
+
+    @PostMapping("/reset-password")
+    public String processResetPassword(HttpServletRequest request, Model model) {
+        String token = request.getParameter("token");
+        String password = request.getParameter("password");
+
+        RRHHUser user = userService.getByResetPasswordToken(token);
+        model.addAttribute("title", "Reset your password");
+
+        if (user == null) {
+            model.addAttribute("error", "Invalid Token");
+            return "message";
+        } else {
+            userService.updatePassword(user, password);
+
+            model.addAttribute("success", "You have successfully changed your password.");
+        }
+
+        return "redirect:/";
+    }
+
 }
+
+class Utility {
+    public static String getSiteURL(HttpServletRequest request) {
+        String siteURL = request.getRequestURL().toString();
+        return siteURL.replace(request.getServletPath(), "");
+    }
+}
\ No newline at end of file

curriculumsearch/src/main/java/com/roshka/controller/TecnologiaController.java

 package com.roshka.controller;
 
+import javax.validation.Valid;
+
 import com.roshka.modelo.Tecnologia;
 import com.roshka.repositorio.TecnologiaRepository;
 
@@ -45,8 +47,11 @@ public String addtecnologiaView(Model model,@PathVariable(required = false) Long
     }
 
 @PostMapping(path = {"/tecnologia","/tecnologia/{id}"})
-    public String addtecnologia(@ModelAttribute Tecnologia tecnologia, BindingResult result, @PathVariable(required = false) Long id) {
-        if(result.hasErrors()); 
+    public String addtecnologia(@Valid @ModelAttribute Tecnologia tecnologia, BindingResult result, @PathVariable(required = false) Long id, Model model) {
+        if(result.hasErrors() || (id==null && tecRepo.existsByNombreIgnoreCase(tecnologia.getNombre()))){
+            model.addAttribute("mismoNombre", true);
+            return "tecnologia-form";
+        } 
         if(id != null ) tecnologia.setId(id);
         tecRepo.save(tecnologia);
         System.out.println(tecnologia.getNombre());

curriculumsearch/src/main/java/com/roshka/modelo/RRHHUser.java

@@ -23,5 +23,8 @@ public class RRHHUser {
     @Column(name = "last_name", nullable = false, length = 20)
     private String lastName;
 
+    @Column(name = "reset_password_token")
+    private String resetPasswordToken;
+
    
 }

curriculumsearch/src/main/java/com/roshka/modelo/Tecnologia.java

@@ -17,7 +17,7 @@ public class Tecnologia {
    @GeneratedValue(strategy = GenerationType.IDENTITY)
 	@Id
 	@Column(name="id")
-	private long id;
+	private Long id;
 	
 	@Column(name="nombre")
 	@NotBlank(message = "Este campo no puede estar vacio")

curriculumsearch/src/main/java/com/roshka/repositorio/CargoRepository.java

@@ -8,4 +8,5 @@ import org.springframework.data.jpa.repository.JpaRepository;
 
 public interface CargoRepository extends JpaRepository<Cargo,Long>{
     public List<Cargo> findByNombreContainingIgnoreCase(String nombre);
+    public boolean existsByNombreIgnoreCase(String nombre);
 }

curriculumsearch/src/main/java/com/roshka/repositorio/RRHHUserRepository.java

@@ -5,4 +5,6 @@ import org.springframework.data.jpa.repository.JpaRepository;
 
 public interface RRHHUserRepository extends JpaRepository<RRHHUser, Long> {
     RRHHUser findByEmail(String username);
+
+    RRHHUser findByResetPasswordToken(String resetPasswordToken);
 }

curriculumsearch/src/main/java/com/roshka/repositorio/TecnologiaRepository.java

@@ -9,4 +9,6 @@ import com.roshka.modelo.Tecnologia;
 public interface TecnologiaRepository extends JpaRepository<Tecnologia,Long> {
 
 	public List<Tecnologia> findByNombreContainingIgnoreCase(String nombre);
+
+	public boolean existsByNombreIgnoreCase(String nombre);
 }

curriculumsearch/src/main/java/com/roshka/service/EmailAsyncService.java

+package com.roshka.service;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.mail.javamail.JavaMailSender;
+import org.springframework.mail.javamail.MimeMessageHelper;
+import org.springframework.scheduling.annotation.Async;
+import org.springframework.stereotype.Service;
+
+import javax.mail.MessagingException;
+import javax.mail.internet.MimeMessage;
+import java.io.UnsupportedEncodingException;
+
+@Service
+public class EmailAsyncService {
+
+    @Autowired
+    private JavaMailSender mailSender;
+
+    @Async
+    public void sendEmail(String recipientEmail, String link)
+            throws MessagingException, UnsupportedEncodingException {
+        MimeMessage message = mailSender.createMimeMessage();
+        MimeMessageHelper helper = new MimeMessageHelper(message);
+
+        helper.setFrom("test@test.com", "Sistema de Postulacion");
+        helper.setTo(recipientEmail);
+
+        String subject = "Aqui tienes el link para volver a definir tu password";
+
+        String content = "<p>Hola!,</p>"
+                + "<p>Has solicitado una re-definicion de password.</p>"
+                + "<p>Haz click en el link de abajo para re-definir tu password:</p>"
+                + "<p><a href=\"" + link + "\">Cambiar password</a></p>"
+                + "<br>"
+                + "<p>Ignora y no compartas este mail si no has solicitado un cambio de password.";
+
+        helper.setSubject(subject);
+
+        helper.setText(content, true);
+
+        mailSender.send(message);
+
+    }
+}
\ No newline at end of file

curriculumsearch/src/main/java/com/roshka/service/RRHHUserService.java

+package com.roshka.service;
+
+import com.roshka.modelo.RRHHUser;
+import com.roshka.repositorio.RRHHUserRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.stereotype.Service;
+
+import javax.transaction.Transactional;
+
+@Service
+@Transactional
+public class RRHHUserService {
+
+    @Autowired
+    private RRHHUserRepository userRepo;
+
+
+    public void updateResetPasswordToken(String token, String email) throws UsernameNotFoundException {
+        RRHHUser customer = userRepo.findByEmail(email);
+        if (customer != null) {
+            customer.setResetPasswordToken(token);
+            userRepo.save(customer);
+        } else {
+            throw new UsernameNotFoundException("Could not find any customer with the email " + email);
+        }
+    }
+
+    public RRHHUser getByResetPasswordToken(String token) {
+        return userRepo.findByResetPasswordToken(token);
+    }
+
+    public void updatePassword(RRHHUser user, String newPassword) {
+        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
+        String encodedPassword = passwordEncoder.encode(newPassword);
+        user.setPassword(encodedPassword);
+
+        user.setResetPasswordToken(null);
+        userRepo.save(user);
+    }
+}
\ No newline at end of file

curriculumsearch/src/main/resources/application.properties

 
 spring.jpa.hibernate.ddl-auto=create-drop
 spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect
-#spring.jpa.show-sql=true
+spring.jpa.show-sql=true
 spring.jpa.properties.hibernate.format_sql=true
-#logging.level.org.hibernate.SQL=DEBUG
-#logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
+logging.level.org.hibernate.SQL=DEBUG
+logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
 
 spring.sql.init.mode=always
 spring.sql.init.platform=postgres
@@ -16,3 +16,13 @@ spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true
 #server.port=8888
 spring.mvc.view.prefix=/jsp/
 spring.mvc.view.suffix=.jsp
+
+spring.mail.host=smtp.gmail.com
+spring.mail.username=fpunascrumkanban@gmail.com
+spring.mail.password=fpunascrumkanban123
+spring.mail.port=587
+spring.mail.properties.mail.smtp.auth=true
+spring.mail.properties.mail.smtp.starttls.enable=true
+
+jsp-inheritance-prefix=/jsp/layouts/
+jsp-inheritance-suffix=.jsp

curriculumsearch/src/main/resources/static/main.js

@@ -158,8 +158,9 @@ function agregarFieldTecnologia(){
         if(tecn==null) continue;
         content1 += `
         <li id="tecn-${index}">        
-            ${tecn.tecnologia.nombre} 
+            ${tecn.tecnologia.nombre}         
             <button type="button" onclick="eliminarTecnologia(event)">Eliminar</button>
+            <br>
         </li>
         
         `
@@ -528,4 +529,61 @@ function eliminarReferencia(event) {
 
 
 
-
+/*--------------------------------------------------------------------------------------------------------- */
+$(function(){
+    $("#wizard").steps({
+    headerTag: "h4",
+    bodyTag: "section",
+    transitionEffect: "fade",
+    enableAllSteps: true,
+    transitionEffectSpeed: 500,
+    onStepChanging: function (event, currentIndex, newIndex) {
+    if ( newIndex === 1 ) {
+    $('.steps ul').addClass('step-2');
+    } else {
+    $('.steps ul').removeClass('step-2');
+    }
+    if ( newIndex === 2 ) {
+    $('.steps ul').addClass('step-3');
+    } else {
+    $('.steps ul').removeClass('step-3');
+    }
+    
+    if ( newIndex === 3 ) {
+    $('.steps ul').addClass('step-4');
+    $('.actions ul').addClass('step-last');
+    } else {
+    $('.steps ul').removeClass('step-4');
+    $('.actions ul').removeClass('step-last');
+    }
+    return true;
+    },
+    labels: {
+    finish: "Order again",
+    next: "Next",
+    previous: "Previous"
+    }
+    });
+    // Custom Steps Jquery Steps
+    $('.wizard > .steps li a').click(function(){
+    $(this).parent().addClass('checked');
+    $(this).parent().prevAll().addClass('checked');
+    $(this).parent().nextAll().removeClass('checked');
+    });
+    // Custom Button Jquery Steps
+    $('.forward').click(function(){
+    $("#wizard").steps('next');
+    })
+    $('.backward').click(function(){
+    $("#wizard").steps('previous');
+    })
+    // Checkbox
+    $('.checkbox-circle label').click(function(){
+    $('.checkbox-circle label').removeClass('active');
+    $(this).addClass('active');
+    })
+    })
+
+
+
+/*--------------------------------------------------------------------------------------------------------- */
\ No newline at end of file

curriculumsearch/src/main/resources/static/valEdad.js

+//Convertir DOB to Age
+window.onload= init;
+
+
+function init(){
+    contarEdad();
+    //fechaFormat();
+}
+
+
+function contarEdad() {
+    let today = new Date();
+    let dob = document.getElementById("dob").value;
+    let current_datetime = new Date(dob);
+    let month = current_datetime.getMonth();
+    let day = current_datetime.getDate();
+    let formatted_date = current_datetime.getDate() + "/" + (current_datetime.getMonth() + 1)  + "/" + current_datetime.getFullYear();
+    //console.log(formatted_date); ver Fecha del form en formato dd/mm/yyy
+    let date2=new Date(dob);
+    let pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
+    let age = today.getFullYear() - current_datetime.getFullYear();
+
+    if (pattern.test(formatted_date)) {
+       if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day))
+       {
+         age--;
+        }  
+   //     console.log(age); ver edad
+        let anio = document.getElementById("edad").innerHTML=age+" años";
+    } else {
+        alert("Invalid date format. Please Input in (dd/mm/yyyy) format!");
+    }
+
+/*
+function fechaFormat(){
+
+    //EXPERIENCIA
+
+   let fechaInicioExp = document.getElementById("fechaInicioExp2").value;
+   let fie =new Date(fechaInicioExp);
+ //  let formatted_fie = fie.getDate() + "/" + (fie.getMonth() + 1)  + "/" + fie.getFullYear();
+   
+   let fechaFinExp = document.getElementById("fechaFinExp2").value;
+   let ffe =new Date(fechaFinExp);
+ //  let formatted_ffe = ffe.getDate() + "/" + (ffe.getMonth() + 1)  + "/" + ffe.getFullYear();
+   
+
+     // Validacion de ceros Fecha inicio
+    if(((fie.getMonth() + 1) < 10) && (fie.getDate() < 10) ){
+    let formatted_fie = "0"+  fie.getDate() + "/0" + (fie.getMonth() + 1)  + "/" + fie.getFullYear();
+    let mostrar1 = document.getElementById("fiemostrar").innerHTML = formatted_fie;
+    console.log(mostrar1);
+    }else{
+        if((fie.getMonth() + 1) < 10){
+            let formatted_fie = fie.getDate() + "/0" + (fie.getMonth() + 1)  + "/" + fie.getFullYear();
+             mostrar1 = document.getElementById("fiemostrar").innerHTML = formatted_fie;
+             console.log(mostrar1);
+        }else{
+            if(fie.getDate() < 10){
+                let formatted_fie ="0"+ fie.getDate() + "/" + (fie.getMonth() + 1)  + "/" + fie.getFullYear();
+                 mostrar1 = document.getElementById("fiemostrar").innerHTML = formatted_fie;
+                 console.log(mostrar1);
+            }else{
+                let formatted_fie = fie.getDate() + "/" + (fie.getMonth() + 1)  + "/" + fie.getFullYear();
+                 mostrar1 = document.getElementById("fiemostrar2").innerHTML = formatted_fie;
+                 console.log(mostrar1);
+            }
+        }
+    }
+    
+
+
+   // Validacion de ceros Fecha fin
+   if(((ffe.getMonth() + 1) < 10) && (ffe.getDate() < 10) ){
+    let formatted_ffe = "0"+  ffe.getDate() + "/0" + (ffe.getMonth() + 1)  + "/" + ffe.getFullYear();
+    let mostrar2 = document.getElementById("ffemostrar").innerHTML = formatted_ffe;
+    console.log(mostrar2);
+    }else{
+        if((ffe.getMonth() + 1) < 10){
+            let formatted_ffe = ffe.getDate() + "/0" + (ffe.getMonth() + 1)  + "/" + ffe.getFullYear();
+             mostrar2 = document.getElementById("ffemostrar").innerHTML = formatted_ffe;
+             console.log(mostrar2);
+        }else{
+            if(ffe.getDate() < 10){
+                let formatted_ffe ="0"+ ffe.getDate() + "/" + (ffe.getMonth() + 1)  + "/" + ffe.getFullYear();
+                 mostrar2 = document.getElementById("ffemostrar").innerHTML = formatted_ffe;
+                 console.log(mostrar2);
+            }else{
+                let formatted_ffe = ffe.getDate() + "/" + (ffe.getMonth() + 1)  + "/" + ffe.getFullYear();
+                 mostrar2 = document.getElementById("ffemostrar").innerHTML = formatted_ffe;
+                 console.log(mostrar2);
+            }
+        }
+    }
+    
+
+   
+
+     //ESTUDIOS//////////
+
+   let fechaInicioEst = document.getElementById("fechaInicioEst").value;
+   let fies =new Date(fechaInicioEst);
+   let formatted_fies = fies.getDate() + "/" + (fies.getMonth() + 1)  + "/" + fies.getFullYear();
+   
+   let fechaFinEst = document.getElementById("fechaFinEst").value;
+   let ffes =new Date(fechaFinEst);
+   let formatted_ffes = ffes.getDate() + "/" + (ffes.getMonth() + 1)  + "/" + ffes.getFullYear();
+   
+   // Validacion de ceros Fecha fin
+   if(((ffes.getMonth() + 1) < 10) && (ffes.getDate() < 10) ){
+    let formatted_ffes = "0"+  ffes.getDate() + "/0" + (ffes.getMonth() + 1)  + "/" + ffes.getFullYear();
+    let mostrar3 = document.getElementById("ffesmostrar").innerHTML = formatted_ffes;
+    }else{
+        if((ffes.getMonth() + 1) < 10){
+            let formatted_ffes = ffes.getDate() + "/0" + (ffes.getMonth() + 1)  + "/" + ffes.getFullYear();
+             mostrar3 = document.getElementById("ffesmostrar").innerHTML = formatted_ffes;
+        }else{
+            if(ffes.getDate() < 10){
+                let formatted_ffes ="0"+ ffes.getDate() + "/" + (ffes.getMonth() + 1)  + "/" + ffes.getFullYear();
+                 mostrar3 = document.getElementById("ffesmostrar").innerHTML = formatted_ffes;
+            }else{
+                let formatted_ffes = ffes.getDate() + "/" + (ffes.getMonth() + 1)  + "/" + ffes.getFullYear();
+                mostrar3 = document.getElementById("ffesmostrar").innerHTML = formatted_ffes;
+            }
+        }
+    }
+   
+
+    // Validacion de ceros Fecha inicio
+   if(((fies.getMonth() + 1) < 10) && (fies.getDate() < 10) ){
+    let formatted_fies = "0"+  fies.getDate() + "/0" + (fies.getMonth() + 1)  + "/" + fies.getFullYear();
+    let mostrar4 = document.getElementById("fiesmostrar").innerHTML = formatted_fies;
+    }else{
+        if((fies.getMonth() + 1) < 10){
+            let formatted_fies = fies.getDate() + "/0" + (fies.getMonth() + 1)  + "/" + fies.getFullYear();
+             mostrar4 = document.getElementById("fiesmostrar").innerHTML = formatted_fies;
+        }else{
+            if(fies.getDate() < 10){
+                let formatted_fies ="0"+ fies.getDate() + "/" + (fies.getMonth() + 1)  + "/" + fies.getFullYear();
+                 mostrar4 = document.getElementById("fiesmostrar").innerHTML = formatted_fies;
+            }else{
+                let formatted_fies = fies.getDate() + "/" + (fies.getMonth() + 1)  + "/" + fies.getFullYear();
+                 mostrar4 = document.getElementById("fiesmostrar").innerHTML = formatted_fies;
+            }
+        }
+    }
+}*/
+
+
+    
+  
+}
+    
\ No newline at end of file

curriculumsearch/src/main/webapp/css/cargoStyle.css

+body{
+    background-image:url(/img/fondoBlanco.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:100vh;width:100vw; 
+}
+label {
+    display: inline-block;
+    width: 100px;
+}
\ No newline at end of file

curriculumsearch/src/main/webapp/css/detallePostulantestyle.css

+:root {
+    --nord0: #2e3440;
+    --nord1: #3b4252;
+    --nord2: #434c5e;
+    --nord3: #4c566a;
+    --nord4: #d8dee9;
+    --nord5: #e5e9f0;
+    --nord6: #eceff4;
+    --nord7: #8fbcbb;
+    --nord8: #88c0d0;
+    --nord9: #81a1c1;
+    --nord10: #5e81ac;
+    --nord11: #bf616a;
+    --nord12: #d08770;
+    --nord13: #ebcb8b;
+    --nord14: #a3be8c;
+    --nord15: #b48ead;
+}
+*{outline: 1px #bf616a;}
+body{
+    color: #3b4252;
+    margin: auto;
+}
+header,section{
+    width: 960px;
+    margin: 0 auto;
+}
+ul{
+    list-style-type: none;
+}
+header{
+    background-image:url(/img/fondoHeader.png);
+    display: flex;
+    color: #2e3440;
+}
+section{
+    background-image:url(/img/fondoBlanco.jpg);
+    
+    display: flex;
+    
+}
+article{
+    width: 60%;
+}
\ No newline at end of file

curriculumsearch/src/main/webapp/css/formPostulanteStyle.css

+body {
+    /* background-color: #506BEE; */
+    background-image:url(/img/fondo.png);
+    /*background-size:cover;*/
+    background-repeat:repeat;
+    height:100vh;width:100vw;  
+    align-items:"middle";
+    
+}
+#head{text-align:center}
+ form{/*max-width:300px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);*/
+   
+    box-shadow:3px 3px 4px rgba(175, 209, 20, 0.2)} 
+.card {
+    border: none
+}
+li {
+    padding: 0;
+    display: inline-block; 
+    width: 80px; 
+    text-align: center; 
+    letter-spacing:normal; 
+    vertical-align: middle;
+    line-height: 1.1;
+}
+button {
+ 
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+}
+
+.image {
+    position: relative
+}
+
+.image span {
+    background-color: #506BEE;
+    color: #fff;
+    padding: 6px;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    font-size: 13px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: -0px;
+    right: 0px
+}
+
+.user-details h4 {
+    color: #506BEE
+}
+
+.ratings {
+    font-size: 30px;
+    font-weight: 600;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    color: #f9b43a
+}
+
+.user-details span {
+    text-align: left
+}
+
+.inputs label {
+    display: flex;
+    margin-left: 3px;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 4px
+}
+
+.inputs input {
+    font-size: 14px;
+    height: 40px;
+    border: 2px solid #ced4da
+}
+
+.inputs input:focus {
+    box-shadow: none;
+    border: 2px solid #506BEE
+}
+
+.about-inputs label {
+    display: flex;
+    margin-left: 3px;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 4px
+}
+
+.about-inputs textarea {
+    font-size: 14px;
+    height: 100px;
+    border: 2px solid #ced4da;
+    resize: none
+}
+
+.about-inputs textarea:focus {
+    box-shadow: none
+}
+
+.btn {
+    font-weight: 600
+}
+
+.btn:focus {
+    box-shadow: none
+}
+
+select {
+    display: block;
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 20px;
+    height: 40px;
+    padding: 5px 10px
+}
+
+select:focus {
+    outline: none
+}
+
+.add-experience:hover {
+    background: #506BEE;
+    color: #fff;
+    cursor: pointer;
+    border: solid 1px #506BEE
+}
+
+.content-select select{
+	appearance: none;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+.content-select{
+	max-width: 250px;
+	position: relative;
+}
+ 
+.content-select select{
+	display: inline-block;
+	width: 100%;
+	cursor: pointer;
+  	padding: 7px 10px;
+  	height: 42px;
+  	outline: 0; 
+  	border: 0;
+	border-radius: 0;
+	background: #f0f0f0;
+	color: #7b7b7b;
+	font-size: 1em;
+	color: #999;
+	font-family: 
+	'Quicksand', sans-serif;
+	border:2px solid rgba(0,0,0,0.2);
+    border-radius: 12px;
+    position: relative;
+    transition: all 0.25s ease;
+}
+ 
+.content-select select:hover{
+	background: #B1E8CD;
+}
+ 
+/* 
+Creamos la fecha que aparece a la izquierda del select.
+Realmente este elemento es un cuadrado que sólo tienen
+dos bordes con color y que giramos con transform: rotate(-45deg);
+*/
+.content-select i{
+	position: absolute;
+	right: 20px;
+	top: calc(50% - 13px);
+	width: 16px;
+	height: 16px;
+	display: block;
+	border-left:4px solid #2AC176;
+	border-bottom:4px solid #2AC176;
+	transform: rotate(-45deg); /* Giramos el cuadrado */
+	transition: all 0.25s ease;
+}
+ 
+.content-select:hover i{
+	margin-top: 3px;
+}
\ No newline at end of file

curriculumsearch/src/main/webapp/css/indexStyle.css

+body{
+    background-image:url(/img/fondoIndex.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:100vh;width:100vw;  
+    position: absolute;
+    -webkit-text-size-adjust: 100%;
+}
\ No newline at end of file

curriculumsearch/src/main/webapp/css/style.css

+*{
+    margin: 0px;
+    padding: 0px;
+}
+body{
+    background-image:url(/img/FondoRoshka.jpg);
+    background-size:cover;
+    background-repeat:no-repeat;
+    overflow: hidden;
+    height:100%;width:100%; 
+    align-items:"middle";
+    position: absolute;
+}
+#form{max-width:333px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);
+    color:#fff;
+    box-shadow:3px 3px 4px rgba(0,0,0,.2)}
+#head{text-align:center}
+#image{margin:auto;width:50%;
+    padding:10px;max-height:175px;
+    max-width:175px}
+/*#linkas{display:block;
+    text-align:center;
+    font-size:12px;
+    opacity:.9;
+    text-decoration:none}
+#butonas{background:#70b2d0;
+    outline:0;
+    text-shadow:initial}
+#formum,#formum2{background:0 0;
+    border:none;
+    border-bottom:1px solid #434a52;
+    border-radius:0;
+    box-shadow:none;
+    outline:0;
+    color:inherit} */
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/cargo-form.jsp

-<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib
-prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ page
-contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cargo</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-      crossorigin="anonymous"
-    ></script>
-  </head>
-  <body>
-    <jsp:include page="header.jsp" />
-    <jsp:include page="alerts.jsp" />
-    <div class="container-xxl my-md-4 bd-layout">
-        <h2>Agregar Cargo</h2>
-        <div class="p-3 mb-2 bg-light text-dark border border-light">
-            <form:form
-            action="/cargo/${cargo.id == null ? '' : cargo.id}"
-            method="post"
-            modelAttribute="cargo"
-            class="row row-cols-lg-auto g-3 align-items-center"
-            >
-            <div class="col-12">
-                <form:label class="form-label visually-hidden" path="nombre"
-                >Nombre del cargo
-                </form:label>
-                <form:input
-                type="text"
-                path="nombre"
-                class="form-control"
-                placeholder="Nombre del cargo" required="true"
-                
-                />
-            </div>
-            <div class="col-12">
-                <input type="submit" value="Guardar" class="btn btn-primary" />
-            </div>
-            </form:form>
-        </div>
-    </div>
-  </body>
-</html>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+  <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
+      <div class="card d-flex flex-column justify-content-center align-items-center mx-auto mt-2 p-3" style="width: 20rem;">
+        <h5 class="card-title">${cargo.id == null ? "Agregar" : "Modificar"} Cargo</h5>
+          <form:form
+          action="/cargo/${cargo.id == null ? '' : cargo.id}"
+          method="post"
+          modelAttribute="cargo"
+          class="card-body d-flex flex-column"
+          >
+          <div class="">
+              <form:label class="form-label visually-hidden" path="nombre"
+              >Nombre del cargo
+              </form:label>
+              <form:input
+              type="text"
+              path="nombre"
+              class="form-control ${ mismoNombre ? 'is-invalid' : ''}"
+              placeholder="Nombre del cargo" required="true"
+              
+              />
+              <div id="validationServerUsernameFeedback" class="invalid-feedback">
+                Este nombre ya existe
+              </div>
+          </div>
+          <div class="mt-2 align-self-end">
+              <input type="submit" value="Guardar" class="btn btn-primary" />
+          </div>
+          </form:form>
+      </div>
+    </layout:put>
+    <layout:put block="scripts" type="APPEND">
+
+    </layout:put>
+</layout:extends>

curriculumsearch/src/main/webapp/jsp/cargos.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib
 prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ page
 contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cargo</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-      crossorigin="anonymous"
-    ></script>
-  </head>
-  <body>
-    <jsp:include page="header.jsp" />
-    <jsp:include page="alerts.jsp" />
-    <div class="container-xxl my-md-4 bd-layout">
-    <h2>Lista de cargos</h2>
-      <div>
-        <form>
-          <label for="cargos">Nombre:</label>
-          <input
-            type="text"
-            name="nombre"
-            id="nombre"
-            value="${param.nombre}"
-          />
-          <input type="submit" value="Buscar" />
-        </form>
-        <a href="/cargo">Agregar Nuevo Cargo</a>
-      </div>
-      <div>
-        <table class="table">
-          <thead>
-            <tr>
-              <th scope="col">#</th>
-              <th scope="col">Cargo</th>
-            </tr>
-          </thead>
-          <tbody>
-            <c:forEach items="${cargos}" var="cargo" varStatus="sta">
-              <tr>
-                <th scope="row">${sta.index+1}</th>
-                <td>${cargo.getNombre()}</td>
-                <td>
-                  <a href="/convocatorias?cargoId=${cargo.id}"
-                    >Ver Convocatorias</a
-                  >
-                </td>
-                <td><a href="/cargo/${cargo.id}">Editar cargo</a></td>
-              </tr>
-            </c:forEach>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </body>
-</html>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+  <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
+      <div class="container-xxl my-md-4 bd-layout">
+        <h2>Lista de cargos</h2>
+          <div>
+            <form>
+              <label for="cargos">Nombre:</label>
+              <input
+                type="text"
+                name="nombre"
+                id="nombre"
+                value="${param.nombre}"
+              />
+              <input type="submit" value="Buscar" />
+            </form>
+            <a href="/cargo">Agregar Nuevo Cargo</a>
+          </div>
+          <div>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th scope="col">#</th>
+                  <th scope="col">Cargo</th>
+                </tr>
+              </thead>
+              <tbody>
+                <c:forEach items="${cargos}" var="cargo" varStatus="sta">
+                  <tr>
+                    <th scope="row">${sta.index+1}</th>
+                    <td>${cargo.getNombre()}</td>
+                    <td>
+                      <a href="/convocatorias?cargoId=${cargo.id}"
+                        >Ver Convocatorias</a
+                      >
+                    </td>
+                    <td><a href="/cargo/${cargo.id}">Editar cargo</a></td>
+                  </tr>
+                </c:forEach>
+              </tbody>
+            </table>
+          </div>
+        </div>
+    </layout:put>
+    <layout:put block="scripts" type="APPEND">
+
+    </layout:put>
+</layout:extends>

curriculumsearch/src/main/webapp/jsp/convocatoria-form.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Convocatoria</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-</head>
-<body>
-    <jsp:include page="header.jsp"/>
-    <jsp:include page="alerts.jsp"/>
-    <div class="container-xxl my-md-4 bd-layout">
-    <h2>Agregar Convocatoria</h2>
-    <div class="p-3 mb-2 bg-light text-dark border border-light ">
-        <form:form action="/convocatoria/${convocatoria.id == null ? '' : convocatoria.id}" method="post" modelAttribute="convocatoria">
-            <div class="mb-3 col-3">
-                <form:label path="fechaInicioS" class="form-label">Fecha inicial</form:label>
-                <form:input type="date" class="form-control" path="fechaInicioS" required="true"/>
-              
-            </div>
-            <div class="mb-3 col-3">
-                <form:label path="fechaFinS" class="form-label">Fecha Fin</form:label>
-                <form:input type="date" class="form-control" path="fechaFinS" required="true"/>
-            </div>
-            <div class="mb-3 col-3">
-                <form:label path="cupos" class="form-label">Cupos:</form:label>
-                <form:input type="number" class="form-control" path="cupos" required="true"/>
-            </div>
-            <div class="mb-3 col-3">
-                <form:label path="cargoId" class="form-label">Cargo</form:label>
-                <form:select class="form-select" path="cargoId" required="true">
-                    <c:forEach items="${cargos}" var="cargo">
-                        <form:option value="${cargo.id}">${cargo.nombre} </form:option>
-                    </c:forEach>
-                </form:select>
-            </div>
-            <button type="submit" class="btn btn-primary">Guardar</button>
-          </form:form>
-    </div>
-   </div>
-</body>
-</html>
\ No newline at end of file
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
+        <h2>${convocatoria.id == null ? "Agregar" : "Modificar"} Convocatoria</h2>
+        <div class="p-3 mb-2 bg-light text-dark border border-light ">
+            <form:form action="/convocatoria/${convocatoria.id == null ? '' : convocatoria.id}" method="post" modelAttribute="convocatoria">
+                <div class="mb-3 col-3">
+                    <form:label path="fechaInicioS" class="form-label">Fecha inicial</form:label>
+                    <form:input type="date" class="form-control" path="fechaInicioS" required="true"/>
+                
+                </div>
+                <div class="mb-3 col-3">
+                    <form:label path="fechaFinS" class="form-label">Fecha Fin</form:label>
+                    <form:input type="date" class="form-control" path="fechaFinS" required="true"/>
+                </div>
+                <div class="mb-3 col-3">
+                    <form:label path="cupos" class="form-label">Cupos:</form:label>
+                    <form:input type="number" class="form-control" path="cupos" required="true"/>
+                </div>
+                <div class="mb-3 col-3">
+                    <form:label path="cargoId" class="form-label">Cargo</form:label>
+                    <form:select class="form-select" path="cargoId" required="true">
+                        <c:forEach items="${cargos}" var="cargo">
+                            <form:option value="${cargo.id}">${cargo.nombre} </form:option>
+                        </c:forEach>
+                    </form:select>
+                </div>
+                <button type="submit" class="btn btn-primary">Guardar</button>
+            </form:form>
+        </div>
+    </layout:put>
+    <layout:put block="scripts" type="APPEND">
+
+    </layout:put>
+</layout:extends>

curriculumsearch/src/main/webapp/jsp/convocatorias.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cargo</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-</head>
-<body >
-    <jsp:include page="header.jsp"/>
-    <jsp:include page="alerts.jsp"/>
-    <div class="container-xxl my-md-4 bd-layout">
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
         <h2>Lista de convocatorias</h2>
         <div>
             <form>
@@ -67,7 +57,8 @@
               </table>
              
         </div>
-    </div>
-    
-</body>
-</html>
\ No newline at end of file
+    </layout:put>
+    <layout:put block="scripts" type="APPEND">
+
+    </layout:put>
+</layout:extends>

curriculumsearch/src/main/webapp/jsp/detallepostulante.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tecnologia</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-</head>
-<body>
-    <jsp:include page="header.jsp"/>
-    <jsp:include page="alerts.jsp"/>
-    <div class="container-xxl my-md-4 bd-layout">
-        <h2 style="text-align: center;">DETALLE POSTULANTE</h2>
-        <div style="padding: 10px;margin: 3px;border: 1px solid black;">
-       
-            <br><label>INFORMACION GENERAL</label><br>     
-            <label>Id: ${postulante.id}</label><br>
-            <label>Nombre: ${postulante.nombre}</label><br>
-            <label>Apellido ${postulante.apellido}</label><br>
-            <label>Tipo de documento: ${postulante.tipoDocumento}</label><br>
-            <label>Cedula: ${postulante.nroDocument}</label><br>
-            <label>Correo: ${postulante.correo}</label><br>
-            <label>Departamento: ${postulante.getCiudad().getDepartamento().getNombre()}</label><br>
-            <label>Ciudad: ${postulante.getCiudad().getNombre()}</label><br>
-            <label>Telefono: ${postulante.telefono}</label><br><label>
-            <label>Fecha de nacimiento: ${postulante.fechaNacimiento}</label><br>
-            <label>Resumen: ${postulante.resumen}</label><br>
-            <label>Nivel de ingles: ${postulante.nivelIngles}</label><br>
-            <label>Curriculum: ${postulante.curriculum}</label><br>
-            <label>Estado civil: ${postulante.estadoCivil}</label><br>
-            <label>Nacionalidad: ${postulante.nacionalidad}</label><br>
-            <label>Disponibilidad: ${postulante.disponibilidad}</label><br>
-            <label>Estado del Postulante: ${postulante.estadoPostulante.getEstado()}</label><br>
-            <label>Comentario RRHH: ${postulante.getComentarioRRHH()}</label><br>   
-            <br><label>TECNOLOGIAS</label><br>
-            <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
-                <label>Tecnologias: ${detalle_tecnologia.getTecnologia().getNombre()} -</label>
-                <label>Nivel de Tecnologia: ${detalle_tecnologia.getNivel()}</label><br>
-            </c:forEach>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="contents" type="REPLACE">
+        <h2 style="text-align: center;">
+            DETALLE POSTULANTE        
+        </h2>
+        <div class="row gy-3">
+            <div class="col-md-6">
+                <div class="card mb-3">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Nombre</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.nombre} ${postulante.apellido}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Email</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.correo}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Vive en</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.getCiudad().getNombre()}, ${postulante.getCiudad().getDepartamento().getNombre()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Nro de Documento</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.tipoDocumento}: ${postulante.nroDocument}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Telefono</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.telefono}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Edad</h6>
+                      </div>
+                      <div id="edad" class="col-sm-9 text-secondary"></div>
+                      <input style="display: none;" id="dob" value="${postulante.fechaNacimiento}">
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Resumen</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.resumen}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Nivel de Ingles</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.nivelIngles}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Estado Civil</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.estadoCivil.getDescripcion()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Nacionalidad</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.nacionalidad.getDescripcion()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Disponbilidad</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.disponibilidad.getDescripcion()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">Estado</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.estadoPostulante.getEstado()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col-sm-3">
+                        <h6 class="mb-0">ComentarioRRHH</h6>
+                      </div>
+                      <div class="col-sm-9 text-secondary">
+                        ${postulante.getComentarioRRHH()}
+                      </div>
+                    </div>
+                    <hr>
+                    <div class="row">
+                      <div class="col">
+                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#estadoModalLong">actualizar</button>
+                      </div>
+                      <div class="col">
+                        <a class="btn btn-link " href="#">Descargar CV</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-            <br><label>EXPERIENCIAS</label><br>
-           
-            <c:forEach items="${postulante.experiencias}" var="detalle_experiencia">
-                <label>Institucion: ${detalle_experiencia.getInstitucion()}</label><br>
-                <label>Fecha Inicio: ${detalle_experiencia.getFechaDesde()}</label><br>
-                <label>Fecha Fin: ${detalle_experiencia.getFechaHasta()}</label><br>
-                <label>Referencia: ${detalle_experiencia.getNombreReferencia()}</label><br>
-                <label>Telefono de la referencia: ${detalle_experiencia.getTelefonoReferencia()}</label><br>
-                <label>Cargo: ${detalle_experiencia.getCargo()}</label><br>
-                <label>Motivo de salida: ${detalle_experiencia.getMotivoSalida()}</label><br>
-            </c:forEach>
+              </div>
+              <div class="col-md-6">
+                <div class="row gy-3">
+                    <div class="col-md-6">
+                        <div class="card h-100">
+                            <div class="card-body">
+                              <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2">Tecnologias</i></h6>
+                                <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
+                                    <small>${detalle_tecnologia.getTecnologia().getNombre()}</small>
+                                    <div class="progress mb-3" style="height: 5px">
+                                      <div class="progress-bar bg-primary" role="progressbar" style="width: ${(detalle_tecnologia.getNivel() / 5) * 100}%" aria-valuenow="${detalle_tecnologia.getNivel()}" aria-valuemin="1" aria-valuemax="5"></div>
+                                    </div>
+                                </c:forEach>
+                                <hr>
+                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2">Cargos al que postula</i></h6>
+                            <ul class="list-group list-group-flush">
+                                <c:forEach items="${postulante.postulaciones}" var="convocatoria">
 
-            <br><label>ESTUDIOS</label><br>
+                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                      <h6 class="mb-0">${convocatoria.getCargo().getNombre()}</h6>
+                                      <span class="text-secondary"></span>
+                                    </li>
+                                </c:forEach>
+                              
+                            </ul>
+                             
+                            </div>
+                          </div>
+                    </div>
+                    <div class="col-md-6">
+                          <div class="card">
+                              <div class="card-body">
+                            <div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
+                            
+                            <div class="carousel-inner">
+                                
+                                
+                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2">Experiencias</i></h6>
+                                <c:forEach items="${postulante.experiencias}" var="detalle_experiencia" varStatus="status">
+                                    <div class="carousel-item  ${status.first ? 'active' : ''}" data-bs-interval="false">
 
-            <c:forEach items="${postulante.estudios}" var="detalle_estudios">
-                <label>Institucion: ${detalle_estudios.getInstitucion().getNombre()}</label><br>
-                <label>SubNombre: ${detalle_estudios.getInstitucion().getSubNombre()}</label><br>
-                <label>Tipo de estudio: ${detalle_estudios.getTipoDeEstudio()}</label><br>  
-                <label>Tema de estudio: ${detalle_estudios.getTemaDeEstudio()}</label><br>     
-                <label>Fecha Inicio: ${detalle_estudios.getFechaDesde()}</label><br>
-                <label>Fecha Fin: ${detalle_estudios.getFechaHasta()}</label><br>
-                <label>Estado: ${detalle_estudios.getEstado()}</label><br>
-            </c:forEach>
+                                        <ul class="list-group list-group-flush ">
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Institucion</h6>
+                                                <span class="text-secondary">${detalle_experiencia.getInstitucion()}</span>
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Fecha Inicio</h6>
+                                                <span class="text-secondary"><fmt:formatDate value="${detalle_experiencia.getFechaDesde()}" pattern="dd-MM-yyyy" /></span>
+                                           <!--    <input style="display:none;" id="fechaInicioExp" value="${detalle_experiencia.getFechaDesde()}">
 
-            <br><label>REFERENCIA PERSONAL</label><br>
+                                                <span style="display: none;" class="text-secondary" id="fechaInicioExp2">${detalle_experiencia.getFechaDesde()}</span>--> 
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Fecha Fin</h6>
+                                                <span class="text-secondary"><fmt:formatDate value="${detalle_experiencia.getFechaHasta()}" pattern="dd-MM-yyyy" /></span>
+                                             <!--    <input style="display:none;" id="fechaFinExp" value="${detalle_experiencia.getFechaHasta()}">
+                                                <span style="display: none;" class="text-secondary" id="fechaFinExp2">${detalle_experiencia.getFechaHasta()}</span>--> 
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Referencia</h6>
+                                                <span class="text-secondary">${detalle_experiencia.getNombreReferencia()}</span>
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Telefono de la referencia</h6>
+                                                <span class="text-secondary">${detalle_experiencia.getTelefonoReferencia()}</span>
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Cargo</h6>
+                                                <span class="text-secondary">${detalle_experiencia.getCargo()}</span>
+                                            </li>
+                                            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                                <h6 class="mb-0">Motivo de salida</h6>
+                                                <span class="text-secondary">${detalle_experiencia.getMotivoSalida()}</span>
+                                            </li>
+                                            
+                                            
+                                        </ul>
+                                    </div>
+                                </c:forEach>
+                                        
+                                    
+                              
+                            </div>
+                            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+                              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                              <span class="visually-hidden">Previous</span>
+                            </button>
+                            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+                              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                              <span class="visually-hidden">Next</span>
+                            </button>
+                          </div>
+                           </div>
+                          </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-body">
+                          <div id="carouselExampleIndicators" class="carousel carousel-dark slide" data-bs-ride="carousel">
+                          
+                          <div class="carousel-inner">
+                              
+                              
+                              <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2">Estudios</i></h6>
+                              <c:forEach items="${postulante.estudios}" var="detalle_estudios" varStatus="status">
+                                  <div class="carousel-item  ${status.first ? 'active' : ''}" data-bs-interval="false">
 
-            <c:forEach items="${postulante.referencias}" var="detalle_referencias">
-                <label>Nombre: ${detalle_referencias.getNombre()}</label>
-                <label>Relacion: ${detalle_referencias.getRelacion()}</label><br>
-                <label>Telefono: ${detalle_referencias.getTelefono()}</label><br>
-            </c:forEach>
-           
-            <br><label>CARGOS AL CUAL POSTULA</label><br>
+                                      <ul class="list-group list-group-flush ">
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Institucion</h6>
+                                              <span class="text-secondary">${detalle_estudios.getInstitucion().getNombre()}</span>
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Fecha Inicio</h6>
+                                              <span class="text-secondary"><fmt:formatDate value="${detalle_estudios.getFechaDesde()}" pattern="dd-MM-yyyy" /></span>
 
-            <c:forEach items="${postulante.postulaciones}" var="convocatoria">
-                <label>Nombre: ${convocatoria.getCargo().getNombre()}</label><br>
-            </c:forEach>
-           
+                                           <!-- <input style="display:none;" id="fechaInicioEst" value="${detalle_estudios.getFechaDesde()}">-->  
+                                              
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Fecha Fin</h6>
+                                              <span class="text-secondary"><fmt:formatDate value="${detalle_estudios.getFechaHasta()}" pattern="dd-MM-yyyy" /></span>
 
-        </div>     
-        <div style="padding:10px ;margin: 5px;border: 3px solid black;">
-            <h2>Cambiar Estado del Postulante y Comentario de RRHH</h2>
-            <form:form class="needs-validation" method="post" modelAttribute="postulante">
-                <form:label path="estadoPostulante" class="form-label">Estado</form:label>
-                <div class="inputs">
-                <form:select class="form-select" path="estadoPostulante" aria-label="Default select example">
-                    <c:forEach items="${estadoP}" var="estadoPostulante">
-                                <c:choose>
-                                    <c:when test="${estadoPostulante.getEstado()=='Nuevo' }">
-                                    </c:when>
-                                    <c:otherwise>
-                                        <form:option value="${estadoPostulante}">${estadoPostulante.getEstado()}</form:option>
-                                    </c:otherwise>
-                                </c:choose>    
-                    </c:forEach>
-                </form:select>
-                </div>
-                <div class="inputs">
-                    <form:label path="comentarioRRHH" class="form-label">ComentarioRRHH</form:label>
-                    <form:textarea  class="form-control" path="comentarioRRHH" id="comentarioRRHH"></form:textarea>
+                                            <!--  <input style="display:none;" id="fechaFinEst" value="${detalle_estudios.getFechaHasta()}">-->
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Tipo de Estudio</h6>
+                                              <span class="text-secondary">${detalle_estudios.getTipoDeEstudio()}</span>
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Tema de estudio</h6>
+                                              <span class="text-secondary">${detalle_estudios.getTemaDeEstudio()}</span>
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">Estado</h6>
+                                              <span class="text-secondary">${detalle_estudios.getEstado()}</span>
+                                          </li>
+                                          <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                              <h6 class="mb-0">SubNombre</h6>
+                                              <span class="text-secondary">${detalle_estudios.getInstitucion().getSubNombre()}</span>
+                                          </li>
+                                          
+                                          
+                                      </ul>
+                                  </div>
+                              </c:forEach>
+                                      
+                                  
+                            
+                          </div>
+                          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Previous</span>
+                          </button>
+                          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="visually-hidden">Next</span>
+                          </button>
+                        </div>
+                         </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="card">
+                            <div class="card-body">
+                                <h6 class="d-flex align-items-center mb-3"><i class="material-icons text-info mr-2">Referencias Personales</i></h6>
+                            <ul class="list-group list-group-flush">
+                                <c:forEach items="${postulante.referencias}" var="referencia">
+
+                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
+                                      <h6 class="mb-0">${referencia.nombre}, ${referencia.relacion}, ${referencia.telefono}</h6>
+                                      <span class="text-secondary"></span>
+                                    </li>
+                                </c:forEach>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <input type="submit" value="submit"/>
-            </form:form>
+              </div>
+              
+            
+            
+          </div>
+    <!-- Modal -->
+    <div class="modal fade" id="estadoModalLong" tabindex="-1" role="dialog" aria-labelledby="estadorrhhModal" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+      <div class="modal-content">
+          <div class="modal-header">
+          <h5 class="modal-title" id="estadorrhhModal">Estado</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+          </button>
+          </div>
+          <div class="modal-body">
+              <form:form class="needs-validation" method="post" modelAttribute="postulante">
+                  <form:label path="estadoPostulante" class="form-label">Estado</form:label>
+                  <div class="inputs">
+                      <form:select class="form-select" path="estadoPostulante" aria-label="Default select example">
+                          <c:forEach items="${estadoP}" var="estadoPostulante">
+                                      <c:choose>
+                                          <c:when test="${estadoPostulante.getEstado()=='Nuevo' }">
+                                          </c:when>
+                                          <c:otherwise>
+                                              <form:option value="${estadoPostulante}">${estadoPostulante.getEstado()}</form:option>
+                                          </c:otherwise>
+                                      </c:choose>    
+                          </c:forEach>
+                      </form:select>
+                  </div>
+                  <div class="inputs">
+                      <form:label path="comentarioRRHH" class="form-label">ComentarioRRHH</form:label>
+                      <form:textarea  class="form-control" path="comentarioRRHH" id="comentarioRRHH"></form:textarea>
+                  </div>
+                  <input type="submit" value="Guardar"/>
+              </form:form> 
+          </div>
+          <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+      </div>
+      </div>
+  </div>  
+  <layout:put block="scripts" type="APPEND">
 
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="../valEdad.js"></script>
+
+  </layout:put>
 
             
-            
-        </div>     
-    </div>     
         
-</body>
+    
+ 
+    </layout:put>
+</layout:extends>
 
-</html>
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/detallepostulante2.jsp

+
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Curriculum vitae</title>
+    <link href="../css/detallePostulantestyle.css" rel="stylesheet" type="text/css"/>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</head>
+<body class="container">
+    <header>
+        <div>
+            <br>
+            <h2>&nbsp;&nbsp;&nbsp;&nbsp; ${postulante.nombre} ${postulante.apellido}</h2>    
+            <h3>&nbsp;&nbsp;&nbsp;&nbsp; ${postulante.tipoDocumento}: ${postulante.nroDocument}</h3>
+            <h3>&nbsp;&nbsp;&nbsp;&nbsp; Correo: ${postulante.correo}</h3>
+            <br>
+        </div>
+    </header>
+    <section>
+        <article>
+            <br>
+            <h2>&nbsp;&nbsp;Informacion Personal</h2>
+            <ul>
+                <li>
+                    Direccion: ${postulante.getCiudad().getDepartamento().getNombre()},${postulante.getCiudad().getNombre()}
+                </li>
+                <li>
+                    Telefono: ${postulante.telefono}
+                </li>
+                <li>
+                    Fecha de nacimiento: ${postulante.fechaNacimiento}
+                </li>
+                <li>
+                    Nivel de ingles:&nbsp;&nbsp;<progress value="${postulante.nivelIngles}" max="5"> 
+                </li>
+                <li>
+                    Estado civil: ${postulante.estadoCivil}
+                </li>
+                <li>
+                    Nacionalidad: ${postulante.nacionalidad}
+                </li>
+                <li>
+                    Disponibilidad: ${postulante.disponibilidad}
+                </li>
+                <li>
+                    Resumen: ${postulante.resumen}
+                </li>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;TECNOLOGIAS</h2>
+            <ul>
+                <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia">
+                    <label>Tecnologias: ${detalle_tecnologia.getTecnologia().getNombre()} &nbsp;&nbsp;<progress value="${detalle_tecnologia.getNivel()}" max="5"></progress></label><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;Cargo al que Postula</h2>
+            <ul>
+                <c:forEach items="${postulante.postulaciones}" var="convocatoria">
+                    <li>Nombre: ${convocatoria.getCargo().getNombre()}</li><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>&nbsp;&nbsp;Estado RRHH</h2>
+            <ul>
+                <li>Estado del Postulante: ${postulante.estadoPostulante.getEstado()}</li>
+                <li>Comentario RRHH: ${postulante.getComentarioRRHH()}</li>
+                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">Cambiar</button>
+                  
+            </ul>
+        </article>
+        <aside>
+            <br>
+            <h2>Informacion Academica</h2>
+            <ul>
+                <c:forEach items="${postulante.estudios}" var="detalle_estudios">
+                    <label>Institucion: ${detalle_estudios.getInstitucion().getNombre()}</label><br>
+                    <label>Tipo de estudio: ${detalle_estudios.getTipoDeEstudio()}</label><br>  
+                    <label>Tema de estudio: ${detalle_estudios.getTemaDeEstudio()}</label><br>     
+                    <label>Fecha Inicio: ${detalle_estudios.getFechaDesde()}</label><br>
+                    <label>Fecha Fin: ${detalle_estudios.getFechaHasta()}</label><br>
+                    <label>Estado: ${detalle_estudios.getEstado()}</label><br>
+                    <br><br>
+                </c:forEach>
+            </ul>
+            <br>
+            <h2>EXPERIENCIAS</h2>
+            <ul>
+                <c:forEach items="${postulante.experiencias}" var="detalle_experiencia">
+                    <label>Institucion: ${detalle_experiencia.getInstitucion()}</label><br>
+                    <label>Fecha Inicio: ${detalle_experiencia.getFechaDesde()}</label><br>
+                    <label>Fecha Fin: ${detalle_experiencia.getFechaHasta()}</label><br>
+                    <label>Referencia: ${detalle_experiencia.getNombreReferencia()}</label><br>
+                    <label>Telefono de la referencia: ${detalle_experiencia.getTelefonoReferencia()}</label><br>
+                    <label>Cargo: ${detalle_experiencia.getCargo()}</label><br>
+                    <label>Motivo de salida: ${detalle_experiencia.getMotivoSalida()}</label><br>
+                    </c:forEach>
+            </ul>
+            <br> 
+            <h2>Referencias</h2>
+            <ul>
+                <c:forEach items="${postulante.referencias}" var="detalle_referencias">
+                    <label>Nombre: ${detalle_referencias.getNombre()}</label><br>
+                    <label>Relacion: ${detalle_referencias.getRelacion()}</label><br>
+                    <label>Telefono: ${detalle_referencias.getTelefono()}</label><br>
+                </c:forEach>
+            </ul>   
+        </aside>
+        
+    </section>
+    <!-- Modal -->
+    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+            </div>
+            <div class="modal-body">
+                <form:form class="needs-validation" method="post" modelAttribute="postulante">
+                    <form:label path="estadoPostulante" class="form-label">Estado</form:label>
+                    <div class="inputs">
+                        <form:select class="form-select" path="estadoPostulante" aria-label="Default select example">
+                            <c:forEach items="${estadoP}" var="estadoPostulante">
+                                        <c:choose>
+                                            <c:when test="${estadoPostulante.getEstado()=='Nuevo' }">
+                                            </c:when>
+                                            <c:otherwise>
+                                                <form:option value="${estadoPostulante}">${estadoPostulante.getEstado()}</form:option>
+                                            </c:otherwise>
+                                        </c:choose>    
+                            </c:forEach>
+                        </form:select>
+                    </div>
+                    <div class="inputs">
+                        <form:label path="comentarioRRHH" class="form-label">ComentarioRRHH</form:label>
+                        <form:textarea  class="form-control" path="comentarioRRHH" id="comentarioRRHH"></form:textarea>
+                    </div>
+                    <input type="submit" value="Guardar"/>
+                </form:form> 
+            </div>
+            <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+        </div>
+    </div>  
+      
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    
+</body>
+  
+</html>
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/edit-user-data.jsp

+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<html>
+<head>
+    <meta charset="ISO-8859-1">
+    <title>Edit Profile</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+
+</head>
+<style>
+    @media (min-width: 1025px) {
+        .h-custom {
+            height: 100vh !important;
+        }
+    }
+</style>
+<body>
+<section class="h-100 h-custom">
+    <div class="container py-5 h-100">
+        <div class="row d-flex justify-content-center align-items-center h-100">
+            <div class="col-lg-8 col-xl-6">
+                <div class="card rounded-3">
+                    <img src="https://cdn.pixabay.com/photo/2013/08/09/05/54/layer-170971_960_720.jpg" class="w-100" style="border-top-left-radius: .3rem; border-top-right-radius: .3rem;height: 250px;" alt="Sample photo";>
+                    <div class="card-body p-4 p-md-5">
+                        <h3 class="mb-4 pb-2 pb-md-0 mb-md-5 px-md-2">Perfil</h3>
+
+                        <form:form action="/edit-user-data" class="px-md-2" method="POST" modelAttribute="user">
+                            <div class="form-outline mb-4">
+                                <form:label path="email" class="form-label">Email</form:label>
+                                <form:input path="email" type="email" class="form-control" required="required"></form:input>
+                            </div>
+                            <div class="row">
+                                <div class="col-md-6 mb-4">
+                                    <div class="form-outline">
+                                        <form:label path="firstName" class="form-label">Nombre </form:label>
+                                        <form:input path="firstName" class="form-control"></form:input>
+                                    </div>
+                                </div>
+                                <div class="col-md-6 mb-4">
+                                    <div class="form-outline">
+                                        <form:label path="lastName" class="form-label">Apellido </form:label>
+                                        <form:input path="lastName" class="form-control"></form:input>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mb-4 pb-2 pb-md-0 mb-md-5">
+                                <div class="col-md-6">
+
+                                </div>
+                            </div>
+
+                            <button type="submit" class="btn btn-success btn-lg mb-1">Submit</button>
+                        </form:form>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+</body>
+</html>

curriculumsearch/src/main/webapp/jsp/forgot_password_form.jsp

+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>Forgot Password</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous">
+
+</head>
+<body>
+    <jsp:include page="alerts.jsp"/>
+    <div>
+        <h2>Forgot Password</h2>
+    </div>
+
+
+    <form:form action="/forgot-password" method="post" style="max-width: 420px; margin: 0 auto;">
+        <div class="border border-secondary rounded p-3">
+            <div>
+                <p>We will be sending a reset password link to your email.</p>
+            </div>
+            <div>
+                <p>
+                    <input type="email" name="email" class="form-control" placeholder="Enter your e-mail" required autofocus/>
+                </p>
+                <p class="text-center">
+                    <input type="submit" value="Send" class="btn btn-primary" />
+                </p>
+            </div>
+        </div>
+    </form:form>
+</body>
+</html>
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/header.jsp

@@ -46,8 +46,12 @@
                 </ul>
               </li>
               <li class="nav-item">
+                <a class="nav-link" href="/edit-user-data">Editar mis datos</a>
+              </li>
+              <li class="nav-item">
                 <a class="nav-link" href="/logout">Salir</a>
               </li>
+
             </ul>
           </div>
         </div>

curriculumsearch/src/main/webapp/jsp/index.jsp

@@ -8,7 +8,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <title>Document</title>
+    <title>RRHH</title>
+    <link href="../css/indexStyle.css" rel="stylesheet" type="text/css"/>
+    
 </head>
 <body>
     <jsp:include page="header.jsp"/>

curriculumsearch/src/main/webapp/jsp/layouts/base.jsp

+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <layout:block name="cssDeclaracion"><link href="../css/cargoStyle.css" rel="stylesheet" type="text/css"/></layout:block>
+
+    <title>RRHH</title>
+</head>
+<body>
+    <header>
+    
+    
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container-fluid">
+              <a class="navbar-brand" href="#">ROSHKA</a>
+              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <div class="collapse navbar-collapse" id="navbarNavDropdown">
+                <ul class="navbar-nav">
+                  <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/home">Home</a>
+                  </li>
+                
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                      Cargos
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                      <li><a class="dropdown-item" href="/cargo">Agregar Cargo</a></li>
+                      <li><a class="dropdown-item" href="/convocatoria">Agregar Convocatoria</a></li>
+                      <li><a class="dropdown-item" href="/cargos">Listar cargos</a></li>
+                      <li><a class="dropdown-item" href="/convocatorias">Listar convocatorias</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                      Tecnologias
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                      <li><a class="dropdown-item" href="/tecnologia">Agregar</a></li>
+                      <li><a class="dropdown-item" href="/tecnologias">Listar</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                      Postulantes
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+                      <li><a class="dropdown-item" href="/postulante">Agregar</a></li>
+                      <li><a class="dropdown-item" href="/postulantes">Listar</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="/logout">Salir</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+    </header>
+    
+    <div class="container-xxl my-md-4 bd-layout">
+        <layout:block name="contents">
+        
+        </layout:block>
+    </div>
+
+    <layout:block name="scripts">
+        
+    </layout:block>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</body>
+</html>
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/login.jsp

@@ -8,21 +8,22 @@
     <title>Login</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous">
-
+    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
 </head>
 <body>
 <jsp:include page="alerts.jsp"/>
-<section class="vh-100" style="background-color: #508bfc;">
+<!-- <section class="vh-100" style="background-color: #508bfc;"> -->
     <div class="container py-5 h-100">
-        <div class="row d-flex justify-content-center align-items-center h-100">
+        <div class="row d-flex justify-content-center align-items-center h-10">
             <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                 <div class="card shadow-2-strong" style="border-radius: 1rem;">
                     <div class="card-body p-5 text-center">
 
-
-
                         <form:form method="post" action="/login">
                             <h3 class="mb-5">Ingresar</h3>
+                            <div align="center">
+                                <img src="../img/LogoRoshka.jpg" class="rounded img-fluid" id="image" style="width:auto;height:auto;" alt=""/>
+                            </div>
                             <div class="form-outline mb-4">
                                 <input type="email" id="typeEmailX-2" class="form-control form-control-lg" name="email" placeholder="example@example.com"/>
                                 <label class="form-label" for="typeEmailX-2">Email</label>
@@ -38,7 +39,12 @@
                         </form:form>
 
                         <hr class="my-4">
-
+                        <div class="row">
+                            <a href="/forgot-password">Olvidaste tu contrasena?</a>
+                        </div>
+                        <div class="row">
+                            <a href="/register">Registrate</a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -46,6 +52,7 @@
     </div>
 </section>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
 

curriculumsearch/src/main/webapp/jsp/postulante-form.jsp

@@ -10,123 +10,8 @@
 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <title>Hello, world!</title>
-
-    
-    <style type="text/css" media="screen">
-          body {
-                  background-color: #506BEE
-              }
-
-              .card {
-                  border: none
-              }
-
-              .image {
-                  position: relative
-              }
-
-              .image span {
-                  background-color: #506BEE;
-                  color: #fff;
-                  padding: 6px;
-                  height: 30px;
-                  width: 30px;
-                  border-radius: 50%;
-                  font-size: 13px;
-                  position: absolute;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  top: -0px;
-                  right: 0px
-              }
-
-              .user-details h4 {
-                  color: #506BEE
-              }
-
-              .ratings {
-                  font-size: 30px;
-                  font-weight: 600;
-                  display: flex;
-                  justify-content: left;
-                  align-items: center;
-                  color: #f9b43a
-              }
-
-              .user-details span {
-                  text-align: left
-              }
-
-              .inputs label {
-                  display: flex;
-                  margin-left: 3px;
-                  font-weight: 500;
-                  font-size: 13px;
-                  margin-bottom: 4px
-              }
-
-              .inputs input {
-                  font-size: 14px;
-                  height: 40px;
-                  border: 2px solid #ced4da
-              }
-
-              .inputs input:focus {
-                  box-shadow: none;
-                  border: 2px solid #506BEE
-              }
-
-              .about-inputs label {
-                  display: flex;
-                  margin-left: 3px;
-                  font-weight: 500;
-                  font-size: 13px;
-                  margin-bottom: 4px
-              }
-
-              .about-inputs textarea {
-                  font-size: 14px;
-                  height: 100px;
-                  border: 2px solid #ced4da;
-                  resize: none
-              }
-
-              .about-inputs textarea:focus {
-                  box-shadow: none
-              }
-
-              .btn {
-                  font-weight: 600
-              }
-
-              .btn:focus {
-                  box-shadow: none
-              }
-
-              select {
-                  display: block;
-                  width: 100%;
-                  border: 1px solid #ddd;
-                  border-radius: 10px;
-                  height: 40px;
-                  padding: 5px 10px
-              }
-
-              select:focus {
-                  outline: none
-              }
-
-              .add-experience:hover {
-                  background: #506BEE;
-                  color: #fff;
-                  cursor: pointer;
-                  border: solid 1px #506BEE
-              }
-    </style>
-
-
+    <title>Curriculum</title>
+    <link href="../css/formPostulanteStyle.css" rel="stylesheet" type="text/css"/>
   </head>
 
   <body class="container">
@@ -232,8 +117,8 @@
                                   </div>
                               
                         
-                                  <div class="inputs col-md-6"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
-                                    <select name="nivelIngles" id="nivelIngles" class="bg-light">
+                                  <div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label> 
+                                    <select name="nivelIngles" id="nivelIngles" class="content-select">
                                     <option value="1" selected>Ingles muy basico</option>
                                     <option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
                                     <option value="3" >Puedo leer tranquilamente</option>
@@ -242,41 +127,41 @@
                                     </select> 
                                   </div>
                                 
-                                  <div class="inputs mb-3 col-md-6"> 
+                                  <div class="inputs mb-3 col-md-4"> 
                                     <label for="disponibilidad" class="form-label"> Disponibilidad</label> 
-                                    <select name="disponibilidad" id="disponibilidad" class="bg-light">
+                                    <select name="disponibilidad" id="disponibilidad" class="content-select">
                                       <c:forEach items="${disponibilidades}" var="disponibilidad">
                                         <option value="${disponibilidad.getCode()}">${disponibilidad.getDescripcion()}</option>
                                       </c:forEach>
                                     
                                   </select> </div>
                                 
-                                  <div class="inputs mb-3 col-md-6"> 
+                                  <div class="inputs mb-3 col-md-4"> 
                                     <label for="estadoCivil" class="form-label"> Estado Civil</label> 
-                                    <select name="estadoCivil" id="estadoCivil" class="bg-light">
+                                    <select name="estadoCivil" id="estadoCivil" class="content-select">
                                       <c:forEach items="${estadosCiviles}" var="estadoCivil">
                                         <option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option>
                                       </c:forEach>
                                     
                         
                                   </select> </div>
-                                  <div class="inputs p-3 py-5">
-                                    <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#cargoForm"><i class="fa fa-plus"></i>&nbsp;Cargo al que postulas</span></div><br>   
+                                  <div >
+                                    <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#cargoForm"><i  class="fa fa-plus"></i>&nbsp;Cargo al que postulas</span></div><br>   
                                   </div>
 
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="cargos">
                                   </div>
 
-                                  <div class="inputs p-3 py-5">
-                                    <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></div><br>   
+                                  <div >
+                                    <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></div><br>   
                                   </div>
 
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="experiencias">
                                   </div>
                                     
                                
-                                  <div class="inputs p-3 py-5">
-                                   <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></div><br>   
+                                  <div >
+                                   <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></div><br>   
                                   </div>
                                  
                                   <div class="mt-3 gap-2 d-flex justify-content-between" id="estudios">
@@ -284,16 +169,16 @@
                             
                                
                                
-                                <div class="inputs p-3 py-5">
-                                  <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br>   
+                                <div >
+                                  <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br>   
                                 </div>
                                 
                                 
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias"> 
                                 </div>
 
-                                <div class="inputs p-3 py-5">
-                                  <div class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Referencias Personales</span></div><br>   
+                                <div >
+                                  <div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience"  data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Referencias Personales</span></div><br>   
                                 </div>
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="referencia"> 
                                 </div>

curriculumsearch/src/main/webapp/jsp/postulantes.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-    <title>Lista de postulantes</title>
-</head>
-<body>
-  <jsp:include page="header.jsp"/>
-  <jsp:include page="alerts.jsp"/>
-  <div class="container-xxl my-md-4 bd-layout">
-    <h2>Lista de Postulantes</h2>
-    <div id="buscador">
-       <form name="buscador">
-         <label for="nombre">Nombre</label>
-        <input type="text" name="nombre" id="nombre" value="${param.nombre}">
-        <button>Buscar</button>
-        <br>
-          <label for="estado">Estado</label>
-          <select name="estado" id="estado">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach items="${estadoP}" var="estados">
-              <option value="${estados}" ${param.estado == estados ? "selected" : ""}>${estados.getEstado()}</option>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
+      <h2>Lista de Postulantes</h2>
+      <div id="buscador">
+        <form name="buscador">
+          <label for="nombre">Nombre</label>
+         <input type="text" name="nombre" id="nombre" value="${param.nombre}">
+         <button>Buscar</button>
+         <br>
+           <label for="estado">Estado</label>
+           <select name="estado" id="estado">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach items="${estadoP}" var="estados">
+               <option value="${estados}" ${param.estado == estados ? "selected" : ""}>${estados.getEstado()}</option>
+             </c:forEach>
+           </select>
+           <label for="dispo">Disponbilidad</label>
+           <select name="dispo" id="dispo">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach items="${disponibilidades}" var="disponibilidad">
+               <option value="${disponibilidad}" ${param.dispo == disponibilidad ? "selected" : ""}>${disponibilidad.getDescripcion()}</option>
+             </c:forEach>
+           </select>
+           <label for="tecId">Tecnologias</label>
+           <select name="tecId" id="tecId">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach items="${tecnologias}" var="tecnologia">
+               <option value="${tecnologia.id}" ${param.tecId == tecnologia.id ? "selected" : ""}>${tecnologia.nombre}</option>
+             </c:forEach>
+           </select>
+           <label for="instId">Institucion Educativa</label>
+           <select name="instId" id="instId">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach items="${institucionesEducativas}" var="inst">
+               <option value="${inst.id}" ${param.instId == inst.id ? "selected" : ""}>${inst.nombre}</option>
+             </c:forEach>
+           </select>
+           <br>
+           <br>
+           <label for="lvlEng">Nivel de Ingles</label>
+           <select name="lvlEng" id="lvlEng">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach var = "lvl" begin = "1" end = "5">
+               <option value="${lvl}" ${param.lvlEng == lvl ? "selected" : ""}>${lvl}</option>
+             </c:forEach>
+           </select>
+           <label for="lvlTec">Nivel de Tecnologia</label>
+           <select name="lvlTec" id="lvlTec">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach var = "lvl" begin = "1" end = "5">
+               <option value="${lvl}" ${param.lvlTec == lvl ? "selected" : ""}>${lvl}</option>
+             </c:forEach>
+           </select>
+           <label for="expInMonths">Experiencia en general</label>
+           <select name="expInMonths" id="expInMonths">
+             <option value="">Seleccione una opcion</option>
+             <option value="6">Mayor a 6 meses</option>
+             <option value="12">Mayor a 1 año</option>
+             <option value="36">Mayor a 3 años</option>
+             <option value="60">Mayor a 5 años</option>
+           </select>
+          <label for="convId">convocatoria</label>
+           <select name="convId" id="convId">
+             <option value="">Seleccione una opcion</option>
+             <c:forEach items="${convocatoriaC}" var="convo">
+               <option value="${convo.id}" ${param.convId == convo.id ? "selected" : ""}>${convo.getCargo().getNombre()}</option>
+             </c:forEach>
+           </select>
+        </form>
+      </div>
+      <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Nombre</th>
+              <th scope="col">Disponibilidad</th>
+              <th scope="col">Nivel de Ingles</th>
+              <th scope="col">Experiencia</th>
+              <th scope="col">Tecnologias</th>
+              <th scope="col">Estado</th>
+            </tr>
+          </thead>
+          <tbody>
+              <c:forEach items="${postulantes}" var="postulante" varStatus="staPost">
+                  <tr>
+                      <th scope="row">${staPost.index + 1}</th>
+                      <td>${postulante.nombre} ${postulante.apellido}</td>
+                      <td>${postulante.disponibilidad.getDescripcion()}</td>
+                      <td>${postulante.nivelIngles}</td>
+                      <td>${postulante.experienciaMeses}<op></td>
+                      <td>
+                          <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia" varStatus="staTec">
+                              ${detalle_tecnologia.getTecnologia().getNombre()}${not staTec.last ? "," : ""}
+                          </c:forEach>
+                      </td>
+                      <td>${postulante.estado.getEstado()}</td>
+                      <td><a href="/postulante/${postulante.id}">Ver</a></td>
+                  </tr>
+              </c:forEach>
+            </tbody>
+  
+      </table>
+      <div>
+        <nav aria-label="Page navigation example">
+          <ul class="pagination">
+            <c:forEach begin="1" end="${pages}" var="nro">
+              <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
             </c:forEach>
-          </select>
-          <label for="dispo">Disponbilidad</label>
-          <select name="dispo" id="dispo">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach items="${disponibilidades}" var="disponibilidad">
-              <option value="${disponibilidad}" ${param.dispo == disponibilidad ? "selected" : ""}>${disponibilidad.getDescripcion()}</option>
-            </c:forEach>
-          </select>
-          <label for="tecId">Tecnologias</label>
-          <select name="tecId" id="tecId">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach items="${tecnologias}" var="tecnologia">
-              <option value="${tecnologia.id}" ${param.tecId == tecnologia.id ? "selected" : ""}>${tecnologia.nombre}</option>
-            </c:forEach>
-          </select>
-          <label for="instId">Institucion Educativa</label>
-          <select name="instId" id="instId">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach items="${institucionesEducativas}" var="inst">
-              <option value="${inst.id}" ${param.instId == inst.id ? "selected" : ""}>${inst.nombre}</option>
-            </c:forEach>
-          </select>
-          <br>
-          <label for="lvlEng">Nivel de Ingles</label>
-          <select name="lvlEng" id="lvlEng">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach var = "lvl" begin = "1" end = "5">
-              <option value="${lvl}" ${param.lvlEng == lvl ? "selected" : ""}>${lvl}</option>
-            </c:forEach>
-          </select>
-          <label for="lvlTec">Nivel de Tecnologia</label>
-          <select name="lvlTec" id="lvlTec">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach var = "lvl" begin = "1" end = "5">
-              <option value="${lvl}" ${param.lvlTec == lvl ? "selected" : ""}>${lvl}</option>
-            </c:forEach>
-          </select>
-          <label for="expInMonths">Experiencia en general</label>
-          <select name="expInMonths" id="expInMonths">
-            <option value="">Seleccione una opcion</option>
-            <option value="6">Mayor a 6 meses</option>
-            <option value="12">Mayor a 1 año</option>
-            <option value="36">Mayor a 3 años</option>
-            <option value="60">Mayor a 5 años</option>
-          </select>
-         <label for="convId">convocatoria</label>
-          <select name="convId" id="convId">
-            <option value="">Seleccione una opcion</option>
-            <c:forEach items="${convocatoriaC}" var="convo">
-              <option value="${convo.id}" ${param.convId == convo.id ? "selected" : ""}>${convo.getCargo().getNombre()}</option>
-            </c:forEach>
-          </select>
+          </ul>
+        </nav>
+      </div>
+    </layout:put>
+    <layout:put block="scripts" type="APPEND">
+      <script>
+        function habilitarLvlTec(){
+          //si se selecciono una tecnologia entonces permitir seleccionar un nivel
+          lvlTec.disabled = tecId.value == false
+          if(lvlTec.disabled){
+            lvlTec.firstElementChild.selected=true;
+          }
           
-       </form>
-    </div>
-    <table class="table">
-        <thead>
-          <tr>
-            <th scope="col">#</th>
-            <th scope="col">Nombre</th>
-            <th scope="col">Disponibilidad</th>
-            <th scope="col">Nivel de Ingles</th>
-            <th scope="col">Experiencia</th>
-            <th scope="col">Tecnologias</th>
-            <th scope="col">Estado</th>
-          </tr>
-        </thead>
-        <tbody>
-            <c:forEach items="${postulantes}" var="postulante" varStatus="staPost">
-                <tr>
-                    <th scope="row">${staPost.index + 1}</th>
-                    <td>${postulante.nombre} ${postulante.apellido}</td>
-                    <td>${postulante.disponibilidad.getDescripcion()}</td>
-                    <td>${postulante.nivelIngles}</td>
-                    <td>${postulante.experienciaMeses}<op></td>
-                    <td>
-                        <c:forEach items="${postulante.tecnologias}" var="detalle_tecnologia" varStatus="staTec">
-                            ${detalle_tecnologia.getTecnologia().getNombre()}${not staTec.last ? "," : ""}
-                        </c:forEach>
-                    </td>
-                    <td>${postulante.estado.getEstado()}</td>
-                    <td><a href="/postulante/${postulante.id}">Ver</a></td>
-                </tr>
-            </c:forEach>
-          </tbody>
-
-    </table>
-    <div>
-      <nav aria-label="Page navigation example">
-        <ul class="pagination">
-          <c:forEach begin="1" end="${pages}" var="nro">
-            <li class="page-item ${(param.nroPagina == null and nro == 1)  or param.nroPagina == nro-1 ? 'active' : ''}"><a class="page-link" href="javascript:buscarPagina(${nro})">${nro}</a></li>
-          </c:forEach>
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <script>
-    function habilitarLvlTec(){
-      //si se selecciono una tecnologia entonces permitir seleccionar un nivel
-      lvlTec.disabled = tecId.value == false
-      if(lvlTec.disabled){
-        lvlTec.firstElementChild.selected=true;
-      }
-      
-    }
-    function buscarPagina(nro){
-      nro--
-      const aBuscar = 'nroPagina='+nro
-      if(!location.search) location.search = "?"+aBuscar
-      const inicial = location.search.search(aBuscar);
-      if(inicial==-1){//si no se encuentra y hay otros queries
-        location.search = "&"+aBuscar
-      }
-      location.search.replace('nroPagina=',aBuscar)
-    }
-    const tecId = document.querySelector("#tecId");
-    const lvlTec = document.querySelector("#lvlTec");
-    tecId.addEventListener('change',habilitarLvlTec);
-    habilitarLvlTec()
-  </script>
-    
-</body>
-</html>
\ No newline at end of file
+        }
+        function buscarPagina(nro){
+          nro--
+          const aBuscar = 'nroPagina='+nro
+          if(!location.search) location.search = "?"+aBuscar
+          const inicial = location.search.search(aBuscar);
+          if(inicial==-1){//si no se encuentra y hay otros queries
+            location.search = "&"+aBuscar
+          }
+          location.search.replace('nroPagina=',aBuscar)
+        }
+        const tecId = document.querySelector("#tecId");
+        const lvlTec = document.querySelector("#lvlTec");
+        tecId.addEventListener('change',habilitarLvlTec);
+        habilitarLvlTec()
+      </script>
+    </layout:put>
+</layout:extends>

curriculumsearch/src/main/webapp/jsp/reset_password_form.jsp

+<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>Forgot Password</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous">
+
+</head>
+<body>
+<jsp:include page="alerts.jsp"/>
+<div>
+    <h2>Reset Your Password</h2>
+</div>
+
+<form:form action="/reset-password" method="post" style="max-width: 350px; margin: 0 auto;">
+    <input type="hidden" name="token" value="${token}" />
+    <div class="border border-secondary rounded p-3">
+        <div>
+            <p>
+                <input type="password" name="password" id="password" class="form-control"
+                       placeholder="Enter your new password" required autofocus />
+            </p>
+            <p class="text-center">
+                <input type="submit" value="Change Password" class="btn btn-primary" />
+            </p>
+        </div>
+    </div>
+</form:form>
+</body>
+</html>
+
+

curriculumsearch/src/main/webapp/jsp/tecnologia-form.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-    <title>Agregar Tecnologia</title>
-
-
-</head>
-<body>
-    <jsp:include page="header.jsp"/>
-    <jsp:include page="alerts.jsp"/>
-    <div class="container-xxl my-md-4 bd-layout">
-        <h2>Agregar Tecnologia</h2>
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
+        <h2>${tecnologia.id == null ? "Agregar" : "Modificar"} Tecnologia</h2>
         <div class="p-3 mb-2 bg-light text-dark border border-light">
 
             <form:form action="/tecnologia/${tecnologia.id == null ? '' : tecnologia.id}"  method="post" modelAttribute="tecnologia" class="row row-cols-lg-auto g-3 align-items-center">
             <div class="col-12">
-                <form:label class="form-label visually-hidden"  path="nombre">Nombre: </form:label> <form:input type="text" path="nombre" class="form-control" required="true" placeholder="Nombre de la tecnologia"/>
+                <form:label class="form-label visually-hidden"  path="nombre">Nombre: </form:label> 
+                <form:input type="text" path="nombre" class="form-control ${ mismoNombre ? 'is-invalid' : ''}" required="true" placeholder="Nombre de la tecnologia"/>
+                <div id="validationServerUsernameFeedback" class="invalid-feedback">
+                    Este nombre ya existe
+                  </div>
             </div>
             <div class="col-12">
                 <input type="submit" value="Guardar" class="btn btn-primary"/>
             </div>
             </form:form>
         </div>
-    </div>
-
-
-
-
-
-</body>
-
-
-
-</html>
\ No newline at end of file
+    </layout:put>
+</layout:extends>
\ No newline at end of file

curriculumsearch/src/main/webapp/jsp/tecnologias.jsp

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tecnologia</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-</head>
-<body>
-    <jsp:include page="header.jsp"/>
-    <jsp:include page="alerts.jsp"/>
-    <div class="container-xxl my-md-4 bd-layout">
+<%@ taglib uri="http://kwonnam.pe.kr/jsp/template-inheritance" prefix="layout"%>
+<layout:extends name="layouts/base.jsp">
+    <layout:put block="cssDeclaracion" type="APPEND"></layout:put>
+    <layout:put block="contents" type="REPLACE">
         <h2>Lista de Tecnologias</h2>
 
         <div>
@@ -49,7 +39,5 @@
                 </tbody>
               </table>
         </div>
-    </div>
-    
-</body>
-</html>
\ No newline at end of file
+    </layout:put>
+</layout:extends>

curriculumsearch/webapp/css/styles.min.css

+body{
+    background-image:url(/img/FondoRoshka.jpg?h=4dba38685316d6e65f6e24d740c4c6b5);
+    background-size:cover;
+    background-repeat:no-repeat;
+    height:auto;width:auto}
+/* #form{max-width:333px;
+    width:90%;position:relative;
+    left:50%;
+    top:10%;padding:40px;
+    border-radius:4px;
+    transform:translate(-50%,10%);
+    color:#fff;
+    box-shadow:3px 3px 4px rgba(0,0,0,.2)}
+#head{text-align:center}
+#image{margin:auto;width:50%;
+    padding:10px;max-height:175px;
+    max-width:175px}
+#linkas{display:block;
+    text-align:center;
+    font-size:12px;
+    opacity:.9;
+    text-decoration:none}
+#butonas{background:#70b2d0;
+    outline:0;
+    text-shadow:initial}
+#formum,#formum2{background:0 0;
+    border:none;
+    border-bottom:1px solid #434a52;
+    border-radius:0;
+    box-shadow:none;
+    outline:0;
+    color:inherit} */
\ No newline at end of file