feat: login success page (#1849)

* feat: login success page

* fix: script import on mfa verify

internal/ui/login/handler/callback_handler.go

@@ -1,11 +0,0 @@
-package handler
-
-import (
-	"github.com/caos/zitadel/internal/domain"
-	"net/http"
-)
-
-func (l *Login) redirectToCallback(w http.ResponseWriter, r *http.Request, authReq *domain.AuthRequest) {
-	callback := l.oidcAuthCallbackURL + authReq.ID
-	http.Redirect(w, r, callback, http.StatusFound)
-}

internal/ui/login/handler/login_success_handler.go

@@ -0,0 +1,45 @@
+package handler
+
+import (
+	"net/http"
+
+	"github.com/caos/zitadel/internal/domain"
+)
+
+const (
+	tmplLoginSuccess = "login_success"
+)
+
+type loginSuccessData struct {
+	userData
+	RedirectURI string `schema:"redirect-uri"`
+}
+
+func (l *Login) redirectToLoginSuccess(w http.ResponseWriter, r *http.Request, id string) {
+	http.Redirect(w, r, l.renderer.pathPrefix+EndpointLoginSuccess+"?authRequestID="+id, http.StatusFound)
+}
+
+func (l *Login) handleLoginSuccess(w http.ResponseWriter, r *http.Request) {
+	authRequest, _ := l.getAuthRequest(r)
+	if authRequest != nil {
+		if !(len(authRequest.PossibleSteps) == 1 && authRequest.PossibleSteps[0].Type() == domain.NextStepRedirectToCallback) {
+			l.renderNextStep(w, r, authRequest)
+			return
+		}
+	}
+	l.renderSuccessAndCallback(w, r, authRequest, nil)
+}
+
+func (l *Login) renderSuccessAndCallback(w http.ResponseWriter, r *http.Request, authReq *domain.AuthRequest, err error) {
+	var errType, errMessage string
+	if err != nil {
+		errMessage = l.getErrorMessage(r, err)
+	}
+	data := loginSuccessData{
+		userData: l.getUserData(r, authReq, "Login Successful", errType, errMessage),
+	}
+	if authReq != nil {
+		data.RedirectURI = l.oidcAuthCallbackURL
+	}
+	l.renderer.RenderTemplate(w, r, l.renderer.Templates[tmplLoginSuccess], data, nil)
+}

internal/ui/login/handler/renderer.go

@@ -66,6 +66,7 @@ func CreateRenderer(pathPrefix string, staticDir http.FileSystem, staticStorage
 		tmplChangeUsernameDone:       "change_username_done.html",
 		tmplLinkUsersDone:            "link_users_done.html",
 		tmplExternalNotFoundOption:   "external_not_found_option.html",
+		tmplLoginSuccess:             "login_success.html",
 	}
 	funcs := map[string]interface{}{
 		"resourceUrl": func(file string) string {
@@ -252,7 +253,7 @@ func (l *Login) chooseNextStep(w http.ResponseWriter, r *http.Request, authReq *
 			l.chooseNextStep(w, r, authReq, 1, err)
 			return
 		}
-		l.redirectToCallback(w, r, authReq)
+		l.redirectToLoginSuccess(w, r, authReq.ID)
 	case *domain.ChangePasswordStep:
 		l.renderChangePassword(w, r, authReq, err)
 	case *domain.VerifyEMailStep:

internal/ui/login/handler/router.go

@@ -35,6 +35,7 @@ const (
 	EndpointExternalRegisterCallback = "/register/externalidp/callback"
 	EndpointRegisterOrg              = "/register/org"
 	EndpointLogoutDone               = "/logout/done"
+	EndpointLoginSuccess             = "/login/success"
 	EndpointExternalNotFoundOption   = "/externaluser/option"
 
 	EndpointResources        = "/resources"
@@ -82,5 +83,6 @@ func CreateRouter(login *Login, staticDir http.FileSystem, interceptors ...mux.M
 	router.PathPrefix(EndpointResources).Handler(login.handleResources(staticDir)).Methods(http.MethodGet)
 	router.HandleFunc(EndpointRegisterOrg, login.handleRegisterOrg).Methods(http.MethodGet)
 	router.HandleFunc(EndpointRegisterOrg, login.handleRegisterOrgCheck).Methods(http.MethodPost)
+	router.HandleFunc(EndpointLoginSuccess, login.handleLoginSuccess).Methods(http.MethodGet)
 	return router
 }

internal/ui/login/static/i18n/de.yaml

@@ -200,6 +200,11 @@ ExternalNotFoundOption:
   Link: Verlinken
   AutoRegister: Automatisches registrieren
 
+LoginSuccess:
+  Title: Erfolgreich eingeloggt
+  AutoRedirect: Du wirst automatisch zurück in die Applikation geleitet. Danach kannst du diese Fenster schliessen.
+  Redirected: Du kannst diese Fenster nun schliessen.
+
 LogoutDone:
   Title: Ausgeloggt
   Description: Du wurdest erfolgreich ausgeloggt.

internal/ui/login/static/i18n/en.yaml

@@ -190,6 +190,11 @@ RegistrationOrg:
   PrivacyLinkText: privacy policy
   PrivacyLink: https://zitadel.ch/pdf/privacy.pdf
 
+LoginSuccess:
+  Title: Login successful
+  AutoRedirect: You will be directed back to your application automatically. If not, click on the button below. You can close the window afterwards.
+  Redirected: You can now close this window.
+
 LogoutDone:
   Title: Logged out
   Description: You have logged out successfully.

internal/ui/login/static/resources/scripts/login_success.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    autoSubmit();
+});
+
+function autoSubmit() {
+    let form = document.getElementsByTagName('form')[0];
+    if (form) {
+        let button = document.getElementById("redirect-button");
+        if (button) {
+            button.addEventListener("click", function (event) {
+                location.reload();
+                event.preventDefault();
+            });
+        }
+        form.submit();
+    }
+}

internal/ui/login/static/templates/login_success.html

@@ -0,0 +1,32 @@
+{{template "main-top" .}}
+
+
+<div class="lgn-head">
+    <h1>{{t "LoginSuccess.Title"}}</h1>
+
+    {{ template "user-profile" . }}
+
+    {{if .RedirectURI}}
+    <p>{{t "LoginSuccess.AutoRedirect"}}</p>
+</div>
+
+<form action="{{ .RedirectURI }}" method="GET">
+
+    <input type="hidden" name="id" value="{{ .AuthReqID }}" />
+
+    {{ template "error-message" .}}
+
+    <div class="lgn-actions">
+        <span class="fill-space"></span>
+        <button id="redirect-button" class="lgn-raised-button lgn-primary">{{t "Actions.Next"}}</button>
+    </div>
+
+</form>
+
+<script src="{{ resourceUrl "scripts/login_success.js" }}"></script>
+{{else}}
+    <p>{{t "LoginSuccess.Redirected"}}</p>
+</div>
+{{end}}
+
+{{template "main-bottom" .}}

internal/ui/login/static/templates/mfa_verify.html

@@ -43,6 +43,6 @@
     {{ end }}
 </form>
 
-<script src="{{ resourceUrl " scripts/form_submit.js" }}"></script>
+<script src="{{ resourceUrl "scripts/form_submit.js" }}"></script>
-<script src="{{ resourceUrl " scripts/default_form_validation.js" }}"></script>
+<script src="{{ resourceUrl "scripts/default_form_validation.js" }}"></script>
 {{template "main-bottom" .}}