fix: login ui for v2 (#3712)

* fix: login ui for v2

* a color

* footer

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

internal/api/ui/login/static/templates/change_password.html

@@ -40,7 +40,7 @@
     {{ template "error-message" .}}
 
     <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
+        <a class="lgn-stroked-button" href="{{ loginUrl }}">
             {{t "PasswordChange.CancelButtonText"}}
         </a>
         <span class="fill-space"></span>

internal/api/ui/login/static/templates/change_username.html

@@ -22,7 +22,7 @@
     {{ template "error-message" .}}
 
     <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
+        <a class="lgn-stroked-button" href="{{ loginUrl }}">
             {{t "UsernameChange.CancelButtonText"}}
         </a>
         <span class="fill-space"></span>

internal/api/ui/login/static/templates/external_register_overview.html

@@ -100,7 +100,7 @@
     {{template "error-message" .}}
 
     <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ registerOptionUrl }}">
+        <a class="lgn-stroked-button" href="{{ registerOptionUrl }}">
             {{t "ExternalRegistrationUserOverview.BackButtonText"}}
         </a>
         <span class="fill-space"></span>

internal/api/ui/login/static/templates/init_user_done.html

@@ -1,28 +1,28 @@
 {{template "main-top" .}}
 
 <div class="lgn-head">
-    <h1>{{t "InitUserDone.Title"}}</h1>
+  <h1>{{t "InitUserDone.Title"}}</h1>
 
-    {{ template "user-profile" . }}
+  {{ template "user-profile" . }}
 
-    <p>{{t "InitUserDone.Description"}}</p>
+  <p>{{t "InitUserDone.Description"}}</p>
 </div>
 
 <form action="{{ loginUrl }}" method="POST">
+  {{ .CSRF }}
 
-    {{ .CSRF }}
+  <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
+  <input type="hidden" name="orgID" value="{{ .OrgID }}" />
 
-    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-    <input type="hidden" name="orgID" value="{{ .OrgID }}" />
-
-    <div class="lgn-actions lgn-reverse-order">
-        <button class="lgn-raised-button lgn-primary" type="submit">{{t "InitUserDone.NextButtonText"}}</button>
-        <span class="fill-space"></span>
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
-            {{t "InitUserDone.CancelButtonText"}}
-        </a>
-    </div>
+  <div class="lgn-actions lgn-reverse-order">
+    <button class="lgn-raised-button lgn-primary" type="submit">
+      {{t "InitUserDone.NextButtonText"}}
+    </button>
+    <span class="fill-space"></span>
+    <a class="lgn-stroked-button" href="{{ loginUrl }}">
+      {{t "InitUserDone.CancelButtonText"}}
+    </a>
+  </div>
 </form>
 
-
 {{template "main-bottom" .}}

internal/api/ui/login/static/templates/link_users_done.html

@@ -1,26 +1,26 @@
 {{template "main-top" .}}
 
 <div class="lgn-head">
-    <h1>{{t "LinkingUsersDone.Title"}}</h1>
-    {{ template "user-profile" . }}
+  <h1>{{t "LinkingUsersDone.Title"}}</h1>
+  {{ template "user-profile" . }}
 
-    <p>{{t "LinkingUsersDone.Description"}}</p>
+  <p>{{t "LinkingUsersDone.Description"}}</p>
 </div>
 
 <form action="{{ loginUrl }}" method="POST">
+  {{ .CSRF }}
 
-    {{ .CSRF }}
+  <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
-    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-
-    <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
-            {{t "LinkingUsersDone.CancelButtonText"}}
-        </a>
-        <span class="fill-space"></span>
-        <button class="lgn-raised-button lgn-primary" type="submit">{{t "LinkingUsersDone.NextButtonText"}}</button>
-    </div>
+  <div class="lgn-actions">
+    <a class="lgn-stroked-button" href="{{ loginUrl }}">
+      {{t "LinkingUsersDone.CancelButtonText"}}
+    </a>
+    <span class="fill-space"></span>
+    <button class="lgn-raised-button lgn-primary" type="submit">
+      {{t "LinkingUsersDone.NextButtonText"}}
+    </button>
+  </div>
 </form>
 
-
-{{template "main-bottom" .}}
+{{template "main-bottom" .}}

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

@@ -36,7 +36,7 @@
         <button class="lgn-raised-button lgn-primary lgn-initial-focus" id="submit-button" type="submit">{{t "Login.NextButtonText"}}</button>
         <span class="fill-space"></span>
         {{if .LoginPolicy.AllowRegister}}
-        <button class="lgn-stroked-button lgn-primary" name="register" value="true" formnovalidate>{{t "Login.RegisterButtonText"}}</button>
+        <button class="lgn-stroked-button" name="register" value="true" formnovalidate>{{t "Login.RegisterButtonText"}}</button>
         {{end}}
     </div>
 

internal/api/ui/login/static/templates/mail_verification.html

@@ -30,7 +30,7 @@
         <span class="fill-space"></span>
 
         {{ if .UserID }}
-        <button type="submit" name="resend" value="true" class="lgn-stroked-button lgn-primary" formnovalidate>{{t "EmailVerification.ResendButtonText"}}</button>
+        <button type="submit" name="resend" value="true" class="lgn-stroked-button" formnovalidate>{{t "EmailVerification.ResendButtonText"}}</button>
         {{ end }}
 
         <a class="lgn-icon-button lgn-left-action" name="resetlinking" value="true" href="{{ loginUrl }}"

internal/api/ui/login/static/templates/mail_verified.html

@@ -1,33 +1,28 @@
 {{template "main-top" .}}
 
 <div class="lgn-head">
-    <h1>{{t "EmailVerificationDone.Title"}}</h1>
-    {{ template "user-profile" . }}
+  <h1>{{t "EmailVerificationDone.Title"}}</h1>
+  {{ template "user-profile" . }}
 
-    <p>{{t "EmailVerificationDone.Description"}}</p>
+  <p>{{t "EmailVerificationDone.Description"}}</p>
 </div>
 
 <form action="{{ loginUrl }}" method="POST">
+  {{ .CSRF }}
 
-    {{ .CSRF }}
+  <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
+  <input type="hidden" name="orgID" value="{{ .OrgID }}" />
 
-    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-    <input type="hidden" name="orgID" value="{{ .OrgID }}" />
-
-    <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
-            {{t "EmailVerificationDone.CancelButtonText"}}
-        </a>
-        <span class="fill-space"></span>
-        <button class="lgn-raised-button lgn-primary" type="submit">
-            {{if .AuthReqID }}
-                {{t "EmailVerificationDone.NextButtonText"}}
-            {{else}}
-                {{t "EmailVerificationDone.LoginButtonText"}}
-            {{end}}
-        </button>
-    </div>
+  <div class="lgn-actions">
+    <a class="lgn-stroked-button" href="{{ loginUrl }}">
+      {{t "EmailVerificationDone.CancelButtonText"}}
+    </a>
+    <span class="fill-space"></span>
+    <button class="lgn-raised-button lgn-primary" type="submit">
+      {{if .AuthReqID }} {{t "EmailVerificationDone.NextButtonText"}} {{else}}
+      {{t "EmailVerificationDone.LoginButtonText"}} {{end}}
+    </button>
+  </div>
 </form>
 
-
 {{template "main-bottom" .}}

internal/api/ui/login/static/templates/mfa_init_done.html

@@ -1,28 +1,28 @@
 {{template "main-top" .}}
 
 <div class="lgn-head">
-    <h1>{{t "InitMFADone.Title"}}</h1>
+  <h1>{{t "InitMFADone.Title"}}</h1>
 
-    {{ template "user-profile" . }}
+  {{ template "user-profile" . }}
 
-    <p>{{t "InitMFADone.Description"}}</p>
+  <p>{{t "InitMFADone.Description"}}</p>
 </div>
 
 <form action="{{ loginUrl }}" method="POST">
+  {{ .CSRF }}
 
-    {{ .CSRF }}
+  <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
+  <input type="hidden" name="mfaType" value="{{ .MFAType }}" />
 
-    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-    <input type="hidden" name="mfaType" value="{{ .MFAType }}" />
-
-    <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
-            {{t "InitMFADone.CancelButtonText"}}
-        </a>
-        <span class="fill-space"></span>
-        <button class="lgn-raised-button lgn-primary" type="submit">{{t "InitMFADone.NextButtonText"}}</button>
-    </div>
+  <div class="lgn-actions">
+    <a class="lgn-stroked-button" href="{{ loginUrl }}">
+      {{t "InitMFADone.CancelButtonText"}}
+    </a>
+    <span class="fill-space"></span>
+    <button class="lgn-raised-button lgn-primary" type="submit">
+      {{t "InitMFADone.NextButtonText"}}
+    </button>
+  </div>
 </form>
 
-
-{{template "main-bottom" .}}
+{{template "main-bottom" .}}

internal/api/ui/login/static/templates/mfa_init_otp.html

@@ -46,7 +46,7 @@
             <i class="lgn-icon-arrow-left-solid"></i>
         </a>
         
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginUrl }}">
+        <a class="lgn-stroked-button" href="{{ loginUrl }}">
             {{t "InitMFAOTP.CancelButtonText"}}
         </a>
         <span class="fill-space"></span>

internal/api/ui/login/static/templates/mfa_prompt.html

@@ -1,41 +1,54 @@
 {{template "main-top" .}}
 
 <div class="lgn-head">
-    <h1>{{t "InitMFAPrompt.Title"}}</h1>
-    {{ template "user-profile" . }}
+  <h1>{{t "InitMFAPrompt.Title"}}</h1>
+  {{ template "user-profile" . }}
 
-    <p>{{t "InitMFAPrompt.Description"}}</p>
+  <p>{{t "InitMFAPrompt.Description"}}</p>
 </div>
 
 <form action="{{ mfaPromptUrl }}" method="POST">
+  {{ .CSRF }}
 
-    {{ .CSRF }}
+  <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
-    <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-
-    <div class="fields">
-        {{ range $provider := .MFAProviders}}
-        {{ $providerName := (t (printf "InitMFAPrompt.Provider%v" $provider)) }}
-            <div class="lgn-radio block">
-                <input id="{{ $provider }}" type="radio" name="provider" value="{{ $provider }}">
-                <label for="{{ $provider }}">{{ $providerName }}</label>
-            </div>
-        {{ end }}
+  <div class="fields">
+    {{ range $provider := .MFAProviders}} {{ $providerName := (t (printf
+    "InitMFAPrompt.Provider%v" $provider)) }}
+    <div class="lgn-radio block">
+      <input
+        id="{{ $provider }}"
+        type="radio"
+        name="provider"
+        value="{{ $provider }}"
+      />
+      <label for="{{ $provider }}">{{ $providerName }}</label>
     </div>
+    {{ end }}
+  </div>
 
-    <div class="lgn-actions">
-        <!-- position element in header -->
-        <a class="lgn-icon-button lgn-left-action" href="{{ loginUrl }}">
-            <i class="lgn-icon-arrow-left-solid"></i>
-        </a>
+  <div class="lgn-actions">
+    <!-- position element in header -->
+    <a class="lgn-icon-button lgn-left-action" href="{{ loginUrl }}">
+      <i class="lgn-icon-arrow-left-solid"></i>
+    </a>
 
-        {{if not .MFARequired}}
-        <button class="lgn-stroked-button lgn-primary" name="skip" value="true" type="submit" formnovalidate>{{t "InitMFAPrompt.SkipButtonText"}}</button>
-        {{end}}
-        <span class="fill-space"></span>
-        <button class="lgn-raised-button lgn-primary" type="submit">{{t "InitMFAPrompt.NextButtonText"}}</button>
-    </div>
+    {{if not .MFARequired}}
+    <button
+      class="lgn-stroked-button"
+      name="skip"
+      value="true"
+      type="submit"
+      formnovalidate
+    >
+      {{t "InitMFAPrompt.SkipButtonText"}}
+    </button>
+    {{end}}
+    <span class="fill-space"></span>
+    <button class="lgn-raised-button lgn-primary" type="submit">
+      {{t "InitMFAPrompt.NextButtonText"}}
+    </button>
+  </div>
 </form>
 
-
-{{template "main-bottom" .}}
+{{template "main-bottom" .}}

internal/api/ui/login/static/templates/mfa_verification_u2f.html

@@ -35,7 +35,7 @@
             <p>{{t "MFAProvider.ChooseOther"}}</p>
             {{ range $provider := .MFAProviders}}
                 {{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
-                <button class="lgn-stroked-button lgn-primary" type="submit" name="provider" value="{{$provider}}">{{$providerName}}</button>
+                <button class="lgn-stroked-button" type="submit" name="provider" value="{{$provider}}">{{$providerName}}</button>
             {{ end }}
         </div>
     {{ end }}

internal/api/ui/login/static/templates/mfa_verify_otp.html

@@ -36,7 +36,7 @@
             <p>{{t "MFAProvider.ChooseOther"}}</p>
             {{ range $provider := .MFAProviders}}
             {{ $providerName := (t (printf "MFAProvider.Provider%v" $provider)) }}
-            <button class="lgn-stroked-button lgn-primary" type="submit" name="provider" value="{{$provider}}"
+            <button class="lgn-stroked-button" type="submit" name="provider" value="{{$provider}}"
                 formnovalidate>{{$providerName}}</button>
             {{ end }}
         </div>

internal/api/ui/login/static/templates/password.html

@@ -29,7 +29,7 @@
 
     <div class="lgn-actions">
         <a href="{{ loginNameChangeUrl .AuthReqID }}">
-            <button class="lgn-stroked-button lgn-primary" type="button">{{t "Password.BackButtonText"}}</button>
+            <button class="lgn-stroked-button" type="button">{{t "Password.BackButtonText"}}</button>
         </a>
         <span class="fill-space"></span>
         <button id="submit-button" class="lgn-raised-button lgn-primary right" type="submit">{{t "Password.NextButtonText"}}</button>

internal/api/ui/login/static/templates/passwordless.html

@@ -30,7 +30,7 @@
         </a>
 
         {{if .PasswordLogin}}
-            <button class="lgn-stroked-button lgn-primary" name="passwordlogin" value="true" type="submit">{{t "Passwordless.LoginWithPwButtonText"}}</button>
+            <button class="lgn-stroked-button" name="passwordlogin" value="true" type="submit">{{t "Passwordless.LoginWithPwButtonText"}}</button>
         {{end}}
         <span class="fill-space"></span>
         <a id="btn-login" class="lgn-raised-button lgn-primary wa-support">{{t "Passwordless.ValidateTokenButtonText"}}</a>

internal/api/ui/login/static/templates/register.html

@@ -128,7 +128,7 @@
     {{template "error-message" .}}
 
     <div class="lgn-actions">
-        <a class="lgn-stroked-button lgn-primary" href="{{ loginNameChangeUrl .AuthReqID }}">
+        <a class="lgn-stroked-button" href="{{ loginNameChangeUrl .AuthReqID }}">
             {{t "RegistrationUser.BackButtonText"}}
         </a>
         <span class="fill-space"></span>