Sime jadrijev/476 register page

apps/app/src/components/AuthFooter/AuthFooter.module.scss

@@ -0,0 +1,14 @@
+.authFooter{
+    display: flex;
+    justify-content: space-between;
+    font-family: Inter;
+    color: $primary-black;
+    margin-top: -16px ;
+
+    span:first-child{
+        opacity: 0.6;
+    }
+    span:last-child{
+        font-weight: 600;
+    }
+}

apps/app/src/components/AuthFooter/AuthFooter.tsx

@@ -0,0 +1,17 @@
+import c from './AuthFooter.module.scss';
+
+export const AuthFooter = ({
+  leftMessage,
+  rightMessage,
+}: {
+  leftMessage: string;
+  rightMessage: string;
+}) => {
+  return (
+    <div className={c.authFooter}>
+      {/* TODO dodat da dodat da te rerouta na drugi page */}
+      <span>{leftMessage}</span>
+      <span>{rightMessage}</span>
+    </div>
+  );
+};

apps/app/src/components/AuthFooter/index.ts

@@ -0,0 +1,2 @@
+import { AuthFooter } from './AuthFooter';
+export { AuthFooter };

apps/app/src/components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,56 @@
+.checkbox {
+    display: flex;
+    align-items: flex-start;
+
+    gap: 16px;
+    width: 100%;
+
+    input[type='checkbox'] {
+        appearance: none; 
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        min-width: 20px;
+        min-height: 20px;
+
+        border-radius: 4px;
+        border: none;
+        background: $black-10;
+
+        cursor: pointer;
+
+        &:checked {
+            background: $primary-muted-orange;
+
+            &:after {
+                content: "";
+                background: url(./../../assets/icons/check-mark-icon.svg);
+
+                position: absolute;
+                width: 9.583px;
+                height: 9.583px;
+                background-size: contain;
+            }
+        }
+
+
+
+    }
+
+    label {
+        position: relative;
+        top: 3px;
+
+        font-family: Inter;
+        letter-spacing: -0.16px;
+
+        color: $primary-black;
+    }
+}
+
+
+
+
+

apps/app/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,24 @@
+import c from './Checkbox.module.scss';
+
+type CheckboxProps = {
+  name: string;
+  checked: boolean;
+  label: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange'>;
+export const Checkbox = ({ name, checked, label, onChange }: CheckboxProps) => {
+  return (
+    <>
+      <div className={c.checkbox}>
+        <input
+          type='checkbox'
+          checked={checked}
+          name={name}
+          onChange={onChange}
+        />
+        <label>{label}</label>
+      </div>
+    </>
+  );
+};

apps/app/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+import { Checkbox } from './Checkbox';
+export { Checkbox };

apps/app/src/components/Input/Input.module.scss

@@ -15,7 +15,6 @@
 .inputWrapper {
   position: relative;
   width: 100%;
-  background-color: aqua;
 }
 
 .input {

apps/app/src/components/ProgressBar/ProgressBar.module.scss

@@ -0,0 +1,18 @@
+.progressBar{
+    background-color: $black-5;
+    // width: 100%;
+    width: 350px;
+    height: 62px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    padding: 16px;
+}
+
+.dots{
+    @include dottedBreak($primary-black);
+
+    display: flex;
+    margin-inline: 8px;
+}

apps/app/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,42 @@
+import { useRegistration } from '../../providers/RegistrationContext';
+import c from './ProgressBar.module.scss';
+import { ProgressBarTab } from './ProgressBarTab';
+import React from 'react';
+
+type ProgressBarProps = {
+  currentStep: number;
+  setCurrentStep: (step: number) => void;
+};
+
+export const ProgressBar = ({
+  currentStep,
+  setCurrentStep,
+}: ProgressBarProps) => {
+  const { isStepValid } = useRegistration();
+
+  const handleStepClick = (clickedStep: number) => {
+    const isGoingBackwards = clickedStep <= currentStep;
+    const isGoingForward = clickedStep === currentStep + 1;
+
+    if (isGoingBackwards) {
+      setCurrentStep(clickedStep);
+    } else if (isGoingForward && isStepValid(currentStep)) {
+      setCurrentStep(clickedStep);
+    }
+  };
+  return (
+    <div className={c.progressBar}>
+      {[1, 2, 3, 4].map((step) => (
+        <React.Fragment key={step}>
+          <ProgressBarTab
+            key={step}
+            stepIndex={step}
+            active={step <= currentStep}
+            onClick={handleStepClick}
+          />
+          {step < 4 && <div className={c.dots}></div>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};

apps/app/src/components/ProgressBar/ProgressBarTab/ProgressBarTab.module.scss

@@ -0,0 +1,23 @@
+.progressBarTab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    min-width: 30px; 
+    min-height: 30px;
+
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 600;
+
+    background-color: $black-10;
+    color: $primary-black;
+
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.activeProgressBarTab {
+    background-color: $primary-muted-orange;
+    color: $primary-white;
+}

apps/app/src/components/ProgressBar/ProgressBarTab/ProgressBarTab.tsx

@@ -0,0 +1,19 @@
+import c from './ProgressBarTab.module.scss';
+
+export const ProgressBarTab = ({
+  stepIndex,
+  active,
+  onClick,
+}: {
+  stepIndex: number;
+  active: boolean;
+  onClick: (stepIndex: number) => void;
+}) => {
+  return (
+    <div
+      className={`${c.progressBarTab} ${active ? c.activeProgressBarTab : ''}`}
+      onClick={() => onClick(stepIndex)}>
+      {stepIndex}
+    </div>
+  );
+};

apps/app/src/components/ProgressBar/ProgressBarTab/index.ts

@@ -0,0 +1,2 @@
+import { ProgressBarTab } from './ProgressBarTab';
+export { ProgressBarTab };

apps/app/src/components/ProgressBar/index.ts

@@ -0,0 +1,2 @@
+import { ProgressBar } from './ProgressBar';
+export { ProgressBar };

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/CheckboxFieldsWrapper.module.scss

@@ -0,0 +1,11 @@
+.checkboxFieldsWrapper{
+    margin-block: 16px 8px;
+}
+
+.errorMessage {
+    font-family: Inter;
+    color: red;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/CheckboxFieldsWrapper.tsx

@@ -0,0 +1,48 @@
+import { ChangeEvent } from 'react';
+import c from './CheckboxFieldsWrapper.module.scss';
+import { Checkbox } from '../../Checkbox';
+import { UserDataFields } from '../../../types/user/user.dto';
+
+type UserData = {
+  newsletterEnabled: boolean;
+  companiesNewsEnabled: boolean;
+  termsAndConditionsEnabled: boolean;
+};
+type Props = {
+  userData: UserData;
+  updateUserData: (newData: Partial<UserData>) => void;
+};
+export const CheckboxFieldsWrapper = ({ userData, updateUserData }: Props) => {
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, checked } = e.target;
+    updateUserData({ [name]: checked });
+  };
+
+  return (
+    <div className={c.checkboxFieldsWrapper}>
+      <Checkbox
+        label='Želim primati novosti o DUMP Days konferenciji.'
+        checked={userData.newsletterEnabled}
+        name={UserDataFields.NewsletterEnabled}
+        onChange={handleCheckboxChange}
+        key={1}
+      />
+      <Checkbox
+        label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
+        checked={userData.companiesNewsEnabled}
+        name={UserDataFields.CompaniesNewsEnabled}
+        onChange={handleCheckboxChange}
+        key={2}
+      />
+      <Checkbox
+        label='Slažem se s uvjetima i odredbama.'
+        checked={userData.termsAndConditionsEnabled}
+        name={UserDataFields.TermsAndConditionsEnabled}
+        onChange={handleCheckboxChange}
+        key={3}
+      />
+
+      <p className={c.errorMessage}></p>
+    </div>
+  );
+};

apps/app/src/components/RegistrationForms/CheckboxFieldsWrapper/index.ts

@@ -0,0 +1,2 @@
+import { CheckboxFieldsWrapper } from './CheckboxFieldsWrapper';
+export { CheckboxFieldsWrapper };

apps/app/src/components/RegistrationForms/ConfirmEmail/ConfirmEmail.module.scss

@@ -0,0 +1,28 @@
+.confirmEmail {
+    display: flex;
+    flex-direction: column;
+    width: 422px;
+
+    .confirmEmailUpper {
+
+        margin-bottom: 48px;
+
+        h2{
+            color: $primary-black;
+            text-align: center;
+            font-family: NeueMachina;
+            font-size: 30px;
+            font-weight: 500;
+            line-height: 30px; 
+            margin-top: 40px;
+            margin-bottom: 18px;
+        }
+
+        p{
+            color: $primary-black;
+            text-align: center;
+            font-family: Inter;
+            line-height: 22px; /* 137.5% */
+        }
+    }
+}

apps/app/src/components/RegistrationForms/ConfirmEmail/ConfirmEmail.tsx

@@ -0,0 +1,19 @@
+import Button from '../../Button/Button';
+import c from './ConfirmEmail.module.scss';
+
+export const ConfirmEmail = () => {
+  return (
+    <div className={c.confirmEmail}>
+      <div className={c.confirmEmailUpper}>
+        <h2>Potvrdi svoj e-mail</h2>
+        <p>
+          Poslali smo ti e-mail na [email protected] da potvrdimo ispravnost
+          unesene adrese. Nakon što se e-mail pojavi u tvom sandučiću, klikni na
+          link kako bi registracija bila uspješna.
+        </p>
+      </div>
+
+      <Button children='Potvrdi email' variant='orange' />
+    </div>
+  );
+};

apps/app/src/components/RegistrationForms/ConfirmEmail/index.ts

@@ -0,0 +1,2 @@
+import { ConfirmEmail } from './ConfirmEmail';
+export { ConfirmEmail };