💄 [#1309] Make upload widget correspond with design

[jiromaykin]

issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/1309

multiple tasks:

• - needs custom template for input with type=file
• - form needs to be overridden with a render_form
• - toggle open/close interface to show/hide file-upload input field
• - show filename info
• - show filesize info
• Disable submit button when no file is chosen and on cancel

other task:

• - fix failing test "@requests_mock.Mocker() /class TestCaseDetailView(ClearCachesMixin, WebTest):'
• - errors need to be shown and scrolled into view
• - client-side errorhandling (browser defaults) needs to be overriden somehow, so the error notifications actually gets shown (with "novalidate"?)
• - add reset 'close' button to clear the field and the information

[codecov-commenter]

Codecov Report

Merging #580 (0ef4dee) into develop (112f337) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head 0ef4dee differs from pull request most recent head 01546ec. Consider uploading reports for the commit 01546ec to get more accurate results

@@           Coverage Diff            @@
##           develop     #580   +/-   ##
========================================
  Coverage    96.17%   96.17%           
========================================
  Files          564      564           
  Lines        19795    19798    +3     
========================================
+ Hits         19037    19040    +3     
  Misses         758      758           

Impacted Files	Coverage Δ
src/open_inwoner/accounts/forms.py	97.93% <ø> (ø)
.../open_inwoner/components/templatetags/form_tags.py	96.15% <100.00%> (+0.09%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[vaszig]

Should we maybe use a different name for id and class?

[jiromaykin]

@vaszig I've done a bit of research on naming conventions, since we don't have one standard yet in this project.
I found it's not technically necessary, but 'good practice' to have different names for ID's and classes in HTML.
Plus: I will set ID-names with an underscore from now on, and classes with a dash (because for classes the dash can be used as a modifier). I was using camelCase for some ID names, because of javascript, but that's not useful for CSS.

[vaszig]

Can't we use only variable "i" here?Why do we need "max" as well?

[Bartvaderkin]

My guess is to save the limit condition (because .length is a calculated property)

But for-i loops are terrible, it is much better preferred to use .forEach() on the queryselector result, something like:

getFormInfo.forEach(elem => { elem.style.display = 'none'; })

(a for-of loop would be nice but I don't know if that works with every weird JS itearble thing)

[jiromaykin]

Thanks @Bartvaderkin and @vaszig - I shall attempt to improve this (amongst all the other things).

[jiromaykin]

@vaszig and @Bartvaderkin : I have rebased this one to develop so it works with the CMS.

[alextreme]

Discussed, can be reviewed again by @vaszig . We might need to revisit setting the style display=none in show-file-info.js, but this can be double-checked on the testenvironment after merging

[vaszig]

It seems really nice!I don't see any problems concerning cps headers in my local environment, so we have to make sure we don't have any on the other environments as well.