Andras/BoundlessFlowCampus2K

Fork 0

#243-Login-popup-window #261

Merged

c24elipe merged 12 commits from #243-Login-popup-window into team_2_week_1

2026-04-15 08:12:12 +00:00

c22abdal commented

2026-04-13 12:07:07 +00:00

Collaborator

Related issues: #242

Created a login popup window using 'reactjs-popup'.
When the login button is pressed, the window will show up in the center of the screen. Looking all nice and focused for your pleasure.
Right now the buttons just close the window, backend logic needs to be added.

One issue that couldn't be resolved, the logo is not being found for some reason.

Related issues: #242 Created a login popup window using 'reactjs-popup'. When the login button is pressed, the window will show up in the center of the screen. Looking all nice and focused for your pleasure. Right now the buttons just close the window, backend logic needs to be added. One issue that couldn't be resolved, the logo is not being found for some reason.

c22abdal added 5 commits

2026-04-13 12:07:07 +00:00

Creating Login Placeholder ac920e98c5

Adding style to the logIn popup b5c0dc0b98

Adding HS logo ac8aff3161

The logo won't show up for some reason

simple button fix 1b3e1a9cfc

title cleanup 942654f6fd

c24elipe added the

needs review

label

2026-04-13 12:07:39 +00:00

c22abdal was assigned by c24elipe

2026-04-13 12:07:48 +00:00

c24elipe removed the

needs review

label

2026-04-13 12:20:25 +00:00

c24elipe commented

2026-04-13 12:21:21 +00:00

Collaborator

Before reviewing, read:
https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design

Before reviewing, read: https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/Webpage-Design

c22abdal added the

needs review

label

2026-04-14 08:09:23 +00:00

c24elipe requested review from a22erigr

2026-04-14 11:31:37 +00:00

a22erigr added 1 commit

2026-04-14 11:34:09 +00:00

Merge branch 'team_2_week_1' into #243-Login-popup-window 98d824b9ba

a22erigr commented

2026-04-14 12:14:59 +00:00

Collaborator

Review on #261

Whats done

Run on Fedora 43 using firefox
- App start.
  - Get Errors
    - Fel: HTTP 404 from TemperatureView
      - Not expected but not relevant to this review.
    - Fel: JSON.parse: unexpected character at line 1 column 1 of the JSON data
      - Expected
- Login pops up
  - Img is to large and not centered
- Tested login in as user and guest
  - Works as intended. Noted it's temporary.
- Forgot password does not work
  - Expected
Inspected following files
- Login.css
  - Indented using 4 spaces. According to standard CSS-Standards two spaces should be used
  - White space exists after some of the color values and the semicolon.

    background: #b1236e ;

Login.js
- Noted 4 in indentation but no standard exists.
- Class name "extra" is a bit vague.
- Inline styling on line 11. If possible move to css file
package.json
- Here following new dependency was found
  - "reactjs-popup": "^2.0.6",
  - This dependency was not approved

Whats needs to be done

Discuss with project leaders if reactjs-popup is okay to use or remove the dependency and implement the card without any other depend.
Change indentation in Login.css
From using 4 spaces

.content{
    margin: 1% auto; 
    padding: 20px;
....width: 80%;
}

To using 2 spaces

.content{
  margin: 1% auto; 
  padding: 20px;
..width: 80%;
}

Change spacing after colors and semicolon

    background: #b1236e ;
    /*To*/
     background: #b1236e;

If possible move the inline styling to css file

            <Popup trigger= {<button>Login </button>} modal nested
            contentStyle={{
                    background: 'transparent',
                    border: 'none',
                    padding: '0',
                    width: 'auto'
                }}>

Change the position of img and size.

Conclusion

Standard for react indentation does not exist
noted downloaded plugin that were not approved reactjs-popup. Because of this the pull is rejected

# Review on #261 ## Whats done + Run on Fedora 43 using firefox + App start. + Get Errors + Fel: HTTP 404 from TemperatureView + Not expected but not relevant to this review. + Fel: JSON.parse: unexpected character at line 1 column 1 of the JSON data + Expected + Login pops up + Img is to large and not centered + Tested login in as user and guest + Works as intended. Noted it's temporary. + Forgot password does not work + Expected + Inspected following files + Login.css + Indented using 4 spaces. According to standard [CSS-Standards](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/CSS-Standards#formatting) two spaces should be used + White space exists after some of the color values and the semicolon. ```css background: #b1236e ; ``` + Login.js + Noted 4 in indentation but no standard exists. + Class name "extra" is a bit vague. + Inline styling on line 11. If possible move to css file + package.json + Here following new dependency was found + "**reactjs-popup": "^2.0.6",** + This dependency was not approved ## Whats needs to be done + Discuss with project leaders if reactjs-popup is okay to use or remove the dependency and implement the card without any other depend. + Change indentation in Login.css From using 4 spaces ```css .content{ margin: 1% auto; padding: 20px; ....width: 80%; } ``` To using 2 spaces ```css .content{ margin: 1% auto; padding: 20px; ..width: 80%; } ``` + Change spacing after colors and semicolon ```css background: #b1236e ; /*To*/ background: #b1236e; ``` + If possible move the inline styling to css file ``` html <Popup trigger= {<button>Login </button>} modal nested contentStyle={{ background: 'transparent', border: 'none', padding: '0', width: 'auto' }}> ``` + Change the position of img and size. ![bild](/attachments/287a6eb1-d225-40b6-8769-038225b39b2d) ## Conclusion + Standard for react indentation does not exist + noted downloaded plugin that were not approved reactjs-popup. Because of this the pull is rejected

bild.png

122 KiB

a22erigr added

reviewed

and removed

needs review

labels

2026-04-14 12:16:07 +00:00

c24elipe added 1 commit

2026-04-14 22:45:21 +00:00

Merge branch 'team_2_week_1' into #243-Login-popup-window 4a43588e99

c24elipe commented

2026-04-14 22:46:27 +00:00

Collaborator

Update to get the CSS styling colors and such

c24elipe added 1 commit

2026-04-14 23:29:59 +00:00

My quick fixes ab71beec13

c24elipe commented

2026-04-14 23:31:20 +00:00

Collaborator

Added some changes (only style for the moment, no closing or opening yet):

Deleted reactjs-popup dependency.
Renamed folder to be compliant.
Renamed scripts to "LoginModal”
Moved logo to Assets, and renamed it to “HisLogo”
Fixed the design to be the same as the one done in the “Login window design/model #242”-issue.
Implemented our color system to allow for different color modes (check themes.css)

Added some changes (only style for the moment, no closing or opening yet): 1. Deleted reactjs-popup dependency. 2. Renamed folder to be compliant. 3. Renamed scripts to "LoginModal” 4. Moved logo to Assets, and renamed it to “HisLogo” 5. Fixed the design to be the same as the one done in the “Login window design/model #242”-issue. 6. Implemented our color system to allow for different color modes (check themes.css) ![image](/attachments/d8823b87-1441-447e-b326-afb060ae269e)

image.png

50 KiB

c24elipe added 1 commit

2026-04-15 00:33:43 +00:00

Fix: Syling, open / close logic ca48485cb6

c24elipe commented

2026-04-15 00:35:46 +00:00

Collaborator

Made the card body wider and more scalable.
Changed what has handleModalClick on it to be the overlay instead of inside the login.
Added “<div className={styles.modal} onClick={(event) => event.stopPropagation()}>” so only clicks outside the login body modal do something.
Removed all unused arguments since my original plan to use them would have involved more work than is in scope for this PR.
Added a showLogin hook to close and open.
In app.js, I added a simple example of how it could be used. Those changes will be removed before merging.

1. Made the card body wider and more scalable. 2. Changed what has handleModalClick on it to be the overlay instead of inside the login. 3. Added “<div className={styles.modal} onClick={(event) => event.stopPropagation()}>” so only clicks outside the login body modal do something. 4. Removed all unused arguments since my original plan to use them would have involved more work than is in scope for this PR. 5. Added a showLogin hook to close and open. 6. In app.js, I added a simple example of how it could be used. **Those changes will be removed before merging**.

c24elipe added 1 commit

2026-04-15 00:44:58 +00:00

Added Escape button close 41b4eabd6a

c24elipe commented

2026-04-15 00:46:22 +00:00

Collaborator

Removed onClick={(event) => event.stopPropagation()} from the modal since it wasn’t needed anymore.
Added an event listener for the escape button. If it is pressed, it closes the model.

(Press the button to open)

1. Removed onClick={(event) => event.stopPropagation()} from the modal since it wasn’t needed anymore. 2. Added an event listener for the escape button. If it is pressed, it closes the model. (Press the button to open) ![image](/attachments/c5f2ec1d-2619-4ad7-b837-f6fe9a2a0cca) ![image](/attachments/fe3528fb-1872-4e11-b7fc-77d1e1a049b0)

image.png

54 KiB

image.png

13 KiB

c24elipe added

needs review

and removed

reviewed

labels

2026-04-15 00:48:57 +00:00

c24danli was assigned by a24vinla

2026-04-15 06:25:14 +00:00

a24vinla requested review from c24danli

2026-04-15 06:39:39 +00:00

c24danli was unassigned by a24vinla

2026-04-15 06:51:40 +00:00

a22erigr was assigned by a24vinla

2026-04-15 06:51:40 +00:00

a22erigr added 1 commit

2026-04-15 06:55:45 +00:00

Minor fixes 9b0f060f67

+ Indentation from 4->2 in css file
+ Removed "reactjs-popup": "^2.0.6", from package-lock.json
+ added dependency hook.showHook to hook useEffect (editor sugestion)

c24elipe self-assigned this

2026-04-15 08:02:22 +00:00

c24danli commented

2026-04-15 08:05:03 +00:00

Collaborator

What is checked

Open/close logic
It starts open and renders without problems, closing window by pressing "esc" or clicking outside of popup window works.
Its possible to re-open the login window by pressing "show login modal"button.
Fix whitespaces in frontend/src/app/theme.css
Should be 2 white spaces after : documented in CSS Standards

  /* Färger */
  --color-bg:          light-dark(#f4f5f7, #333333);
  --color-text:        light-dark(#111827, #ffffff);

  /*Card styling*/
  --card-color-bg:       light-dark(#ffffff, #181818);
  --card-border:         1px solid light-dark(#e1e4e8, #afafaf);
  --card-box-shadow:     0 1px 3px light-dark(#111827, #ffffff);
  --card-title-color:    light-dark(#111827, #ffffff);

  /* Login styling */
  --login-background-color:    rgb(from var(--color1) r g b / 50%);

  --login-button-color:        var(--color3);
  --guest-button-color:        var(--color2);
  --button-text-color:         light-dark(#ffffff, #111827);

  --login-button-hover-color:        var(--color2);
  --guest-button-hover-color:        var(--color1);

  --forgot-text-color: #0969a8;
  --forgot-hover-color: #a0a5a9;

LoginModal.module.css fix
The white spaces in the css file is ok now and according to standards.
LoginModal.js
Syntax good and according to js standards

Overall

The login popup works well and only minor sytax code standards need to be fixed
Scaling is works well up to 1080p if bigger we have to impliment further changes to resizeing(not an issue at the moment)
Working Login/Register is not intended to work yet an will be implimented in later issue.
Overall can be merged only minor sytax/codestandard problems

Login popup window works well. ### What is checked - Open/close logic It starts open and renders without problems, closing window by pressing "esc" or clicking outside of popup window works. Its possible to re-open the login window by pressing "show login modal"button. - Fix whitespaces in frontend/src/app/theme.css Should be 2 white spaces after : documented in [CSS Standards](https://git.webug.se/Andras/BoundlessFlowCampus2K/wiki/CSS-Standards#formatting) ``` css /* Färger */ --color-bg: light-dark(#f4f5f7, #333333); --color-text: light-dark(#111827, #ffffff); /*Card styling*/ --card-color-bg: light-dark(#ffffff, #181818); --card-border: 1px solid light-dark(#e1e4e8, #afafaf); --card-box-shadow: 0 1px 3px light-dark(#111827, #ffffff); --card-title-color: light-dark(#111827, #ffffff); /* Login styling */ --login-background-color: rgb(from var(--color1) r g b / 50%); --login-button-color: var(--color3); --guest-button-color: var(--color2); --button-text-color: light-dark(#ffffff, #111827); --login-button-hover-color: var(--color2); --guest-button-hover-color: var(--color1); --forgot-text-color: #0969a8; --forgot-hover-color: #a0a5a9; ``` ![](/attachments/076ed7fe-5219-4d08-9d13-0043bf2f9ed6) - LoginModal.module.css fix The white spaces in the css file is ok now and according to standards. - LoginModal.js Syntax good and according to js standards ### Overall The login popup works well and only minor sytax code standards need to be fixed Scaling is works well up to 1080p if bigger we have to impliment further changes to resizeing(not an issue at the moment) Working Login/Register is not intended to work yet an will be implimented in later issue. Overall can be merged only minor sytax/codestandard problems

Skärmbild 2026-04-15 091332.png

81 KiB

c24danli added

reviewed

and removed

needs review

labels

2026-04-15 08:07:22 +00:00

c24elipe added 1 commit

2026-04-15 08:10:39 +00:00

Implement fixes from review #261 (comment) 0303bc1882

c24elipe commented