diff --git a/frontend/src/components/MovieLoginRequired.jsx b/frontend/src/components/MovieLoginRequired.jsx index 07e6b00..75e96e2 100644 --- a/frontend/src/components/MovieLoginRequired.jsx +++ b/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 }) {
-

- Log in to watch this movie. -

+ +

+ Log in to watch this movie. +

+
diff --git a/frontend/src/pages/Inscription.jsx b/frontend/src/pages/Inscription.jsx index 06111fd..1b7dd17 100644 --- a/frontend/src/pages/Inscription.jsx +++ b/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() {
+ {user.password && user.password.length < 8 && (

8 characters at least

)}
+
diff --git a/frontend/src/sass/_inscription.scss b/frontend/src/sass/_inscription.scss index cd0b08f..f692526 100644 --- a/frontend/src/sass/_inscription.scss +++ b/frontend/src/sass/_inscription.scss @@ -41,6 +41,20 @@ 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; @@ -48,11 +62,7 @@ h3 { 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); diff --git a/frontend/src/sass/_movie.scss b/frontend/src/sass/_movie.scss index 84e14be..2d302e8 100644 --- a/frontend/src/sass/_movie.scss +++ b/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);