Feedback/ Advice on the setup

[unborn bronze]

create separate component for each sign in sign up reset forgot

and for logout create service , so you can injects you service in anywhere

[fickle night]

Registering is a process that should be in the AuthComponent since that component is all about those kind of processes
No. Logging in and registering are two different things, displaying two different forms, feedbacks, etc. There's no reason to mix the two in a single component. Same for the logout: all you need is a button in the navbar to do that. If you really want to wrap this button into a logout component, then fine, but it shouldn't be the same component as the one used for logging in.
All these components can use a single auth service though.

[random crown]

I have indeed an AuthService which I injected in my Authcomponent originally. I should also create a user service for storing the user data for later reference, but thats a feature. 😉

[random crown]

thank you for your feedback. Would this suggest i have the following components?

- LoginComponent
- RegisterComponent
- LogoutComponent

This is what i for example do now in my AuthComponent.

<div *ngIf="(authUser$ | async) as user else unauthenticated">
  <span class="me-2">Ingelogd als: <b>{{ user.email }}</b></span>
  <button class="btn btn-primary" (click)="logout()">Uitloggen</button>
</div>

<ng-template #unauthenticated>
  <form class="d-flex form-inline" (ngSubmit)="login()" novalidate>
    <input class="form-control me-2" name="email" type="email" [(ngModel)]="user.email" placeholder="Email" aria-label="Email">
    <input class="form-control me-2" name="password" type="password"[(ngModel)]="user.password" placeholder="Wachtwoord" aria-label="Wachtwoord">
    <button class="btn btn-primary" type="submit">Login</button>
  </form>
</ng-template>

<!-- <ngb-alert class="d-flex form-inline" *ngIf="alertShow" type="warning" (closed)="closeAlert()">{{ alertMessage }}</ngb-alert> -->
<ngb-toast class="position-absolute" header="Melding" *ngIf="alertShow" (hide)="closeAlert()">
  {{ alertMessage }}
</ngb-toast>

[fickle night]

Yes. The LogoutComponent is probably a bit overkill though, since it's basically just a button.

[random crown]

just for the sake of reusability 🤣

Since it would be weird to inject an AuthService in my NavComponent.

[fickle night]

If you ever want to display a logout button elsewhere, it probably won't have the same look as the one in the navbar. Reusability is about using the same service.

[random crown]

Would rather inject it in an LogoutComponent, since thats the component that needs it.

[random crown]

Aha, that way!

It still feels weird for me to inject an AuthService then into a NavComponent then. Or is this just something I need to learn?

[unborn bronze]

take a look at this article

https://www.positronx.io/full-angular-firebase-authentication-system/

[upbeat imp]

I don't think a logout button component is wrong, it helps encapsulating as you are saying. A logout button is a button with a specific purpose, which makes sense as a component.

Even more so, if the login and login buttons are on the same place, I tend to like some kind of auth-button that ensures to show the correct button based on the authentication state.

I also believe that having an AuthComponent that can display LoginComponent and RegisterComponent can be a good idea, depending on what you are doing. You should still seperate both Login and Register properly, but being able to easily switch to Register when on the Login page, can be very convenient. Having said that, having them both on their own route can also work, but that;s more of a design decision, either way you should seperate things nicely.

[random crown]

What about the login form and eventually the register stuff?

[upbeat imp]

What do u mean ?

[random crown]

you say that it could be handy if there would be an auth-button for displaying the correct button. Do you mean that you also have other components for the form behind the button?

[upbeat imp]

What components ?

[random crown]

- auth-button
- login-form
- register-form

i am gonna now for this

https://ng-bootstrap.github.io/#/components/nav/examples
this cant be the way to implement a navbar right?

[upbeat imp]

I cant see why these are behind that button...

[upbeat imp]

Why not ?

[random crown]

since auth-button only focuses on the button and not the full form

[random crown]

Well, if i have my structure as followed:

  <hr>
  <app-nav></app-nav>

  <router-outlet></router-outlet>
</div>

  <div class="container">
    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="navbar-nav me-auto mb-lg-0">
      <li [ngbNavItem]="1" class="nav-item">
        <a class="nav-link" href="#">Nav Item 1</a>
      </li>
      <li [ngbNavItem]="1" class="nav-item">
        <a class="nav-link" href="#">Nav Item 2</a>
      </li>
    </ul>


  </div>
</nav>

and when u start the app it goes to this page: (home-page.component)

<div *ngIf="true; then loginBlock else registerBlock"></div>
<ng-template #loginBlock>Content to render when condition is true.</ng-template>
<ng-template #registerBlock>Content to render when condition is false.</ng-template>

Based on which route you selected you should trigger the if-statement to display the correct form.

[upbeat imp]

If routing is involved to display one or the other, they could just be different routes and no need for the ngIf, unless I misunderstand.

[random crown]

What youre saying is actually correct.

I just wanted a content-switch based on the selected route

[upbeat imp]

Thats what the router outlet is for.

[random crown]

thats what i have in my root. Because when logged in, you should not see the home-page anymore

[upbeat imp]

You can have nested router outlets.

[random crown]

Okay then i gonna try that

[upbeat imp]

https://blog.devgenius.io/the-art-of-nested-router-outlets-in-angular-dafb38245a30

[random crown]

My nav is in the root. so it cant work?

[upbeat imp]

why not?

[random crown]

Since i have it now as this:
app.component.html

<div class="container bg-light flex-content-center">
  <hr>
  <app-nav></app-nav>

  <router-outlet></router-outlet>
</div>

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    component:  HomePageComponent,
    children: [
      {
        path: 'inloggen',
        component: AuthComponent
      },
  ]
  },
];

nav-component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <ul class="navbar-nav me-auto mb-lg-0">
      <li class="nav-item">
        <button class="nav-link btn btn-outline" routerLink="login">Inloggen</button>
      </li>
      <li class="nav-item">
        <button class="nav-link btn btn-outline" routerLink="registeren">Registreren</button>
      </li>
    </ul>
  </div>
</nav>

home-page.component.html

<h1 class="text-center">Demo tekst</h1>

<router-outlet></router-outlet>

Now it wont display anything due to the double router-outlet i think. Because when i remove the router-outlet in the page.comp, it displays again but i cant nav

[upbeat imp]

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    component:  HomePageComponent,
    children: [
      {
        path: 'auth',
        component: AuthComponent,
        children: [
          { path: 'login', component: LoginComponent},
          { path: 'registreren', component: RegisterComponent},
        ]
      },
  ]
  },
];

(the above is also part of the link I shared)

<button class="nav-link btn btn-outline" routerLink="auth/login">Inloggen</button>

<button class="nav-link btn btn-outline" routerLink="registeren">Registreren</button>

Now ensure AuthComponent has its own RouterOutlet.

So it knows where to put its children

[random crown]

Does everything need an router-outlet? I am confused honestly 🥲

[upbeat imp]

When we talk about multiple levels of navigation, you need multiple router outlets.

U wanted to show content based on the route.

[random crown]

dont judge my mouse-handwriting 😂

[upbeat imp]

Yeah that could be a singe router outlet.

[random crown]

I understand that this is the way to go:

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    component:  HomePageComponent,
    children: [
      {
        path: 'auth',
        component: AuthComponent,
        children: [
          { path: 'login', component: LoginComponent},
          { path: 'registreren', component: RegisterComponent},
        ]
      },
  ]
  },
];```

However, wouldnt this lead to home/auth/login?

[upbeat imp]

Oh yeah.

[upbeat imp]

Just as this would be home/login

[random crown]

Yeah that would be better

        <button class="nav-link btn btn-outline" routerLink="login">Inloggen</button>
      </li>```

```<h1 class="text-center">Demo tekst</h1>

<router-outlet></router-outlet>

<div>
<app-nav></app-nav>

  <router-outlet></router-outlet>
</div>

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    component:  HomePageComponent,
    children: [
      {
        path: 'login',
        component: AuthComponent
      },
  ]
  },

];```

how can this be so complicated xD

i think the problem lays in the fact thatt the nav is not inside the homepage

anyway, i am gonna give this up since its over 2 hours i spend on this stupido basic thing