sass_finition

frontend/src/components/MovieLoginRequired.jsx

@@ -1,4 +1,4 @@
-import { useParams } from "react-router-dom";
+import { NavLink, useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import CommentsSection from "./CommentsSection";
 
@@ -51,9 +51,11 @@ function MovieLoginRequired({ movie }) {
         </div>
         <div className="upper-layer">
           <div className="registration-invitation-container">
-            <p className="registration-invitation">
-              Log in to watch this movie.
-            </p>
+            <NavLink to="/connection" className="login-link">
+              <p className="registration-invitation">
+                Log in to watch this movie.
+              </p>
+            </NavLink>
           </div>
         </div>
       </div>

frontend/src/pages/Inscription.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
+import { Eye, EyeOff } from "react-feather";
 import { useNavigate } from "react-router-dom";
 import LogoContainer from "../components/LogoContainer";
 import { useUser } from "../contexts/UserContext";
@@ -21,6 +22,8 @@ function Inscription() {
   const [showModal, setShowModal] = useState(false);
   const [avatars, setAvatars] = useState([]);
   const [selectedAvatar, setSelectedAvatar] = useState(null);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   const navigate = useNavigate();
   const toggleModal = () => {
@@ -186,7 +189,7 @@ function Inscription() {
               </div>
               <div className="inputContainer">
                 <input
-                  type="password"
+                  type={showPassword ? "text" : "password"}
                   name="password"
                   className={`input ${
                     user.password && user.password.length < 8
@@ -198,13 +201,19 @@ function Inscription() {
                   onChange={handleInputChange}
                   placeholder="Password"
                 />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? <EyeOff /> : <Eye />}
+                </button>
                 {user.password && user.password.length < 8 && (
                   <p className="errorMessage">8 characters at least</p>
                 )}
               </div>
               <div className="inputContainer">
                 <input
-                  type="password"
+                  type={showConfirmPassword ? "text" : "password"}
                   className={`input ${
                     confirmPassword && user.password !== confirmPassword
                       ? "errorPassword"
@@ -214,6 +223,12 @@ function Inscription() {
                   onChange={handleConfirmPasswordChange}
                   placeholder="Password Confirmation"
                 />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? <EyeOff /> : <Eye />}
+                </button>
               </div>
             </div>
             <div className="additionalInformation">

frontend/src/sass/_inscription.scss

@@ -41,18 +41,28 @@ h3 {
             display: flex;
             max-width: 500px;
             position: relative;
+            background: rgba(238, 226, 226, 0.1);
+
+            border-radius: 6px;
+            overflow: hidden;
+            border-bottom: 1px #ff509a solid;
+            align-items: center;
+
+            button {
+              margin: 5px;
+              padding: 4px;
+              border: none;
+              border-radius: 4px;
+              outline: none;
+            }
 
             .input {
               width: 63vw;
               color: var(--text-field-background-color);
               border: none;
               height: 7vh;
               padding: 10px;
-              background: rgba(238, 226, 226, 0.1);
-              border-radius: 6px;
-              overflow: hidden;
-              border-bottom: 1px #ff509a solid;
-              align-items: center;
+              background: transparent;
               display: flex;
               &::placeholder {
                 color: var(--text-field-background-color);

frontend/src/sass/_movie.scss

@@ -33,7 +33,7 @@
         right: 0;
         bottom: 0;
 
-        .play-button-container {
+        X .play-button-container {
           width: clamp(
             calc(var(--movie-slide-min-width, 34px) * 1),
             var(--movie-slide-preferred-width, 10vw),
@@ -226,6 +226,10 @@
         width: 90%;
         margin: 0 auto;
 
+        .login-link {
+          text-decoration: none;
+        }
+
         .registration-invitation {
           font-size: calc(var(--font-size-constant) * 2);
           font-weight: var(--font-weight-semi-bold);