Work in progress (v0.7.0-alpha)

[knadh]

I've been spending time on and off on:

• A tiny auth lib to add users and auth after not being able to find a simple enough package. AuthBoss is complex and large.
• A new settings dashboard.
• Scrapping React + AntDesign UI. This was a hard decision, but React + Ant is a mess. Despite having written the frontend, I've been unable to internalise or intuitively navigate the mess that is logic interspersed JSX of Ant Design components. I'm considering VueJS + Buefy (10x smaller than Ant). At least templates will look like templates. Would rather do this now when it's alpha than be locked-in. I am unable to recollect the exact reasons for having made this choice in the first place.

[tttp]

Hi,

Is this a ant specific issue?
I've been using material-ui + react, I still find a bit weird JSX but with enough hooks, I think it's getting fairly natural to use and navigate

Could you elaborate what's the issue you face with React+Ant? May be I can help with an easier path out of the mess than a full rewrite?

... and at least we'll remember why you made this choice in the first place for posterity :)

If you want to/have already switched to Vue, go ahead, it's a great framework (too).

[knadh]

I was in fact going to write a post about this highlighting the specific pain points. I find JSX quite messy. Quite a bit of cognitive load for me to read and parse scattered JSX + logic. Also find it very difficult to mentally compose excessively "componentised" React UIs. In listmonk's case, Ant is the real culprit. It's weirdness exacerbates these issues.

I've already gotten started with Vue and was able to make quite a bit of progress in very little time. Using Buefy (much smaller and lighter than Ant). I'd never used this before, but it was trivial to get started with, unlike Ant.

To illustrate: Ant table setup with logic and templates interspersed. Elsewhere, the rendering.

Here's the table in Vue + Buefy. The whole table in one place. Self-explanatory markup.

 <b-table :data="lists.results" :hoverable="true" :loading="!isLoading">
    <template slot-scope="props">
        <b-table-column field="name" label="Name">
            <router-link to="/">
            {{ props.row.name }}
            </router-link>
        </b-table-column>
        <b-table-column field="type" label="Type">
            <b-tag>{{ props.row.type }}</b-tag>
        </b-table-column>
        <b-table-column field="subscribers" label="Subscribers">
            {{ props.row.subscriberCount }}
        </b-table-column>
        <b-table-column field="created" label="Created">
            {{ niceDate(props.row.createdAt) }}
        </b-table-column>
        <b-table-column field="updated" label="Updated">
            {{ niceDate(props.row.updatedAt) }}
        </b-table-column>
        <b-table-column class="actions">
            <router-link to="/campaign/new?list_id=${props.row.id}">
            <b-tooltip label="Send campaign" type="is-dark">
                <b-icon icon="rocket-launch-outline" size="is-small"></b-icon>
            </b-tooltip>
            </router-link>
            <a href="" v-on:click.prevent="toggleEditForm">
            <b-tooltip label="Edit list" type="is-dark">
                <b-icon icon="pencil-outline" size="is-small"></b-icon>
            </b-tooltip>
            </a>
            <a href="" v-on:click.prevent="">
            <b-tooltip label="Delete list" type="is-dark">
                <b-icon icon="trash-can-outline" size="is-small"></b-icon>
            </b-tooltip>
            </a>
        </b-table-column>
    </template>
</b-table>

Here's a view on Spectrum, a popular chat app written in React. It is split into so many tiny parts, it's very difficult to visualise the UI.

I find Vue's approach much more natural and "clean". Better separation of UI + logic. Entirely subjective I guess. I thought I'd replace Ant with something else, but then I figured I'd rather just use the opportunity to put in a bit of extra effort and switch away from React anyway. That said, as cliche as it sounds, the whole JS/frontend ecosystem is quite painful in general :)

[tttp]

I feel your pain, and indeed, the component model works best when each component is used multiple times IMO, otherwise, it's just scattering the information around and it becomes messy.

As for your react example, it's... I feel your pain ;)

In my projects, I'm trying to stick to only hooks and no classes, IMO it makes react more clear to use, and if I have a bit of layout to run, material-ui:

https://material-ui.com/components/tables/

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

But yeah, your view example where you only define the columns feels more natural. dc.js as an option for a similar syntax on the d3 world, and I really like working with it

[knadh]

Yep, agree.

I've made more progress with Buefy in a few hours than I'd done with React + Ant in days. The UI is visibly snappier and is more accessible (tab, enter, focus etc. works better than Ant). Just figured that tables (bulk of the listmonk UI) automatically turns into responsive cards, which is quite cool.

[tttp]

Really nice indeed!

…

On Sat, 6 Jun 2020 at 18:48, Kailash Nadh ***@***.***> wrote: Yep, agree. I've made more progress with Buefy in a few hours than I'd done with React + Ant in days. The UI is visibly snappier and is more accessible (tab, enter, focus etc. works better than Ant). Just figured that tables (bulk of the listmonk UI) automatically turns into responsive cards, which is quite cool. [image: image] <https://user-images.githubusercontent.com/547147/83949764-2da0a780-a843-11ea-87a2-92a6d973364e.png> [image: image] <https://user-images.githubusercontent.com/547147/83949778-4b6e0c80-a843-11ea-95b5-2857e91d36f0.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#125 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7LKWOKHL27DWHWFJAHDTRVJXMTANCNFSM4NSUIFEA> .

[ghost]

Looking forward to the auth lib!

[tttp]

don't forget to update the description on github ;) "High performance, self-hosted newsletter and mailing list manager with a modern dashboard. Go + React".

[knadh]

Yeah :)

Been spending evenings on the port. Almost there.

[digitalsanity]

I think it's also worth taking a look at Authelia if you haven't yet--it's a golang based authentication portal service/container for SSO/2FA and lots of features and has been gaining some traction:

https://github.com/authelia/authelia

It's using https://github.com/duosecurity/duo_api_golang and https://github.com/dgrijalva/jwt-go

[knadh]

@digitalsanity Authelia is a centralised authentication server though. However, what's required here is a simple native login system (which can potentially be plugged into something like Authelia for SSO too).

[heyakyra]

Wow, great work on the frontend port! I was going to suggest https://elm-lang.org/ (https://github.com/elm/compiler) but looks like Buefy has worked out very nicely

Which auth libraries have you already considered other than Authboss? Have you looked at these:

• https://github.com/markbates/goth
• https://github.com/go-chi/jwtauth

[knadh]

Work on the new UI is complete. It's available on the vue branch. Working on a few minor items on the to-do after which I'll push the next release. Vue+Buefy turned out to be headache-free choice.

@heyakyra I've checked out those libs and they can be used, but what is required is the management/CRUD scaffolding (new user, forgot password, edit profile etc.)

[RaghavSood]

Might I suggest using https://oauth2-proxy.github.io/oauth2-proxy/ for authentication - it supports a number of providers directly (such as Google, Github, etc), in addition to support any generic OpenID compliant provider. I've used it for many of our projects, and it vastly simplifies user handling since scoping etc. can be defined in systems than most companies are already using, and there's no need to implement local password and user management.

We are already using this in front of listmonk internally to restrict admin access, and it works out well (although of course, permissions aren't set up, but that's fine for us for now)

It also prevents users from having to manage yet another credential.

[knadh]

@RaghavSood OAuth2 proxy is quite cool and listmonk can support it, but it's tricky not to have at least basic native auth. I'd love to not re-invent the wheel, but the app should ideally stand alone with zero no external dependencies.

[knadh]

The settings dashboard is the last big milestone in the upcoming release (v0.7.0-alpha).

[GranularSystems]

@RaghavSood OAuth2 proxy is quite cool and listmonk can support it, but it's tricky not to have at least basic native auth. I'd love to not re-invent the wheel, but the app should ideally stand alone with zero no external dependencies.

Might I suggest https://github.com/ory/kratos then. It is still in development but looks very promising.

[knadh]

@GranularSystems ory/kratos looks very interesting but it still looks like it's a standalone server that has to be run externally. Will dig a bit deeper.

[janheinrichmerker]

After a quick look I think goth looks promising.
Their sample is really simple, and it's straightforward to configure authentication endpoints.

[knadh]

The settings dashboard + UI is complete. config.toml now only has DB configuration and all configuration has moved to a new settings table. Few minor pending fixes and v0.7.0-alpha should be out this week.

@RaghavSood perhaps you'd like the give the settings branch a spin? (You'll have to alter the DB with this).

[RaghavSood]

Apologies on the delay @knadh - I will try out the settings branch over the weekend!

[knadh]

@RaghavSood no problem. We've pushed the current master to production at work and everything looks good. I think v0.7.0 can be released tomorrow.

Idempotent DB migrations/upgrades are now supported, so any lower version can seamlessly upgrade to the latest DB version with --upgrade.

[knadh]

v0.7.0 is finally out, whew. The next big milestone is definitely full fledged user auth.

[janheinrichmerker]

Very nice indeed!
Just to be sure, is there a way to disable HTTP auth?

[knadh]

Just to be sure, is there a way to disable HTTP auth?

Ye. It's documented in config.toml. You can leave both username and password values empty to disable auth.