feat(page): check activation account

[asaadam]

Closes #28

Description

Current Tasks

Todo:

• Add button in login page to redirect to check activation account page
• Form title
• Form text input
• Form button check
• Message Error user is not activated
• Message Error user not found
• Message Success user is activated

[netlify]

✔️ Deploy Preview for silacak ready!

🔨 Explore the source changes: b6720e5

🔍 Inspect the deploy log: https://app.netlify.com/sites/silacak/deploys/612625a0aab996000791a723

😎 Browse the preview: https://deploy-preview-41--silacak.netlify.app

[resir014]

I think it's about time we start implementing a form library before it's too late. What do you think, @zainfathoni?

For ease of use, we can use one of these two form libraries:

• Formik (bundlephobia)
• react-hook-form (bundlephobia)

[asaadam]

also, I want to ask,
about fetch lib, do we need to implement fetch library?
like axios or react-query?

[zainfathoni]

I think it's about time we start implementing a form library before it's too late. What do you think, @zainfathoni?

For ease of use, we can use one of these two form libraries:

• Formik (bundlephobia)
• react-hook-form (bundlephobia)

Agreed, let's use react-hook-form, since it's more intuitive for us to use hooks, and we can also extract the hooks into custom hooks easily.
Moreover, it promises a good performance with a very small bundle size. We should always optimize for performance in this project since one of the most significant users' complaints was the performance of the app.

[zainfathoni]

also, I want to ask,
about fetch lib, do we need to implement fetch library?
like axios or react-query?

Please just use fetch, so we don't add unnecessary overhead to the app. Again, we should always optimize for performance in this project since one of the most significant users' complaints was the performance of the app.

You can read more about it in our principles.

[resir014]

@asaadam @zainfathoni If we still want to add hooks to make fetching easier, we can also use swr which is a more lightweight version of react-query.

• Bundle stats for react-query
• Bundle stats for swr

But if it's possible, please still use regular fetch.

[zainfathoni]

@asaadam @zainfathoni If we still want to add hooks to make fetching easier, we can also use swr which is a more lightweight version of react-query.

• Bundle stats for react-query
• Bundle stats for swr

But if it's possible, please still use regular fetch.

That's a good idea. I think fetch would be too verbose since we will be performing a lot of API requests on the client-side, unlike our wargabantuwarga.com website where almost no API calls are made on the client-side.
Therefore, let's use swr to perform our API interactions.

[asaadam]

hello mas @zainfathoni and mas @resir014

should I declare this orange color on tailwind.config.js ?

[zainfathoni]

What do you think, @resir014?

In my opinion, we should simply use the existing color palette to reduce the cognitive load of picking which colors to use. And since we don't need to achieve a pixel-perfect standard for this MBP iteration, I think a little bit of color deviation should be tolerated as well.

[asaadam]

hello, again mas @zainfathoni and mas @resir014 could you check my implementation on SWR and react-hook-form?

I think it gonna be a lot of corrections 😅 because it's my first time using that lib.

[asaadam]

also, I got cors response, should I create reverse-proxy?

[codecov]

Codecov Report

Merging #41 (b37580d) into main (81d6479) will decrease coverage by 2.71%.
The diff coverage is 87.50%.

❗ Current head b37580d differs from pull request most recent head b6720e5. Consider uploading reports for the commit b6720e5 to get more accurate results

@@            Coverage Diff             @@
##             main      #41      +/-   ##
==========================================
- Coverage   58.24%   55.52%   -2.72%     
==========================================
  Files          61       52       -9     
  Lines         455      416      -39     
  Branches      172      172              
==========================================
- Hits          265      231      -34     
+ Misses        184      179       -5     
  Partials        6        6              

Impacted Files	Coverage Δ
components/check-account/check-account-banner.tsx	80.00% <80.00%> (ø)
components/check-account/check-account-form.tsx	100.00% <100.00%> (ø)
pages/registration-status.tsx	100.00% <100.00%> (ø)
components/ui/button/outline-anchor-button.tsx	33.33% <0.00%> (-66.67%)	⬇️
...ponents/layout/dashboard/dashboard-page-header.tsx	50.00% <0.00%> (-50.00%)	⬇️
components/layout/dashboard/dashboard-sidebar.tsx	64.00% <0.00%> (-3.65%)	⬇️
pages/index.tsx	100.00% <0.00%> (ø)
components/tracing/confirmed-cases-card.tsx	100.00% <0.00%> (ø)
components/close-contact/close-contact-card.tsx
pages/dashboard/tracing/[caseId]/index.tsx
... and 16 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 022e593...b6720e5. Read the comment docs.

[asaadam]

as per @ramarahmanda says, I remove SWR implementation.
and just finish layouting first

[zainfathoni]

Please test your new files so that it passes the codecov CI checks, @asaadam. Thanks! 🙏

[asaadam]

Please test your new files so that it passes the codecov CI checks, @asaadam. Thanks! 🙏

done yak mas, please check it again

[zainfathoni]

@all-contributors please add @asaadam for testing

[allcontributors]

@zainfathoni

I've put up a pull request to add @asaadam! 🎉