Add ability to logout

• New navbar menu item.
• should show based on the state.user.isLoggedIn boolean
• Add logout functionality.
• It should redirect to appropriate page

Open questions:

• Should we redirect to login window or main page @theyokohamalife ?

Copy the localization data to the table headers. The translations should be the same as those found in the add-clinic file.

Mobile screenshot:

We can get a free Open Source account if we meet the Netlify's requirements:

https://www.netlify.com/legal/open-source-policy

open source

• Our current license is not in the list of supported licenses. I think BSD-4 is pretty rare... would we be open to choosing one from the list?
• Remove the copyright mark from the footer (See #111 )

credit Netlify

• Add a link to Netlify somewhere on the page. Usually the footer is a good spot. "You may create your own link, which should read “This site is powered by Netlify”, and include a link back to our home page." (See #111 )

Code of Conduct

• "Features a Code of Conduct at the top level directory of the project repository or prominently in the documentation (with a link in the navigation, footer, or homepage)." 👉🏻 We can add one of the default ones via here

Apply

• Once we meet these requirements, we can submit the form to apply: https://opensource-form.netlify.com/

Post Approval

• Configure it!

Given the primary audience for this site, obviously romaji-first is a must, however it can be beneficial to know the exact Japanese name for establishments when researching. This is probably more important for the long term use of the site than anything near-term.

• Create a column in the database to store a small memo about a clinic.
• Clicking on an information icon should open a dialog for the user to read what it says.
  • An icon like mdi-alert-circle

When adding i18n, we forgot to correctly adjust the html to render the twitter link correctly.

That {0} shouldn't be there. This link may help: https://kazupon.github.io/vue-i18n/guide/interpolation.html

For our admin moderation table, we want to have a kebab/dango menu shown on each row.

should include:

• delete option
• edit option

Login page could use

• a title
• some padding
• Could even use a fancy background is someone is feeling creative! (example: https://discord.com/login)

• The website field should validate that the input is a URL
• All fields should be alphanumeric (? see below for discussion)

https://choosealicense.com/

https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-license-to-a-repository

• add i18n repo as a submodule
• configure i18n linters
• update locale switcher to support new languages
• Automate submodule update
• Write troubleshooting doc for undoing accidental submodule checkins
• Write script in submodule to auto-copy missing keys from en.json to other files
• auto-generate the json for the locale selector
• Wire in machine translation?
• #195

@theyokohamalife, you mentioned on Twitter that you'd like to open-source this, but had some security concerns.

I need to take a deeper look at Nuxt and Firebase to see what's up, but as I suspected, the tokens in the nuxt config are already sent down to the client. Anyone who opens up devtools could grab the apiKey. I don't see anything else in the repo that would be a sensitive key, so if these config values are OK (which I'm assuming they're fine since this is boilerplate Nuxt config stuff), then we should be OK.

here's how it ends up in the minified code:

var Et = {
          apiKey: "<removed>",
          authDomain: "<removed>",
          databaseURL: "<removed>",
          projectId: "<removed>",
          storageBucket: "<removed>",
          messagingSenderId: "<removed>
          appId: "<removed>",
          measurementId: "<removed>",
        },

So, if you still want to open source this, that should be possible, but we'd need to confirm the existing values exposed in the client are in fact not sensitive (I'm guessing it's fine but I haven't used Nuxt or Firebase before).

• Avoid white against orange

Helpful tools

• Use this tool to find other places for improvement: https://wave.webaim.org/
• here's a good tool for picking colors: https://webaim.org/resources/contrastchecker/
• Chrome DevTools (Jump to "Diving Into The DevTools")

#26 (comment)

Blocked by #31

The data set is small for now, but as it grows, this will become increasingly more valuable

• Made data calls smaller which means
  • saves money (less data transferred)
  • faster UI response time
  • less js rendering on client side.

The css is currently inlined in the html.

We should split this out so it can be cached on the client side.

Sometimes the navigation drawer doesn't show the links on mobile until refreshing the page a few times.

Users should be able to close the alerts that appear at the top of the page.

• Create a variable to store the state of the alert? Might not be needed with vuetify
• Update the current alert to one that can be closed

See list here: https://validator.w3.org/nu/?doc=https%3A%2F%2Ffindadocjp.org%2F

Hide Login navbar component if logged in.

• Should hide the option if user is logged in
• Should probably provide an admin option instead based on state.user.isLoggedIn

We filed this one during the initial ticket generation, but given that Netlify does the publishing for us, is there anything missing?

they're a little tight together. IMO, would look better visually spaced a bit.

• Create a new column for the button
• Clicking the button should open the moderation dialog instead of clicking on the row

Nuxt is splitting the js code into a bunch of bundles. We should optimize this.

Dev Steps:

• Identify optimal bundle split quantity for our app.
• Create a vendor bundle for dependencies
• (Optional) create a bundle for code that changes less frequently and can be cached.

In general, we can use this.$t("whatever") in the script.

But in the validations, this wasn't working.

We found a similar issue on Stack Overflow: https://stackoverflow.com/questions/57568660/using-i18n-in-nuxt-plugin

We also have been asking in Discord:

Update: Discord member tells us "You have scope problem with your syntax" https://discord.com/channels/473401852243869706/484007829498232832/857161596546580500

Right now the dialog just closes when a user adds a clinic or reports one. There's nothing that indicates that their request went through. We should add a small notification somewhere on the screen.

Make the table header font slightly bigger so it's easier to read, but not too bad that it changes the layout of the table.

Should we inject configuration variables such as API keys into the build via Netlify?

It could be a good security and modularity practice. This page has info:

https://docs.netlify.com/configure-builds/environment-variables/

It would be cool to feature embedded tweets from people who used our site on a testimonials page.

Here's some good news: https://twitter.com/TDRPlans/status/1405834015072874497

Title says it all!

• eslint
• prettier
• husky
• github action (does this duplicate something in netlify?)
• prettier gh action
• fix prettier gh action
• toughen up pretier on husky
• should we consider a stronger code style? This one is very popular. @theyokohamalife let me know your thoughts: https://www.npmjs.com/package/eslint-config-airbnb

We want to have a consistent design/ experience for notifications and user status messages.

• decide what framework to use
• implement it.
• Decide on a style and position. (top left, red for errors, black for default, etc.)

I have a few suggestions for the Table UI to better match Material UI styling

1. Use the same button styling between the "flag" and "note", e.g. remove the blue border and have them both be icons only. Ensure that the icons are the same size and both from the Material set.
2. "Click for more info" is a bit vague. Replace with the URL of the website (truncate to character limit and add '...' if too long)
3. Replace the word "Flag" with "Report" (This requires an i18n change which now must be handled via the other repo)

• Update the search field label to say Search by location or clinic name or something similar to help users.

Shield status badges can be pretty fun:

https://shields.io/

I'm thinking we could add some for Netlify build, license, Slack, Kofi link.

What do you think? @theyokohamalife

• Create a column with a flag button so users can report a post if it needs changes or to be removed.

Create a news section using Nuxt's CMS to share latest information in multiple languages.

If/When we make this public, the codeowners feature will be enabled. Let's put the file back in that case

A note isn't appearing for Machinoma clinic even though it has a note field in the db.

Variable state is lost when pages refresh.

We need an admin version of the cancellation table for moderating existing entries.

• only available in admin page/logged in status
• should have the same columns as the user-facing table
• additional kebab/dango menu (separate github issue)
  • delete option
  • edit option

#26 (comment)

Right now, the list of locales for the site menu exists directly in Toolbar.vue like so:

export default {
  data: () => ({
    drawer: null,
    locales: [
      { title: "العربية", value: "ar" },
      { title: "中文", value: "zh_CN" },
      { title: "Nederlands", value: "nl" },
      { title: "English", value: "en" },
      { title: "Filipino", value: "fil" },
      { title: "Français", value: "fr" },
      { title: "Deutsch", value: "de" },
      { title: "Bahasa Indonesia", value: "id" },
      { title: "Bahasa Melayu", value: "ms" },
      { title: "italiano", value: "it" },
      { title: "日本語", value: "ja" },
      { title: "한국어", value: "ko" },
      { title: "नेपाली", value: "ne" },
      { title: "Português", value: "pt" },
      { title: "Spanish", value: "es" },
      { title: "ไทย", value: "th" },
      { title: "Tiếng Việt", value: "vi" },
    ],
  }),

We should move this into the data/ directory as JSON and import here to separate data and logic.

• Moderators should be prompted to confirm they want to delete a submission

• Update table so that moderators can edit fields before approving submissions. Something like https://vuetifyjs.com/en/components/data-tables/#crud-actions

The pagination buttons don't allow the user to view the entries on the last page.

As @ermish pointed out, we're loading about 500kb of fonts 😱 but it looks like there's just one offender: the material icons

Just glancing at the repo, it looks like these icons are loaded somewhere from the internals of Nuxt, but I'm not sure yet. For example, the Alert component has a little "i" icon, but that just seems to be a Nuxt component.

An Admin Dashboard button should show in the nav drawer if an admin returns to the site and is still logged in.

This might improve client side perf, but we need to maintain a good user experience. To do this, we want to show "loading zones" (think when the page isn't loaded and there's an empty shell with a loading icon, until it's loaded)

Acceptance Criteria

• Move nuxt to static mode
  This will make the UI load dynamically.
• add loading zones
  Since the user may see sections loading async, we need nice loading visualizations before the table and content is rendered. Aka “loading zones”