diff --git a/resources/js/reset_password/reset_password.module.scss b/resources/js/reset_password/reset_password.module.scss index 0dce2766..829c44f5 100644 --- a/resources/js/reset_password/reset_password.module.scss +++ b/resources/js/reset_password/reset_password.module.scss @@ -1,22 +1,7 @@ @import "../../styles/global.scss"; +@import "../../styles/auth.scss"; .main_container { - margin-top: 5%; - margin-bottom: 10%; - max-width: 544px !important; - - a { - color: $base-color-dark; - } - - .title_container { - .app_logo { - display: flex; - max-width: 40%; - margin: auto; - padding-bottom: 40px; - } - } .reset_password_container { border: solid 1px $border-color; @@ -28,8 +13,6 @@ } .turnstile { - margin-top: 10px; - margin-bottom: 10px; text-align: center; } @@ -39,39 +22,6 @@ background-color: $base-color-dark; } - .password_hint { - color: $hint-text-color; - background-color: #fafafa; - margin: 8px 8px; - } - - .password_hint p:first-of-type { - margin: 0 0 8px; - } - - .password_hint ul { - list-style: none; - margin-top: 8px; - padding-left: 10px; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4px 12px; - } - - .password_hint ul li { - display: flex; - align-items: center; - gap: 60px; - } - - .password_characters { - font-size: 0.85em; - } - - .password_characters span { - letter-spacing: 0.5em; - } - .error_label { color: #f44336; font-size: 0.75rem; @@ -80,18 +30,6 @@ } - .sr_only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip-path: inset(50%); - white-space: nowrap; - border: 0; - } - .help_link { margin: 1.5rem 0 0; text-align: center; diff --git a/resources/js/signup/signup.js b/resources/js/signup/signup.js index 1d595e2a..938c6f3c 100644 --- a/resources/js/signup/signup.js +++ b/resources/js/signup/signup.js @@ -8,13 +8,19 @@ import CardContent from "@material-ui/core/CardContent"; import Container from "@material-ui/core/Container"; import CssBaseline from "@material-ui/core/CssBaseline"; import Checkbox from "@material-ui/core/Checkbox"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; import Grid from "@material-ui/core/Grid"; -import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined"; -import MenuItem from "@material-ui/core/MenuItem"; +import IconButton from "@material-ui/core/IconButton"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import Visibility from "@material-ui/icons/Visibility"; +import VisibilityOff from "@material-ui/icons/VisibilityOff"; +import CheckCircle from "@material-ui/icons/CheckCircle"; +import Cancel from "@material-ui/icons/Cancel"; +import RadioButtonUnchecked from "@material-ui/icons/RadioButtonUnchecked"; import PasswordStrengthBar from "react-password-strength-bar"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; -import Select from "@material-ui/core/Select"; +import Autocomplete from "@material-ui/lab/Autocomplete"; import Swal from "sweetalert2"; import {MuiThemeProvider, createTheme} from "@material-ui/core/styles"; import {useFormik} from "formik"; @@ -44,6 +50,7 @@ const SignUpPage = ({ const formEl = useRef(null); const captcha = useRef(null); const [captchaConfirmation, setCaptchaConfirmation] = useState(null); + const [showPassword, setShowPassword] = useState(false); useEffect(() => { if (signUpError) { @@ -99,6 +106,8 @@ const SignUpPage = ({ } }; + const passwordRequirementItems = passwordPolicy.shape_list.split(",").map(s => s.trim()); + return ( @@ -117,25 +126,25 @@ const SignUpPage = ({ > + + + - - {formik.touched.country_iso_code && - formik.errors.country_iso_code && ( -
- {formik.errors.country_iso_code} -
+ options={countries} + getOptionLabel={(option) => option.text || ""} + getOptionSelected={(option, value) => option.value === value.value} + value={countries.find(c => c.value === formik.values.country_iso_code) || null} + onChange={(_, selected) => { + formik.setFieldValue("country_iso_code", selected ? selected.value : ""); + }} + onBlur={() => formik.setFieldTouched("country_iso_code", true)} + renderInput={(params) => ( + )} + /> + + + setShowPassword(!showPassword)} + edge="end" + size="small" + aria-label={showPassword ? "Hide password" : "Show password"} + > + {showPassword ? : } + + + ) + }} /> {formik.values.password && ( + + {!formik.values.password_confirmation + ? + : formik.values.password_confirmation === formik.values.password && formik.values.password + ? + : + } + + {!formik.values.password_confirmation + ? "" + : formik.values.password_confirmation === formik.values.password && formik.values.password + ? "Passwords match" + : "Passwords do not match" + } + + + ) + }} /> - -   - -
- +

Your password must include:

+
    +
  • {passwordPolicy.min_length}–{passwordPolicy.max_length} characters
    • + {passwordRequirementItems.map((item, index) => ( +
  • {item}
    • + ))} +
+

Allowed: {passwordPolicy.allowed_special_characters_text}

@@ -292,19 +329,25 @@ const SignUpPage = ({ {codeOfConductUrl && ( - + } + label={ + + I agree to the  + + {tenantName} Community Code of Conduct + + + } /> -

- I agree to the  - - {tenantName} Community Code of Conduct -  ? -

{formik.errors.agree_code_of_conduct}
@@ -318,8 +361,13 @@ const SignUpPage = ({ disableElevation fullWidth type="submit" + disabled={ + !!formik.errors.password || + !formik.values.password_confirmation || + formik.values.password_confirmation !== formik.values.password + } > - Register Now + Create FNid @@ -346,7 +394,7 @@ const SignUpPage = ({
- Already have an account?{" "} + Already have an FNid?{" "} Sign in diff --git a/resources/js/signup/signup.module.scss b/resources/js/signup/signup.module.scss index 09c03c5d..17863eb9 100644 --- a/resources/js/signup/signup.module.scss +++ b/resources/js/signup/signup.module.scss @@ -1,51 +1,29 @@ @import "../../styles/global.scss"; +@import "../../styles/auth.scss"; .main_container { - margin-top: 5%; - margin-bottom: 10%; - max-width: 544px !important; - a { - color: $base-color-dark; - } - - .title_container { - .app_logo { - display: flex; - max-width: 40%; - margin: auto; - padding-bottom: 40px; - } + .field_label { + display: block; + font-size: 0.85rem; + margin-bottom: 4px; + color: $text-color-dark; } .signup_container { border: solid 1px $border-color; color: $text-color-dark; background-color: white; + padding: 16px; .turnstile { - margin-top: 10px; - margin-bottom: 10px; text-align: center; } .button { width: 380px; color: white; - background-color: $base-color-dark; - } - - .password_hint { - display: flex; - color: $hint-text-color; - vertical-align: middle; - } - - .countries { - height: 40px !important; - &_empty_text { - color: $hint-text-color; - } + background-color: black; } .error_label { diff --git a/resources/styles/auth.scss b/resources/styles/auth.scss new file mode 100644 index 00000000..3202c93a --- /dev/null +++ b/resources/styles/auth.scss @@ -0,0 +1,67 @@ +@import "global.scss"; + +.main_container { + margin-top: 5%; + margin-bottom: 10%; + max-width: 544px !important; + font-weight: 500; + + a { + color: $base-color-dark; + } + + .title_container { + .app_logo { + display: flex; + max-width: 40%; + margin: auto; + padding-bottom: 40px; + } + } + + .sr_only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border: 0; + } + + .password_hint { + color: $hint-text-color; + background-color: #fafafa; + margin: 8px 8px; + } + + .password_hint p:first-of-type { + margin: 0 0 8px; + } + + .password_hint ul { + list-style: none; + margin-top: 8px; + padding-left: 10px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px 12px; + } + + .password_hint ul li { + display: flex; + align-items: center; + gap: 60px; + } + + .password_characters { + font-size: 0.85em; + } + + .password_characters span { + letter-spacing: 0.5em; + } + +} \ No newline at end of file diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 96f22ccc..946a50f4 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -28,7 +28,9 @@ max_length: {{ Config::get("auth.password_max_length") }}, shape_pattern: '{{ Config::get("auth.password_shape_pattern") }}', allowed_special_characters: '{{ Config::get("auth.password_allowed_special_characters") }}', - shape_warning: '{{ Config::get("auth.password_shape_warning") }}' + allowed_special_characters_text: {{ Illuminate\Support\Js::from(Config::get("auth.password_allowed_special_characters_text")) }}, + shape_warning: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_warning")) }}, + shape_list: {{ Illuminate\Support\Js::from(Config::get("auth.password_shape_list")) }} } @if ($errors->any()) @foreach($errors->all() as $error) diff --git a/start_local_server.sh b/start_local_server.sh index 0535f4b8..4255ad47 100755 --- a/start_local_server.sh +++ b/start_local_server.sh @@ -5,7 +5,7 @@ export DOCKER_SCAN_SUGGEST=false docker compose run --rm app composer install docker compose run --rm app php artisan doctrine:migrations:migrate --no-interaction docker compose run --rm app php artisan db:seed --force -docker compose run --rm app php artisan idp:create-super-admin test@test.com 1Qaz2wsx! +docker compose run --rm app php artisan idp:create-super-admin test@test.com '1Qaz2wsx!9' docker compose run --rm app yarn install docker compose run --rm app yarn build docker compose up -d