From 063564547f9066f3752ba102eb528f155d8c174b Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Wed, 26 Feb 2025 09:01:36 +0100 Subject: [PATCH 01/26] Set the endOfLine parameter for prettier to auto --- .prettierrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index 639c6972..8be254a5 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,5 +5,5 @@ "singleQuote": true, "trailingComma": "none", "jsxBracketSameLine": false, - "endOfLine": "lf" + "endOfLine": "auto" } From 8e64d189b44cde3dee4b9e2c42870c044d7741c7 Mon Sep 17 00:00:00 2001 From: Sander Rasmussen Date: Wed, 26 Feb 2025 10:52:41 +0100 Subject: [PATCH 02/26] added password input validation in register from --- src/components/form/textInput/index.js | 3 ++- src/pages/register/index.js | 20 ++++++++++++++------ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js index 39da3cae..db15aad0 100644 --- a/src/components/form/textInput/index.js +++ b/src/components/form/textInput/index.js @@ -1,6 +1,6 @@ import { useState } from 'react'; -const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => { +const TextInput = ({ value, onChange, pattern, name, label, icon, type = 'text' }) => { const [input, setInput] = useState(''); const [showpassword, setShowpassword] = useState(false); if (type === 'password') { @@ -11,6 +11,7 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => { type={type} name={name} value={value} + pattern={pattern.value} onChange={(e) => { onChange(e); setInput(e.target.value); diff --git a/src/pages/register/index.js b/src/pages/register/index.js index 5cc70e32..998cf0c0 100644 --- a/src/pages/register/index.js +++ b/src/pages/register/index.js @@ -9,6 +9,9 @@ const Register = () => { const { onRegister } = useAuth(); const [formData, setFormData] = useState({ email: '', password: '' }); + const Submit = () => { + console.log('submit'); + }; const onChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); @@ -24,7 +27,7 @@ const Register = () => { altButtonText="Log in" >
-
+ { name="password" label={'Password *'} type={'password'} + pattern={{ + value: '^(?=.*[A-Z])(?=.*\\d)(?=.*[!@#$%^&*])[A-Za-z\\d!@#$%^&*]{8,}$', + message: 'test' + }} + /> +
From aab5f5a64291e6ea8a9d621eb23861b18b042e60 Mon Sep 17 00:00:00 2001 From: Sander Rasmussen Date: Wed, 26 Feb 2025 12:25:59 +0100 Subject: [PATCH 03/26] added standard pattern to form --- src/components/form/textInput/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js index db15aad0..c6bbd1a9 100644 --- a/src/components/form/textInput/index.js +++ b/src/components/form/textInput/index.js @@ -1,7 +1,8 @@ import { useState } from 'react'; -const TextInput = ({ value, onChange, pattern, name, label, icon, type = 'text' }) => { +const TextInput = ({ value, onChange, pattern = '', name, label, icon, type = 'text' }) => { const [input, setInput] = useState(''); + // const [isValidInput, setIsValidInput] = useState(true); const [showpassword, setShowpassword] = useState(false); if (type === 'password') { return ( From 4c6b63d719e1592685e5a10e8f61fe144580eaad Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Wed, 26 Feb 2025 12:29:14 +0100 Subject: [PATCH 04/26] Testing some features --- src/components/form/textInput/index.js | 7 +++++- src/pages/register/index.js | 33 ++++++++++++++++++-------- src/styles/_form.css | 8 +++++++ 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js index 39da3cae..e6b769ba 100644 --- a/src/components/form/textInput/index.js +++ b/src/components/form/textInput/index.js @@ -1,14 +1,17 @@ import { useState } from 'react'; -const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => { +const TextInput = ({ value, onChange, name, label, icon, pattern, title, type = 'text' }) => { const [input, setInput] = useState(''); const [showpassword, setShowpassword] = useState(false); + if (type === 'password') { return (
{ @@ -34,12 +37,14 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => { {label && } {icon && {icon}} + {pattern.message}
); } diff --git a/src/pages/register/index.js b/src/pages/register/index.js index 5cc70e32..9c517326 100644 --- a/src/pages/register/index.js +++ b/src/pages/register/index.js @@ -1,14 +1,20 @@ import { useState } from 'react'; import Button from '../../components/button'; import TextInput from '../../components/form/textInput'; -import useAuth from '../../hooks/useAuth'; +// import useAuth from '../../hooks/useAuth'; import CredentialsCard from '../../components/credentials'; import './register.css'; const Register = () => { - const { onRegister } = useAuth(); + // const { onRegister } = useAuth(); const [formData, setFormData] = useState({ email: '', password: '' }); - + const onRegister = (email, password) => { + console.log('register'); + console.log(email); + }; + const submit = (e) => { + console.log('Submit'); + }; const onChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); @@ -24,27 +30,34 @@ const Register = () => { altButtonText="Log in" >
-
+ onChange(e)} type="email" name="email" label={'Email *'} + pattern={{ + value: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$', + message: 'Email in wrong format' + }} /> +
diff --git a/src/styles/_form.css b/src/styles/_form.css index 419cfb63..ef564e52 100644 --- a/src/styles/_form.css +++ b/src/styles/_form.css @@ -31,6 +31,14 @@ form label { padding-right: 10px; } +input:invalid ~ .input-error{ + display: block; +} + +.input-error{ + display: none; +} + .showpasswordbutton { position: absolute; bottom: 28px; From 794aa750e9af65fc4e3dd4dd3161dfc5f0ca8d4a Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Wed, 26 Feb 2025 16:15:36 +0100 Subject: [PATCH 05/26] Changed from regex to the same validation as the backend. The error messages are prop drilled to the textinput components. No requests are made in the registration unless we are certain that both the email and password contains the correct format. Also contains provides a message if the email is already in use. gg --- package-lock.json | 10 +++++ package.json | 1 + src/components/form/textInput/index.js | 20 ++++++--- src/context/auth.js | 12 ++++-- src/pages/login/index.js | 20 ++++++--- src/pages/register/index.js | 60 ++++++++++++++++---------- src/service/apiClient.js | 4 +- src/service/inputValidationService.js | 53 +++++++++++++++++++++++ src/styles/_form.css | 8 ++-- src/styles/_globals.css | 1 + 10 files changed, 145 insertions(+), 44 deletions(-) create mode 100644 src/service/inputValidationService.js diff --git a/package-lock.json b/package-lock.json index 6891fbef..4bbf17e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "react-modal": "^3.16.1", "react-router-dom": "^6.8.0", "react-scripts": "5.0.1", + "validator": "^13.12.0", "web-vitals": "^3.1.1" }, "devDependencies": { @@ -17116,6 +17117,15 @@ "node": ">=10.12.0" } }, + "node_modules/validator": { + "version": "13.12.0", + "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz", + "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==", + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 249b6b05..6045acce 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "react-modal": "^3.16.1", "react-router-dom": "^6.8.0", "react-scripts": "5.0.1", + "validator": "^13.12.0", "web-vitals": "^3.1.1" }, "scripts": { diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js index 76ab3aa1..c4cdf58e 100644 --- a/src/components/form/textInput/index.js +++ b/src/components/form/textInput/index.js @@ -1,6 +1,15 @@ import { useState } from 'react'; -const TextInput = ({ value, onChange, pattern = '', name, label, icon, type = 'text' }) => { +const TextInput = ({ + value, + onChange, + errorResponse = '', + name, + label, + icon, + require = false, + type = 'text' +}) => { const [input, setInput] = useState(''); // const [isValidInput, setIsValidInput] = useState(true); const [showpassword, setShowpassword] = useState(false); @@ -10,12 +19,10 @@ const TextInput = ({ value, onChange, pattern = '', name, label, icon, type = 't
{ onChange(e); setInput(e.target.value); @@ -31,6 +38,7 @@ const TextInput = ({ value, onChange, pattern = '', name, label, icon, type = 't > + {errorResponse && {errorResponse}}
); } else { @@ -39,14 +47,14 @@ const TextInput = ({ value, onChange, pattern = '', name, label, icon, type = 't {label && } {icon && {icon}} - {pattern.message} + {errorResponse && {errorResponse}} ); } diff --git a/src/context/auth.js b/src/context/auth.js index 47cd66c9..5f0bbdc9 100644 --- a/src/context/auth.js +++ b/src/context/auth.js @@ -29,13 +29,15 @@ const AuthProvider = ({ children }) => { const res = await login(email, password); if (!res.data.token) { - return navigate('/login'); + navigate('/login'); + return res; } localStorage.setItem('token', res.data.token); setToken(res.token); navigate(location.state?.from?.pathname || '/'); + return res; }; const handleLogout = () => { @@ -45,9 +47,13 @@ const AuthProvider = ({ children }) => { const handleRegister = async (email, password) => { const res = await register(email, password); - setToken(res.data.token); + if (res.status === 'success') { + const loginRes = await login(email, password); + setToken(loginRes.data.token); + navigate('/verification'); + } - navigate('/verification'); + return res; }; const handleCreateProfile = async (firstName, lastName, githubUrl, bio) => { diff --git a/src/pages/login/index.js b/src/pages/login/index.js index 08df7d5a..3bf36bc0 100644 --- a/src/pages/login/index.js +++ b/src/pages/login/index.js @@ -8,12 +8,22 @@ import './login.css'; const Login = () => { const { onLogin } = useAuth(); const [formData, setFormData] = useState({ email: '', password: '' }); + const [response, setResponse] = useState(''); const onChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; + const submit = async (e) => { + e.preventDefault(); + const data = await onLogin(formData.email, formData.password); + if (data.status === 'fail') { + setResponse(data.data.email); + console.log(data.data.email); + } + }; + return (
{ altButtonText="Sign up" >
-
+ { name="password" label={'Password *'} type={'password'} + errorResponse={response} /> + +
diff --git a/src/pages/register/index.js b/src/pages/register/index.js index ca8102af..0ecb70e7 100644 --- a/src/pages/register/index.js +++ b/src/pages/register/index.js @@ -1,20 +1,39 @@ import { useState } from 'react'; import Button from '../../components/button'; import TextInput from '../../components/form/textInput'; -// import useAuth from '../../hooks/useAuth'; +import useAuth from '../../hooks/useAuth'; import CredentialsCard from '../../components/credentials'; import './register.css'; +import { validEmail, validPassword } from '../../service/inputValidationService'; const Register = () => { - // const { onRegister } = useAuth(); + const { onRegister } = useAuth(); const [formData, setFormData] = useState({ email: '', password: '' }); - const onRegister = (email, password) => { - console.log('register'); - console.log(email); - }; - const submit = (e) => { - console.log('Submit'); + const [emailResponse, setEmailResponse] = useState(''); + const [passwordReponse, setPasswordResponse] = useState(''); + const submit = async (e) => { + e.preventDefault(); + setEmailResponse(''); + setPasswordResponse(''); + const emailValid = validEmail(formData.email); + const passwordValid = validPassword(formData.password); + if (!passwordValid.isValid) { + setPasswordResponse(passwordValid.message); // Set password error response + } + if (!emailValid.isValid) { + setEmailResponse(emailValid.message); // Set email error response + } + // Only request if email and password is valid + if (passwordValid.isValid && emailValid.isValid) { + const data = await onRegister(formData.email, formData.password); + console.log(data); + if (data.status === 'fail' && data.email !== null) { + console.log('email'); + setEmailResponse(data.data.email); + } + } }; + const onChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); @@ -32,34 +51,29 @@ const Register = () => {
onChange(e)} type="email" name="email" label={'Email *'} - pattern={{ - value: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$', - message: 'Email in wrong format' - }} + errorResponse={emailResponse} /> -
diff --git a/src/service/apiClient.js b/src/service/apiClient.js index 5f3cdbcf..575a7e96 100644 --- a/src/service/apiClient.js +++ b/src/service/apiClient.js @@ -5,8 +5,8 @@ async function login(email, password) { } async function register(email, password) { - await post('users', { email, password }, false); - return await login(email, password); + return post('users', { email, password }, false); + // return await login(email, password); } async function createProfile(userId, firstName, lastName, githubUrl, bio) { diff --git a/src/service/inputValidationService.js b/src/service/inputValidationService.js new file mode 100644 index 00000000..dd93e6f0 --- /dev/null +++ b/src/service/inputValidationService.js @@ -0,0 +1,53 @@ +import validator from 'validator'; + +export const validEmail = (email) => { + if (validator.isEmail(email)) { + return { + isValid: true, + message: '' + }; + } else { + return { + isValid: false, + message: 'Invalid email format' + }; + } +}; + +export const validPassword = (password) => { + if (password.length < 8) { + return { + isValid: false, + message: 'Password must be at least 8 characters long' + }; + } + if (!/[A-Za-z]/.test(password)) { + return { + isValid: false, + message: 'Password must contain at least one letter' + }; + } + if (!/[A-Z]/.test(password)) { + return { + isValid: false, + message: 'Password must contain at least one uppercase letter' + }; + } + if (!/\d/.test(password)) { + return { + isValid: false, + message: 'Password must contain at least one number' + }; + } + if (!/[@$!%*?&]/.test(password)) { + return { + isValid: false, + message: 'Password must contain at least one special character' + }; + } + + return { + isValid: true, + message: 'Success' + }; +}; diff --git a/src/styles/_form.css b/src/styles/_form.css index ef564e52..837ceb7c 100644 --- a/src/styles/_form.css +++ b/src/styles/_form.css @@ -31,12 +31,12 @@ form label { padding-right: 10px; } -input:invalid ~ .input-error{ - display: block; +.input-description{ + color: var(--color-blue2); } -.input-error{ - display: none; +.input-invalid { + color: var(--color-red) } .showpasswordbutton { diff --git a/src/styles/_globals.css b/src/styles/_globals.css index eb9772c6..6d4d1b3b 100644 --- a/src/styles/_globals.css +++ b/src/styles/_globals.css @@ -8,6 +8,7 @@ --color-green: #64dc78; --color-offwhite: #f0f5fa; --color-lightgrey: #f5f5f5; + --color-red: #F00000; } /* global settings here, resetting a lot of defaults */ From eccb001097ca96de1b4b5b6c738a798dd898f782 Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Thu, 27 Feb 2025 08:51:03 +0100 Subject: [PATCH 06/26] changed the email field in the register page to a text field, so that we only get one format of erorrmessage --- src/pages/register/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/register/index.js b/src/pages/register/index.js index 0ecb70e7..cc3f0284 100644 --- a/src/pages/register/index.js +++ b/src/pages/register/index.js @@ -54,7 +54,7 @@ const Register = () => { require={true} value={formData.email} onChange={(e) => onChange(e)} - type="email" + type="text" name="email" label={'Email *'} errorResponse={emailResponse} From b0b112419a3f2405c3e5b1724d833632f050e170 Mon Sep 17 00:00:00 2001 From: Martin Vu Date: Thu, 27 Feb 2025 13:11:49 +0100 Subject: [PATCH 07/26] Add ui for step 2 and 3 in create profile --- src/components/stepper/index.js | 2 +- src/pages/welcome/index.js | 14 +++++++++- src/pages/welcome/stepFour/index.js | 19 ++++++++++++++ src/pages/welcome/stepThree/index.js | 39 ++++++++++++++++++++++++++++ src/pages/welcome/stepTwo/index.js | 7 +++-- 5 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 src/pages/welcome/stepFour/index.js create mode 100644 src/pages/welcome/stepThree/index.js diff --git a/src/components/stepper/index.js b/src/components/stepper/index.js index c9e5f259..b66d7320 100644 --- a/src/components/stepper/index.js +++ b/src/components/stepper/index.js @@ -34,7 +34,7 @@ const Stepper = ({ header, children, onComplete }) => {
- } onComplete={onComplete}> - - + } + onComplete={onComplete} + inputIsValid={inputIsValid} + setInputIsValid={setInputIsValid} + > + + ); diff --git a/src/pages/welcome/stepOne/index.js b/src/pages/welcome/stepOne/index.js index 317940f8..e344a386 100644 --- a/src/pages/welcome/stepOne/index.js +++ b/src/pages/welcome/stepOne/index.js @@ -1,14 +1,38 @@ +import { useEffect, useState } from 'react'; import ProfileIcon from '../../../assets/icons/profileIcon'; import Form from '../../../components/form'; import TextInput from '../../../components/form/textInput'; +import { validFirstName, validLastName } from '../../../service/inputValidationService'; -const StepOne = ({ data, setData }) => { +const StepOne = ({ data, setData, inputIsValid, setInputIsValid }) => { + const [firstNameResponse, setFirstNameResponse] = useState(''); + const [lastNameResponse, setLastNameResponse] = useState(''); + + useEffect(() => { + if (data.firstName !== '' && data.lastName !== '') { + setInputIsValid(true); + } + if (data.lastName === '') { + setLastNameResponse(validLastName(data.lastName).message); + setInputIsValid(false); + } + if (data.lastName.length > 1) { + setLastNameResponse(''); + } + if (data.firstName === '') { + setFirstNameResponse(validFirstName(data.firstName).message); + setInputIsValid(false); + } + if (data.firstName.length > 1) { + setFirstNameResponse(''); + } + }, [data.firstName, data.lastName, inputIsValid, firstNameResponse, lastNameResponse]); return ( <>

Basic info

-
+ console.log('next')}>

Photo

@@ -19,13 +43,23 @@ const StepOne = ({ data, setData }) => {
+ - {
- +

*Required

diff --git a/src/service/inputValidationService.js b/src/service/inputValidationService.js index dd93e6f0..089ac7b3 100644 --- a/src/service/inputValidationService.js +++ b/src/service/inputValidationService.js @@ -51,3 +51,19 @@ export const validPassword = (password) => { message: 'Success' }; }; +export const validFirstName = (firstName) => { + if (firstName.length < 1) { + return { + isValid: false, + message: 'First name is required' + }; + } +}; +export const validLastName = (lastName) => { + if (lastName.length < 1) { + return { + isValid: false, + message: 'last name is required' + }; + } +}; From 46fb02e8f9f71fd12c9514346db2861ce3250555 Mon Sep 17 00:00:00 2001 From: Jostein Lind Aanby Date: Thu, 27 Feb 2025 13:55:14 +0100 Subject: [PATCH 10/26] update --- src/App.js | 2 +- src/pages/profile/index.js | 45 +++++++++++++++++++++++--------------- src/service/apiClient.js | 6 ++++- 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 94c72208..5b531ae9 100644 --- a/src/App.js +++ b/src/App.js @@ -33,7 +33,7 @@ const App = () => { path="profile/:id" element={ - + } /> diff --git a/src/pages/profile/index.js b/src/pages/profile/index.js index 65bc56cd..73e0f21c 100644 --- a/src/pages/profile/index.js +++ b/src/pages/profile/index.js @@ -1,13 +1,14 @@ import './profile.css'; import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import { getUser } from '../../service/apiClient'; +import { getUser, updateUser } from '../../service/apiClient'; import Form from '../../components/form'; import TextInput from '../../components/form/textInput'; const Profile = ({ readOnly }) => { const { id } = useParams(); const [user, setUser] = useState(null); + const [updatedUser, setUpdatedUser] = useState({}); const initials = user ? `${user.firstName[0]}${user.lastName[0]}` : ''; useEffect(() => { @@ -27,14 +28,22 @@ const Profile = ({ readOnly }) => { return
Loading...
; } - const submit = (e) => { + const submit = async (e) => { e.preventDefault(); - console.log('Submit'); + try { + await updateUser(id, updatedUser); + console.log('User updated successfully'); + } catch (error) { + console.error('Error updating user:', error); + } }; const onChange = (e) => { - e.preventDefault(); - console.log('Change'); + const { name, value } = e.target; + setUpdatedUser((prevUpdatedUser) => ({ + ...prevUpdatedUser, + [name]: value + })); }; return ( @@ -60,28 +69,28 @@ const Profile = ({ readOnly }) => {

{initials}

{

Contact Info

{

Bio

{

{user.role === 'STUDENT' ? 'Training Info' : 'Professional Info'}

{ {user.role === 'STUDENT' ? ( <> { ) : ( Date: Thu, 27 Feb 2025 14:07:47 +0100 Subject: [PATCH 11/26] completed merge with main --- src/pages/welcome/index.js | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/src/pages/welcome/index.js b/src/pages/welcome/index.js index 1819b7c1..c055442c 100644 --- a/src/pages/welcome/index.js +++ b/src/pages/welcome/index.js @@ -15,15 +15,7 @@ const Welcome = () => { firstName: '', lastName: '', githubUsername: '', - bio: '', - email: '', - mobile: '', - password: '', - role: '', - cohortId: '', - specialism: '', - startDate: '', - endDate: '' + bio: '' }); const onChange = (event) => { @@ -52,7 +44,6 @@ const Welcome = () => {

Create your profile to get started

-<<<<<<< HEAD } onComplete={onComplete} @@ -71,13 +62,8 @@ const Welcome = () => { setInputIsValid={setInputIsValid} setData={onChange} /> -======= - } onComplete={onComplete}> - - - - ->>>>>>> main + + ); From 63e8aab46027b44ad7af056b07c7e7c560f61e31 Mon Sep 17 00:00:00 2001 From: Sander Rasmussen Date: Thu, 27 Feb 2025 14:18:25 +0100 Subject: [PATCH 12/26] merged in uploadPhoto --- src/pages/welcome/stepOne/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/welcome/stepOne/index.js b/src/pages/welcome/stepOne/index.js index e344a386..fd3d3305 100644 --- a/src/pages/welcome/stepOne/index.js +++ b/src/pages/welcome/stepOne/index.js @@ -47,7 +47,7 @@ const StepOne = ({ data, setData, inputIsValid, setInputIsValid }) => { onChange={setData} value={data.firstName} name="firstName" - label={'First name'} + label={'First name*'} errorResponse={firstNameResponse} /> { onChange={setData} value={data.lastName} name="lastName" - label={'Last name'} + label={'Last name*'} errorResponse={lastNameResponse} /> Date: Thu, 27 Feb 2025 14:18:38 +0100 Subject: [PATCH 13/26] merged in uploadPhoto --- src/components/stepper/steps/steps.css | 2 +- src/components/uploadPhotoModal/index.js | 21 +++++++++++++++++++++ src/pages/welcome/stepOne/index.js | 15 ++++++++++++++- 3 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 src/components/uploadPhotoModal/index.js diff --git a/src/components/stepper/steps/steps.css b/src/components/stepper/steps/steps.css index 8a2d3582..ff670185 100644 --- a/src/components/stepper/steps/steps.css +++ b/src/components/stepper/steps/steps.css @@ -4,7 +4,7 @@ display: grid; grid-template-columns: 40px 40px 40px 40px; justify-content: space-between; - z-index: 1; + z-index: 0; border-top: 1px solid var(--color-blue5); border-bottom: 1px solid var(--color-blue5); margin-bottom: 20px; diff --git a/src/components/uploadPhotoModal/index.js b/src/components/uploadPhotoModal/index.js new file mode 100644 index 00000000..f28f0f0d --- /dev/null +++ b/src/components/uploadPhotoModal/index.js @@ -0,0 +1,21 @@ +import useModal from '../../hooks/useModal'; +import Button from '../button'; + +const UploadPhotoModal = () => { + const { closeModal } = useModal(); + const handleChooseFile = () => { + // todo add file add + }; + return ( + <> +
+

Choose a file to upload for your headshot.

+
+
+
+ + ); +}; +export default UploadPhotoModal; diff --git a/src/pages/welcome/stepOne/index.js b/src/pages/welcome/stepOne/index.js index fd3d3305..b36b30e4 100644 --- a/src/pages/welcome/stepOne/index.js +++ b/src/pages/welcome/stepOne/index.js @@ -3,11 +3,22 @@ import ProfileIcon from '../../../assets/icons/profileIcon'; import Form from '../../../components/form'; import TextInput from '../../../components/form/textInput'; import { validFirstName, validLastName } from '../../../service/inputValidationService'; +import useModal from '../../../hooks/useModal'; +import UploadPhotoModal from '../../../components/uploadPhotoModal'; const StepOne = ({ data, setData, inputIsValid, setInputIsValid }) => { const [firstNameResponse, setFirstNameResponse] = useState(''); const [lastNameResponse, setLastNameResponse] = useState(''); + const { openModal, setModal } = useModal(); + // Create a function to run on user interaction + const showModal = () => { + // Use setModal to set the header of the modal and the component the modal should render + setModal('Upload photo', ); // CreatePostModal is just a standard React component, nothing special + + // Open the modal! + openModal(); + }; useEffect(() => { if (data.firstName !== '' && data.lastName !== '') { setInputIsValid(true); @@ -37,7 +48,9 @@ const StepOne = ({ data, setData, inputIsValid, setInputIsValid }) => {

Photo

-

Add headshot

+

+ Add headshot +

Please upload a valid image file

From 0b47ef14c8df280d8d15653b57590e8fc711f4dc Mon Sep 17 00:00:00 2001 From: Sander Rasmussen Date: Thu, 27 Feb 2025 14:30:26 +0100 Subject: [PATCH 14/26] removed q file, and added missing profile fields --- q | 818 -------------------------------------------------------------- 1 file changed, 818 deletions(-) delete mode 100644 q diff --git a/q b/q deleted file mode 100644 index f4c9808b..00000000 --- a/q +++ /dev/null @@ -1,818 +0,0 @@ -commit 794aa750e9af65fc4e3dd4dd3161dfc5f0ca8d4a (HEAD -> UI-registration-validation, origin/UI-registration-validation) -Author: Erlend Skutlaberg -Date: Wed Feb 26 16:15:36 2025 +0100 - - Changed from regex to the same validation as the backend. The error messages are prop drilled to the textinput components. No requests are made in the registration unless we are certain that both the email and password contains the correct format. Also contains provides a message if the email is already in use. gg - -commit 17a49069a652bcdc804efeeb31c3087326b45999 -Merge: aab5f5a 4c6b63d -Author: Erlend Skutlaberg -Date: Wed Feb 26 12:35:55 2025 +0100 - - Merge branch 'test' into UI-registration-validation - -commit 4c6b63d719e1592685e5a10e8f61fe144580eaad (origin/test) -Author: Erlend Skutlaberg -Date: Wed Feb 26 12:29:14 2025 +0100 - - Testing some features - -commit aab5f5a64291e6ea8a9d621eb23861b18b042e60 -Author: Sander Rasmussen -Date: Wed Feb 26 12:25:59 2025 +0100 - - added standard pattern to form - -commit 8e64d189b44cde3dee4b9e2c42870c044d7741c7 -Author: Sander Rasmussen -Date: Wed Feb 26 10:52:41 2025 +0100 - - added password input validation in register from - -commit 5d64ac8425a8b0c5f16eec4d3d50cae2f8168c57 (origin/main, origin/HEAD, main) -Merge: ede5941 0635645 -Author: Sander Rasmussen <102761818+sanderrasmussen@users.noreply.github.com> -Date: Wed Feb 26 09:24:09 2025 +0100 - - Merge pull request #2 from boolean-uk/fixPrettier - - Set the endOfLine parameter for prettier to auto - -commit 063564547f9066f3752ba102eb528f155d8c174b (origin/fixPrettier) -Author: Erlend Skutlaberg -Date: Wed Feb 26 09:01:36 2025 +0100 - - Set the endOfLine parameter for prettier to auto - -commit ede5941b6442ee0f15559a6af71a6ccade176970 (origin/fix_prettier) -Author: Carlo M -Date: Fri Oct 25 07:53:18 2024 -0600 - - Update .prettierrc to use lf end of line - -commit 3e093e41fd42d0e7697055d21d23bdcea9a01fc3 -Author: Carlo M -Date: Tue Oct 22 06:39:23 2024 -0600 - - Added eslint and prettier configuration - -commit a6d96fb96b7ee8209d29a7d92ff6a03c7ef1c5b4 -Author: Nathan King -Date: Mon Jan 30 16:31:03 2023 +0000 - - Update README.md - -commit fd0589c4983f4b95ecbf0614869e111ddf2435cb -Author: Nathan King -Date: Mon Jan 30 16:30:26 2023 +0000 - - Update README.md - -commit da37c2eb27748cec99c7bf98a4f69b52e60b2244 -Merge: 8270ce4 758a47f -Author: Edward Withers -Date: Mon Jan 30 09:38:38 2023 +0000 - - Merge pull request #22 from boolean-uk/dependabot/npm_and_yarn/web-vitals-3.1.1 - - Bump web-vitals from 2.1.4 to 3.1.1 - -commit 8270ce48d365d8aa334367ff5c6311eaa3cfe696 -Merge: ea3eb07 8fe8bfc -Author: Edward Withers -Date: Mon Jan 30 09:38:20 2023 +0000 - - Merge pull request #21 from boolean-uk/dependabot/npm_and_yarn/testing-library/user-event-14.4.3 - - Bump @testing-library/user-event from 13.5.0 to 14.4.3 - -commit ea3eb071590602e3973ecc777d83b3978148f540 -Merge: 6cfbacd 4fd8377 -Author: Edward Withers -Date: Mon Jan 30 09:37:45 2023 +0000 - - Merge pull request #20 from boolean-uk/dependabot/npm_and_yarn/react-router-dom-6.8.0 - - Bump react-router-dom from 6.6.2 to 6.8.0 - -commit 4fd83772fd4aeed68f1d96de3af691135ad8c962 -Author: Nathan King -Date: Mon Jan 30 09:34:24 2023 +0000 - - fix render issue - -commit 6cfbacd685dbcb716ee5b84a9fbee9de07233aef -Author: Nathan King -Date: Mon Jan 30 09:23:54 2023 +0000 - - add empty credential login guard - -commit 758a47f6ca790c55a323597c30616de9de8aff83 -Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> -Date: Fri Jan 27 15:26:08 2023 +0000 - - Bump web-vitals from 2.1.4 to 3.1.1 - - Bumps [web-vitals](https://github.com/GoogleChrome/web-vitals) from 2.1.4 to 3.1.1. - - [Release notes](https://github.com/GoogleChrome/web-vitals/releases) - - [Changelog](https://github.com/GoogleChrome/web-vitals/blob/main/CHANGELOG.md) - - [Commits](https://github.com/GoogleChrome/web-vitals/compare/v2.1.4...v3.1.1) - - --- - updated-dependencies: - - dependency-name: web-vitals - dependency-type: direct:production - update-type: version-update:semver-major - ... - - Signed-off-by: dependabot[bot] - -commit 8fe8bfcec2417a04288e96eeca4201c084fad695 -Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> -Date: Fri Jan 27 15:26:02 2023 +0000 - - Bump @testing-library/user-event from 13.5.0 to 14.4.3 - - Bumps [@testing-library/user-event](https://github.com/testing-library/user-event) from 13.5.0 to 14.4.3. - - [Release notes](https://github.com/testing-library/user-event/releases) - - [Changelog](https://github.com/testing-library/user-event/blob/main/CHANGELOG.md) - - [Commits](https://github.com/testing-library/user-event/compare/v13.5.0...v14.4.3) - - --- - updated-dependencies: - - dependency-name: "@testing-library/user-event" - dependency-type: direct:production - update-type: version-update:semver-major - ... - - Signed-off-by: dependabot[bot] - -commit d7282c56e89010cc392e6b74665bc1a33240b27b -Author: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> -Date: Fri Jan 27 15:25:55 2023 +0000 - - Bump react-router-dom from 6.6.2 to 6.8.0 - - Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.6.2 to 6.8.0. - - [Release notes](https://github.com/remix-run/react-router/releases) - - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.8.0/packages/react-router-dom) - - --- - updated-dependencies: - - dependency-name: react-router-dom - dependency-type: direct:production - update-type: version-update:semver-minor - ... - - Signed-off-by: dependabot[bot] - -commit 564c818c73bb8c7ac8a2779e5fc06217a07da3b3 -Author: Edward Withers -Date: Fri Jan 27 15:25:18 2023 +0000 - - Create dependabot.yml - -commit 8480fc8015f062a029599ba3247909e841bf7f50 -Author: Nathan King -Date: Fri Jan 27 12:52:47 2023 +0000 - - fix container height - -commit adc812bec472b0f5757892188cbb174b3baa7997 -Merge: 1e568ef ecdd86b -Author: Nathan King -Date: Fri Jan 27 12:31:00 2023 +0000 - - Merge pull request #19 from boolean-uk/vherus-#8-auth - - use real API - -commit ecdd86b7ab12ce03331b3ba508bf37e92fa8cd7c -Author: Nathan King -Date: Fri Jan 27 12:30:03 2023 +0000 - - use real API - -commit 1e568ef07a5b056f9f4f89ab012585df3af6ed32 -Merge: 6675bee 7c92859 -Author: Nathan King -Date: Fri Jan 27 09:04:24 2023 +0000 - - Merge pull request #18 from boolean-uk/chris2733-#5-toast - - Toast Component - -commit 7c92859c8a141dbad0bf2985cfbcaafaf3d5a1df -Author: Nathan King -Date: Fri Jan 27 09:03:50 2023 +0000 - - use props - -commit ef62ccf21daa56591f85c88be4ce622f03aa72ee -Merge: f1b9e9b 6675bee -Author: Chris Law -Date: Fri Jan 27 00:01:01 2023 +0800 - - Merge branch 'main' into chris2733-#5-toast - -commit 6675bee0281001e7bc877cdcbd74c69c40b4bb28 -Author: Nathan King -Date: Thu Jan 26 11:44:27 2023 +0000 - - remove unused prop - -commit dfc894aac1ed01e8b10bf1b3b90b5bf854a590fc -Author: Nathan King -Date: Thu Jan 26 11:43:31 2023 +0000 - - add localStorage interactions for token - -commit cb90d3c5011be753c7f43e25584e2ae9d25ef000 -Author: Nathan King -Date: Thu Jan 26 11:29:24 2023 +0000 - - fix warnings - -commit 6fa800ba274055d308a137b98fadb66eb59d66ee -Merge: 1d96341 9677055 -Author: Nathan King -Date: Thu Jan 26 11:22:27 2023 +0000 - - Merge pull request #17 from boolean-uk/chris2733-#5-cascading-menu - - Chris2733 #5 cascading menu - -commit 9677055666ad14b9e248c5119642e21518dabd38 -Author: Nathan King -Date: Thu Jan 26 11:21:24 2023 +0000 - - refactor cascading menu into components - -commit bb0ab4c38ffc43ebc0e90c55ff31b93417a1b502 -Merge: 1fadf03 1d96341 -Author: Nathan King -Date: Thu Jan 26 09:52:35 2023 +0000 - - Merge branch 'main' into chris2733-#5-cascading-menu - -commit 1fadf0396fc7e6eab942b20d7e234c703d91b977 -Merge: 0c61926 179eee5 -Author: Nathan King -Date: Thu Jan 26 09:51:58 2023 +0000 - - Merge branch 'main' into chris2733-#5-cascading-menu - -commit 1d963418d29dae01b055bd36258d4e68128d74b7 -Merge: ccaa8cd f01587c -Author: Nathan King -Date: Thu Jan 26 09:51:30 2023 +0000 - - Merge pull request #16 from boolean-uk/chris2733-#4-tidy-css - - Chris2733 #4 tidy css - -commit f01587c55f99da5552843f244e77724ccb78584d -Author: Nathan King -Date: Thu Jan 26 09:50:37 2023 +0000 - - remove unused import - -commit 179eee539c8a9674749b67c4a6b7c7390b2aa36d -Author: Nathan King -Date: Thu Jan 26 09:12:32 2023 +0000 - - remove default maxsteps - -commit ccaa8cdf9925aa8db983be03748a5c6e7dd0a645 -Merge: fb1ebb7 6e0a4b4 -Author: Nathan King -Date: Thu Jan 26 09:11:31 2023 +0000 - - Merge pull request #15 from boolean-uk/vherus-#1-user-registration - - Hook up welcome form to registration, add Stepper component - -commit 0c61926bf444df8d2bb1a7b8d031964426534524 -Author: Chris Law -Date: Thu Jan 26 03:12:18 2023 +0800 - - setup cascading menu component with icons - -commit f1b9e9b83081f5c39bc48ccb9b858128c729d062 -Author: Chris Law -Date: Thu Jan 26 02:03:43 2023 +0800 - - creating toast component - -commit fb1ebb7fdd4f9292de55a9d45d5e670ae535cc41 -Author: Chris Law -Date: Thu Jan 26 01:28:32 2023 +0800 - - Revert "tidying css, using more global files" - - This reverts commit e38eabcc07b4bdc0da74a8548cb63704100a5cb2. - -commit e38eabcc07b4bdc0da74a8548cb63704100a5cb2 -Author: Chris Law -Date: Thu Jan 26 01:18:22 2023 +0800 - - tidying css, using more global files - -commit 6e0a4b43addac3e11e013d84c17236e09e700c2d -Author: Nathan King -Date: Wed Jan 25 12:33:24 2023 +0000 - - add stepper component - -commit f74922f79fa5e1f4c5d2670ea54186339dd09b06 -Author: Nathan King -Date: Wed Jan 25 11:13:15 2023 +0000 - - connect registration components - -commit 6fe4b3c61cd29831e1ebeda7c1499f0f1851e048 -Merge: 79dbc2e d5ebbd1 -Author: Nathan King -Date: Wed Jan 25 09:05:30 2023 +0000 - - Merge pull request #14 from boolean-uk/chris2733-#3-user_profile - - Chris2733 #3 user profile - -commit d5ebbd1e280a3c085b745eeb23ec068e5d43601a -Merge: 016472f 79dbc2e -Author: Chris Law -Date: Wed Jan 25 02:44:43 2023 +0800 - - Merge branch 'main' into chris2733-#3-user_profile - -commit 016472fd3900bc550ff4625bae1c4bd6c12add36 -Author: Chris Law -Date: Wed Jan 25 02:43:18 2023 +0800 - - adding welcome second step, another global class - -commit b446e4dbb802af00709cac6492a3c2b5322820fb -Author: Chris Law -Date: Wed Jan 25 02:10:14 2023 +0800 - - welcome form header styling - -commit 79dbc2e54d4b6ba1c41b286e156dd9396dd2219b -Author: Nathan King -Date: Tue Jan 24 15:25:19 2023 +0000 - - prevent search bar from submitting - -commit 9955a05c2efae49ab3664e0a664f9862428fbf1b -Author: Nathan King -Date: Tue Jan 24 15:20:53 2023 +0000 - - remove logout from sidebar - -commit d6a5755fdb9bce2b1d42956579ea41b9b6d461ca -Author: Nathan King -Date: Tue Jan 24 15:19:55 2023 +0000 - - add profile icon click dropdown - -commit f43b1700f30cb92a67ee169df478409f2e8773e5 -Author: Nathan King -Date: Tue Jan 24 14:41:47 2023 +0000 - - add optional icons to inputs - -commit 92db77f452bef3321ff23135eb6af9687c4b3b51 -Merge: 7b2d6d2 0d7fabe -Author: Nathan King -Date: Mon Jan 23 14:50:16 2023 +0000 - - Merge branch 'vherus-#6-modals' - -commit 0d7fabec85177fd5fc772211368cc4e97f046dc6 -Author: Nathan King -Date: Mon Jan 23 14:49:53 2023 +0000 - - update styles - -commit 7b2d6d2452104a06d248635a426e20f424584c6c -Merge: a012aa5 32fbbe8 -Author: Nathan King -Date: Mon Jan 23 14:49:24 2023 +0000 - - Merge pull request #12 from boolean-uk/vherus-#6-modals - - #6 modals - -commit 32fbbe88e1ceaa4f0d12b657982a3ad478531933 -Author: Nathan King -Date: Mon Jan 23 13:51:29 2023 +0000 - - add create post input styling - -commit 6a47a40ab1f88f43892e90fbd399aac807a5e6a2 -Author: Nathan King -Date: Mon Jan 23 13:41:04 2023 +0000 - - add border styling - -commit 76354b34f902e09d1638e3a143e65b214ba1751a -Author: Nathan King -Date: Mon Jan 23 13:01:08 2023 +0000 - - add comments for modal usage - -commit bd4d0e1f24d7f9bce6157fe348935d750f2910d7 -Author: Nathan King -Date: Mon Jan 23 12:54:26 2023 +0000 - - make modal reusable - -commit df273fc6d7973b2ad762bf24ab8441f1cd6ef225 -Author: Nathan King -Date: Mon Jan 23 12:11:45 2023 +0000 - - remove unused import - -commit 04c65bfa8da4554e820f7cba9cf50038f231c062 -Author: Nathan King -Date: Mon Jan 23 12:08:57 2023 +0000 - - simplify conditional render - -commit 8eb71ca6abb51942aecb0e86de85c2e7bcc7e0e4 -Author: Nathan King -Date: Mon Jan 23 12:08:18 2023 +0000 - - remove float - -commit 3a3f4ea00f082225052dc6f9fd2b2b582f4a2eec -Author: Nathan King -Date: Mon Jan 23 12:07:48 2023 +0000 - - add modal button styling - -commit 1fc3728aa10e460ca76f5889174f4b0cf6ccc217 -Author: Nathan King -Date: Mon Jan 23 11:43:06 2023 +0000 - - change modal styling - -commit d23c24085a15ba07c1983c54dc59cd15d0e4fd1f -Author: Nathan King -Date: Mon Jan 23 11:28:23 2023 +0000 - - add styling to modal with example code - -commit 395142735ea542a0bda15432ce9804cffabe32b7 -Author: Nathan King -Date: Mon Jan 23 10:44:57 2023 +0000 - - add modal context provider - -commit a012aa56f3109de414e061b29377280501604a08 -Author: Nathan King -Date: Mon Jan 23 09:12:24 2023 +0000 - - fix post class name - -commit b7ff2a37190c611ee2cdbc69edee68d490dce401 -Merge: 23f926b 404f9f4 -Author: Nathan King -Date: Mon Jan 23 09:11:10 2023 +0000 - - Merge pull request #11 from boolean-uk/chris2733-#4-layout - - Chris2733 #4 layout - -commit 404f9f4fe15f433d785be52c604fbeef1590cbcf -Merge: b71fb01 7ea6628 -Author: Nathan King -Date: Mon Jan 23 09:10:37 2023 +0000 - - Merge pull request #10 from boolean-uk/vherus-#5-dashboard - - Dashboard Layout & Styling - -commit 7ea662827eb08312a900e0720a7debd32fe003cc -Merge: 21bf2fb b71fb01 -Author: Nathan King -Date: Mon Jan 23 09:04:44 2023 +0000 - - merge changes - -commit b71fb0157393e43650d2d3ebb9c25cb31fb435ce -Author: Chris Law -Date: Sat Jan 21 01:00:46 2023 +0800 - - welcome styling - -commit 62d6b541540e6180260fa3bab7ba5c744b8fe3f6 -Author: Chris Law -Date: Sat Jan 21 00:58:57 2023 +0800 - - better css global variable names - -commit be89952a6d67536ccfc0f29e6efcdcfc1f84c41c -Author: Chris Law -Date: Sat Jan 21 00:57:18 2023 +0800 - - setup steps component - -commit 862969b3084b7a97532f55b4c8dc14096717dee1 -Author: Chris Law -Date: Fri Jan 20 23:50:22 2023 +0800 - - add light grey color, fix text color default - -commit 029a0dbbe70c8e32e1dc68552cedd1c2a7bc2914 -Author: Chris Law -Date: Fri Jan 20 23:50:02 2023 +0800 - - fix grid center align - -commit d55920254549127da7d4e2f01bd4fe17a7a91fd0 -Author: Chris Law -Date: Fri Jan 20 23:34:03 2023 +0800 - - add disablesnav option for navigation, linting - -commit 72c5cf1104a01ca34c5a29a075029ea591d44312 -Author: Chris Law -Date: Fri Jan 20 23:33:27 2023 +0800 - - setup welcome page and route - -commit 21bf2fb52729101a8073dbee9cd37fd4a1647a8c -Author: Nathan King -Date: Fri Jan 20 11:59:49 2023 +0000 - - update posts styles - -commit ad5543a14894b7cdc19dbd3bb40af227246f54fe -Author: Nathan King -Date: Fri Jan 20 11:49:10 2023 +0000 - - add user initials to profile icon on post - -commit 09576a1aa1e76082ed002b757b761c766ed6e1fa -Author: Nathan King -Date: Fri Jan 20 11:42:54 2023 +0000 - - add post likes conditional render - -commit cc986fff900370b6cf460024cd883c3e12d28b70 -Author: Nathan King -Date: Fri Jan 20 11:40:32 2023 +0000 - - change padding on dashboard grid - -commit 14c273e5b2cf0a1419b3b421f16319f7a127a0b1 -Author: Nathan King -Date: Fri Jan 20 11:38:14 2023 +0000 - - add post styling - -commit d16fd55dd3b03ff83abb3eab33f2d8bc2037384e -Author: Nathan King -Date: Fri Jan 20 11:00:30 2023 +0000 - - add card component - -commit e07572c787fe36efb74a63979ca274f134767c9f -Author: Nathan King -Date: Fri Jan 20 10:46:18 2023 +0000 - - add dashboard styling - -commit 3ed14c9d319b7575a36d71e52196a4c7c06f08a6 -Author: Chris Law -Date: Fri Jan 20 02:54:27 2023 +0800 - - fix socialbutton hover - -commit 7800755ad8f4cda7973f11285eb287faf90768e7 -Author: Chris Law -Date: Fri Jan 20 02:51:12 2023 +0800 - - setup verification page - -commit c15a6adc9b2dd7d514d41d34afb16a6a5cec78fc -Author: Chris Law -Date: Fri Jan 20 02:34:23 2023 +0800 - - simplify credential css - -commit 2108856ad5db82b34ee9bfc97b1707f958a3affa -Author: Chris Law -Date: Fri Jan 20 02:24:29 2023 +0800 - - tweak register and login classes - -commit d0524ab0e63195ce9fa1eeffad71d9582713c7be -Author: Chris Law -Date: Fri Jan 20 02:12:15 2023 +0800 - - setup register page - -commit d8be325b191726672addd2f85425c5c461f76fa5 -Author: Chris Law -Date: Fri Jan 20 01:55:38 2023 +0800 - - credentials card and sociallinks components - -commit dd3604dcaa37657a75302db0c5035454a57e56b3 -Author: Chris Law -Date: Fri Jan 20 01:52:32 2023 +0800 - - button style tweak - -commit abda634df4859fbab35a70c96c4827359ac14df1 -Merge: 03573f3 e61eb40 -Author: Chris -Date: Thu Jan 19 14:27:16 2023 +0000 - - Merge pull request #9 from boolean-uk/vherus-#4-layout - - add grid layout to protected routes - -commit e61eb401c2444653328ddab80cca4ccd0687b0cb -Author: Nathan King -Date: Thu Jan 19 11:45:07 2023 +0000 - - add grid layout to protected routes - -commit 03573f3c92d30935a5665e00218f51674ba09bf8 -Author: Chris Law -Date: Wed Jan 18 03:30:29 2023 +0800 - - add loader screen and styling - -commit 18dc9fbc4daba47e26d02e5fa00ff55086e6c6f3 -Author: Chris Law -Date: Wed Jan 18 02:54:38 2023 +0800 - - add social link buttons - -commit 11fcb47208a6a076881f329ee227d7416810b665 -Author: Chris Law -Date: Wed Jan 18 02:42:20 2023 +0800 - - fixing formm styling, adding password hide - -commit 717572fd7d2e8b5b1bd40ec55e14b367c4e1c4fb -Author: Chris Law -Date: Wed Jan 18 02:42:10 2023 +0800 - - fix button styling - -commit 41822b298435809f97c7afea414c13cef867e806 -Author: Chris Law -Date: Wed Jan 18 01:23:10 2023 +0800 - - better classes, more grid less flex - -commit 196b21c587abf1f7a4f682a96ad6a1b6d0ab3ab5 -Author: Chris Law -Date: Tue Jan 17 02:30:59 2023 +0800 - - break up css into files, format textinput js - -commit 1e2ef0ade5f9bde90a87af0b4642540ad03b7f49 -Author: Chris Law -Date: Tue Jan 17 01:59:32 2023 +0800 - - add button styling and variations - -commit 2adbf892bcccc5125fdde85e4d76d90d271c6ceb -Author: Chris Law -Date: Tue Jan 17 01:53:13 2023 +0800 - - login page styling - -commit 8d5da6983bf79dd1aff696988563266cacd7c4ef -Author: Chris Law -Date: Tue Jan 17 01:53:02 2023 +0800 - - add global text, button and font size - -commit 8f7b2dc5e84fc61e825af53f1cbe1f5e0978abfb -Author: Chris Law -Date: Tue Jan 17 01:31:49 2023 +0800 - - login button and more styling - -commit cbce9509887cfcbc08c6e9cfb87c95afd4257af5 -Author: Chris Law -Date: Tue Jan 17 01:26:24 2023 +0800 - - add more color classes, button styling and class props - -commit eef923ff4cd7635e1b23228c07caf993adc23862 -Author: Chris Law -Date: Tue Jan 17 00:58:46 2023 +0800 - - adding logo to login and css - -commit 375ffa9bd9a2cbb58cbbd75f6d74d8afcab0c9b6 -Author: Chris Law -Date: Tue Jan 17 00:58:31 2023 +0800 - - add reset css, heading default styling - -commit f17122ae6155591e84d7458cb54bd1d97e001fa1 -Author: Chris Law -Date: Tue Jan 17 00:33:39 2023 +0800 - - adding lexend font and setup - -commit a5714a3058acaeaca6897d227952d09e1c64557d -Author: Chris Law -Date: Tue Jan 17 00:29:56 2023 +0800 - - jsreact emmet fix - -commit 570b0e9fd976145ae873b9670319a0b18510e2de -Author: Chris Law -Date: Tue Jan 17 00:12:18 2023 +0800 - - formatting app and index js - -commit 34683c48c4e15edff146e5be18b28cbaaa66cccc -Author: Chris Law -Date: Tue Jan 17 00:12:07 2023 +0800 - - resetting appjs css - -commit 7a68d78d963f6acc9311889cd57b306864f0d0f1 -Author: Chris Law -Date: Tue Jan 17 00:11:41 2023 +0800 - - set css globals, login css - -commit 20c4345e31e1df1e0b555079cc16766a33ef55b2 -Author: Chris Law -Date: Tue Jan 17 00:10:57 2023 +0800 - - setting up workspace for consistency - -commit 23f926b11df22bb6e070dcb192801cb95f2b53f3 -Author: Nathan King -Date: Mon Jan 16 11:17:23 2023 +0000 - - use mock API client for component data - -commit 8bc68794de837962988a9106e6a2ff612a7a4ef3 -Author: Nathan King -Date: Mon Jan 16 11:14:27 2023 +0000 - - add mock api interactions - -commit feb2e263a5aca27a6fe185a6260e2dce21ee0df5 -Author: Nathan King -Date: Mon Jan 16 10:46:10 2023 +0000 - - move header, nav components - -commit ebabfa8ea357feb5599b7382561243e8a39cb709 -Author: Nathan King -Date: Mon Jan 16 10:41:10 2023 +0000 - - add post component skeleton - -commit 91474a67574540e8a367759f55e3763698a2fb5d -Author: Nathan King -Date: Mon Jan 16 10:26:54 2023 +0000 - - add skeleton login & register - -commit 9006ce502209d2c79e82f5fba5ce7476eb056535 -Author: Nathan King -Date: Mon Jan 16 10:10:00 2023 +0000 - - add protected route & auth layer - -commit 785a7817d57b3657b7913337d4564fd6e5e0309d -Author: Nathan King -Date: Tue Jan 10 18:03:13 2023 +0000 - - add auth context skeleton - -commit 9413ff8de99f51f91c1057584726f863153ead00 -Author: Nathan King -Date: Tue Jan 10 17:01:17 2023 +0000 - - update README.md, add branch naming convention - -commit 8239114e56feb6d56760446ce42e394fa469d217 -Author: Nathan King -Date: Tue Jan 10 16:53:25 2023 +0000 - - add react app template - -commit 1495df4c046ee3dde572df6db2b49d456d1c3938 -Author: Nathan King -Date: Tue Jan 10 16:41:53 2023 +0000 - - add .gitignore From b8f1bc3ef47ddcc4b864120338e51333f428adcf Mon Sep 17 00:00:00 2001 From: Sander Rasmussen Date: Thu, 27 Feb 2025 14:31:50 +0100 Subject: [PATCH 15/26] readded missing profile fields --- src/pages/welcome/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/welcome/index.js b/src/pages/welcome/index.js index c055442c..0015c1d8 100644 --- a/src/pages/welcome/index.js +++ b/src/pages/welcome/index.js @@ -15,7 +15,15 @@ const Welcome = () => { firstName: '', lastName: '', githubUsername: '', - bio: '' + bio: '', + email: '', + mobile: '', + password: '', + role: '', + cohortId: '', + specialism: '', + startDate: '', + endDate: '' }); const onChange = (event) => { From 146f2221bb2c03a3292ca1fb4d7c67f2bc8b8bb9 Mon Sep 17 00:00:00 2001 From: Jostein Lind Aanby Date: Thu, 27 Feb 2025 14:40:33 +0100 Subject: [PATCH 16/26] EditProfile and ViewProfile --- src/App.js | 15 +++- src/components/form/textInput/index.js | 12 ++- src/{pages => components}/profile/index.js | 86 +++++++------------ src/{pages => components}/profile/profile.css | 0 src/pages/profileEdit/index.js | 52 +++++++++++ src/pages/profileView/index.js | 32 +++++++ 6 files changed, 138 insertions(+), 59 deletions(-) rename src/{pages => components}/profile/index.js (67%) rename src/{pages => components}/profile/profile.css (100%) create mode 100644 src/pages/profileEdit/index.js create mode 100644 src/pages/profileView/index.js diff --git a/src/App.js b/src/App.js index 5b531ae9..cb2d1e06 100644 --- a/src/App.js +++ b/src/App.js @@ -8,8 +8,8 @@ import Verification from './pages/verification'; import { AuthProvider, ProtectedRoute } from './context/auth'; import { ModalProvider } from './context/modal'; import Welcome from './pages/welcome'; -import Profile from './pages/profile'; - +import ViewProfile from './pages/profileView'; +import EditProfile from './pages/profileEdit'; const App = () => { return ( <> @@ -33,7 +33,16 @@ const App = () => { path="profile/:id" element={ - + + + } + /> + + + } /> diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js index 10aec6de..8dfce8b4 100644 --- a/src/components/form/textInput/index.js +++ b/src/components/form/textInput/index.js @@ -12,7 +12,6 @@ const TextInput = ({ readOnly = false }) => { const [input, setInput] = useState(''); - // const [isValidInput, setIsValidInput] = useState(true); const [showpassword, setShowpassword] = useState(false); if (type === 'password') { @@ -30,7 +29,15 @@ const TextInput = ({ setInput(e.target.value); }} /> - {showpassword && } + {showpassword && ( + + )} + + ); +}; + +export default EditProfile; diff --git a/src/pages/profileView/index.js b/src/pages/profileView/index.js new file mode 100644 index 00000000..fb9fe1ea --- /dev/null +++ b/src/pages/profileView/index.js @@ -0,0 +1,32 @@ +import { createContext, useEffect, useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { getUser } from '../../service/apiClient'; +import Profile from '../../components/profile'; + +export const ViewUserContext = createContext(); + +const ViewProfile = () => { + const { id } = useParams(); + const [user, setUser] = useState(null); + + useEffect(() => { + const fetchUser = async () => { + try { + const response = await getUser(id); + setUser(response.data.user); + } catch (error) { + console.error('Error fetching user:', error); + } + }; + + fetchUser(); + }, [id]); + + return ( + + + + ); +}; + +export default ViewProfile; From f144e1b5a874c143238e07e3d5535ed2331a1efa Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Thu, 27 Feb 2025 14:58:44 +0100 Subject: [PATCH 17/26] Created tokenservice and profilebutton --- src/components/profileButton/index.js | 32 ++++++++++++++++++++++++ src/components/profileButton/styling.css | 8 ++++++ src/service/tokenService.js | 10 ++++++++ 3 files changed, 50 insertions(+) create mode 100644 src/components/profileButton/index.js create mode 100644 src/components/profileButton/styling.css create mode 100644 src/service/tokenService.js diff --git a/src/components/profileButton/index.js b/src/components/profileButton/index.js new file mode 100644 index 00000000..185bdabf --- /dev/null +++ b/src/components/profileButton/index.js @@ -0,0 +1,32 @@ +import { useNavigate } from 'react-router-dom'; +import Button from '../button'; + +export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => { + const navigate = useNavigate(); + const onCancel = (e) => { + e.preventDefault(); + navigate(`/route/${pageId}`); + }; + + return ( +
+ {isInEditMode && ( +
+
+ )} + + {!isInEditMode && ( +
+
+ )} +
+ ); +}; diff --git a/src/components/profileButton/styling.css b/src/components/profileButton/styling.css new file mode 100644 index 00000000..fd431e77 --- /dev/null +++ b/src/components/profileButton/styling.css @@ -0,0 +1,8 @@ + + +.button-button { + width: 430; + height: 60; + border-radius: 8px; + +} \ No newline at end of file diff --git a/src/service/tokenService.js b/src/service/tokenService.js new file mode 100644 index 00000000..590a5d4c --- /dev/null +++ b/src/service/tokenService.js @@ -0,0 +1,10 @@ +import jwtDecode from 'jwt-decode'; + +export const getId = () => { + const token = localStorage.getItem('token'); + if (token) { + const decoded = jwtDecode(token); + return decoded.userId; + } + return -1; +}; From a87033e40c7b48808c054122ebcfe58b6ac31e72 Mon Sep 17 00:00:00 2001 From: Jostein Lind Aanby Date: Thu, 27 Feb 2025 15:19:26 +0100 Subject: [PATCH 18/26] not working profilebutton --- src/components/profileButton/index.js | 6 +++--- src/pages/profileEdit/index.js | 6 +++++- src/pages/profileView/index.js | 12 +++++++++++- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/profileButton/index.js b/src/components/profileButton/index.js index 185bdabf..97f769b5 100644 --- a/src/components/profileButton/index.js +++ b/src/components/profileButton/index.js @@ -5,14 +5,14 @@ export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => { const navigate = useNavigate(); const onCancel = (e) => { e.preventDefault(); - navigate(`/route/${pageId}`); + navigate(`/profile/${pageId}`); }; return (
{isInEditMode && (
-
)} @@ -21,7 +21,7 @@ export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => {
+ ); }; diff --git a/src/pages/profileView/index.js b/src/pages/profileView/index.js index fb9fe1ea..322697db 100644 --- a/src/pages/profileView/index.js +++ b/src/pages/profileView/index.js @@ -1,13 +1,17 @@ import { createContext, useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import { getUser } from '../../service/apiClient'; import Profile from '../../components/profile'; +import { ProfileButton } from '../../components/profileButton'; +import { getId } from '../../service/tokenService'; export const ViewUserContext = createContext(); const ViewProfile = () => { + const navigate = useNavigate(); const { id } = useParams(); const [user, setUser] = useState(null); + const [canEdit, setCanEdit] = useState(false); useEffect(() => { const fetchUser = async () => { @@ -20,11 +24,17 @@ const ViewProfile = () => { }; fetchUser(); + getId() === id ? setCanEdit(true) : setCanEdit(false); }, [id]); + const goToEdit = () => { + navigate(`/profile/${id}/edit`); + }; + return ( + ); }; From 68153715ed936f6f22a82e456bf6ef38759e2144 Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Thu, 27 Feb 2025 15:21:25 +0100 Subject: [PATCH 19/26] Changed the profilebutton --- src/components/profileButton/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/profileButton/index.js b/src/components/profileButton/index.js index 97f769b5..9353bf4a 100644 --- a/src/components/profileButton/index.js +++ b/src/components/profileButton/index.js @@ -10,20 +10,18 @@ export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => { return (
- {isInEditMode && ( + {isInEditMode ? (
-
- )} - - {!isInEditMode && ( + ) : (
)} From f970bceef7d1b922fbe3bbda91ce530eb7690776 Mon Sep 17 00:00:00 2001 From: Jostein Lind Aanby Date: Thu, 27 Feb 2025 15:22:15 +0100 Subject: [PATCH 20/26] change --- src/components/profileButton/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/profileButton/index.js b/src/components/profileButton/index.js index 97f769b5..21611521 100644 --- a/src/components/profileButton/index.js +++ b/src/components/profileButton/index.js @@ -13,7 +13,7 @@ export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => { {isInEditMode && (
)} From 3c298d6357fa0aa42d1754aada203c76b940cd08 Mon Sep 17 00:00:00 2001 From: Jostein Lind Aanby Date: Thu, 27 Feb 2025 15:57:53 +0100 Subject: [PATCH 21/26] buttons working + nav route --- src/components/navigation/index.js | 3 ++- src/components/profileButton/index.js | 2 +- src/pages/profileView/index.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js index b31393a8..1f788a47 100644 --- a/src/components/navigation/index.js +++ b/src/components/navigation/index.js @@ -4,6 +4,7 @@ import HomeIcon from '../../assets/icons/homeIcon'; import ProfileIcon from '../../assets/icons/profileIcon'; import useAuth from '../../hooks/useAuth'; import './style.css'; +import { getId } from '../../service/tokenService'; const Navigation = () => { const { token } = useAuth(); @@ -22,7 +23,7 @@ const Navigation = () => {
  • - +

    Profile

     diff --git a/src/components/profileButton/index.js b/src/components/profileButton/index.js index 9353bf4a..19f4ecb2 100644 --- a/src/components/profileButton/index.js +++ b/src/components/profileButton/index.js @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom'; import Button from '../button'; -export const ProfileButton = (isInEditMode, canEdit, onClick, pageId) => { +export const ProfileButton = ({ isInEditMode, canEdit, onClick, pageId }) => { const navigate = useNavigate(); const onCancel = (e) => { e.preventDefault(); diff --git a/src/pages/profileView/index.js b/src/pages/profileView/index.js index 322697db..ecfe76f8 100644 --- a/src/pages/profileView/index.js +++ b/src/pages/profileView/index.js @@ -24,7 +24,7 @@ const ViewProfile = () => { }; fetchUser(); - getId() === id ? setCanEdit(true) : setCanEdit(false); + getId() === Number(id) ? setCanEdit(true) : setCanEdit(false); }, [id]); const goToEdit = () => { From 3b7e21abbc18bd8c78f27afc7e6eb98a98ae362b Mon Sep 17 00:00:00 2001 From: Erlend Skutlaberg Date: Fri, 28 Feb 2025 08:57:01 +0100 Subject: [PATCH 22/26] implemented tsome changed --- src/App.css | 4 ++ src/components/profile/index.js | 77 ++++++++++++------------ src/components/profile/profile.css | 2 +- src/components/profileButton/index.js | 3 +- src/components/profileButton/styling.css | 1 - src/pages/profileEdit/index.js | 8 ++- src/pages/profileView/index.js | 8 ++- 7 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/App.css b/src/App.css index ec62bd1a..a103714e 100644 --- a/src/App.css +++ b/src/App.css @@ -14,3 +14,7 @@ .ReactModal__Html--open { overflow: hidden; } + +.profile-button-group > section { + padding-left: 400px; +} diff --git a/src/components/profile/index.js b/src/components/profile/index.js index 82458b0a..7cc2b7ba 100644 --- a/src/components/profile/index.js +++ b/src/components/profile/index.js @@ -71,44 +71,7 @@ const Profile = ({ readOnly, UserContext }) => { readOnly={readOnly} />
    • -
    -

    Contact Info

    - - - -
    -
    -

    Bio

    - -
    +

    {user.role === 'STUDENT' ? 'Training Info' : 'Professional Info'}

    { /> )}
    +
    +

    Contact Info

    + + + +
    +
    +

    Bio

    +