Merge pull request #1656 from penpot/social-logins-redesign

Authentication page and OIDC flows improvements

frontend/src/app/config.cljs

@@ -86,6 +86,9 @@
 (def browser              (atom (parse-browser)))
 (def platform             (atom (parse-platform)))
 
+(def terms-of-service-uri (obj/get global "penpotTermsOfServiceURI" nil))
+(def privacy-policy-uri   (obj/get global "penpotPrivacyPolicyURI" nil))
+
 ;; maintain for backward compatibility
 (let [login-with-ldap (obj/get global "penpotLoginWithLDAP" false)
       registration    (obj/get global "penpotRegistrationEnabled" true)]
@@ -135,5 +138,3 @@
    (str (cond-> (u/join public-uri "assets/by-file-media-id/")
           (true? thumbnail?) (u/join (str id "/thumbnail"))
           (false? thumbnail?) (u/join (str id))))))
-
-

frontend/src/app/main/ui/auth.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.auth
   (:require
+   [app.config :as cf]
    [app.main.ui.auth.login :refer [login-page]]
    [app.main.ui.auth.recovery :refer [recovery-page]]
    [app.main.ui.auth.recovery-request :refer [recovery-request-page]]
@@ -15,6 +16,23 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.alpha :as mf]))
 
+(mf/defc terms-login
+  []
+  (let [show-all?     (and cf/terms-of-service-uri cf/privacy-policy-uri)
+        show-terms?   (some? cf/terms-of-service-uri)
+        show-privacy? (some? cf/privacy-policy-uri)]
+
+    (when show-all?
+      [:div.terms-login
+       (when show-terms?
+         [:a {:href cf/terms-of-service-uri :target "_blank"} "Terms of service"])
+
+       (when show-all?
+         [:span "and"])
+
+       (when show-privacy?
+         [:a {:href cf/privacy-policy-uri :target "_blank"} "Privacy policy"])])))
+
 (mf/defc auth
   [{:keys [route] :as props}]
   (let [section (get-in route [:data :name])
@@ -48,7 +66,5 @@
         :auth-recovery
         [:& recovery-page {:params params}])
 
-      [:div.terms-login
-       [:a {:href "https://penpot.app/terms.html" :target "_blank"} "Terms of service"]
-       [:span "and"]
-       [:a {:href "https://penpot.app/privacy.html" :target "_blank"} "Privacy policy"]]]]))
+      [:& terms-login {}]]]))
+

frontend/src/app/main/ui/auth/login.cljs

@@ -97,7 +97,6 @@
              (login-with-ldap event (with-meta params
                                       {:on-error on-error
                                        :on-success on-succes})))))]
-
     [:*
      (when-let [message @error]
        [:& msgs/inline-banner
@@ -123,9 +122,10 @@
          :label (tr "auth.password")}]]
 
       [:div.buttons-stack
-       [:& fm/submit-button
-        {:label (tr "auth.login-submit")
-         :data-test "login-submit"}]
+       (when (contains? @cf/flags :login)
+         [:& fm/submit-button
+          {:label (tr "auth.login-submit")
+           :data-test "login-submit"}])
 
        (when (contains? @cf/flags :login-with-ldap)
          [:& fm/submit-button
@@ -136,50 +136,69 @@
   [{:keys [params] :as props}]
   [:div.auth-buttons
    (when cf/google-client-id
-     [:a.btn-ocean.btn-large.btn-google-auth
+     [:a.btn-primary.btn-large.btn-google-auth
       {:on-click #(login-with-oauth % :google params)}
+      [:span.logo i/brand-google]
       (tr "auth.login-with-google-submit")])
 
-   (when cf/gitlab-client-id
-     [:a.btn-ocean.btn-large.btn-gitlab-auth
-      {:on-click #(login-with-oauth % :gitlab params)}
-      [:img.logo
-       {:src "/images/icons/brand-gitlab.svg"}]
-      (tr "auth.login-with-gitlab-submit")])
-
    (when cf/github-client-id
-     [:a.btn-ocean.btn-large.btn-github-auth
+     [:a.btn-primary.btn-large.btn-github-auth
       {:on-click #(login-with-oauth % :github params)}
-      [:img.logo
-       {:src "/images/icons/brand-github.svg"}]
+      [:span.logo i/brand-github]
       (tr "auth.login-with-github-submit")])
 
+   (when cf/gitlab-client-id
+     [:a.btn-primary.btn-large.btn-gitlab-auth
+      {:on-click #(login-with-oauth % :gitlab params)}
+      [:span.logo i/brand-gitlab]
+      (tr "auth.login-with-gitlab-submit")])
+
    (when cf/oidc-client-id
-     [:a.btn-ocean.btn-large.btn-github-auth
+     [:a.btn-primary.btn-large.btn-github-auth
       {:on-click #(login-with-oauth % :oidc params)}
+      [:span.logo i/brand-openid]
       (tr "auth.login-with-oidc-submit")])])
 
+(mf/defc login-button-oidc
+  [{:keys [params] :as props}]
+  (when cf/oidc-client-id
+    [:div.link-entry.link-oidc
+     [:a {:on-click #(login-with-oauth % :oidc params)}
+      (tr "auth.login-with-oidc-submit")]]))
+
 (mf/defc login-page
   [{:keys [params] :as props}]
   [:div.generic-form.login-form
    [:div.form-container
     [:h1 {:data-test "login-title"} (tr "auth.login-title")]
-    [:div.subtitle (tr "auth.login-subtitle")]
-
-    [:& login-form {:params params}]
 
     (when show-alt-login-buttons?
       [:*
-       [:span.separator (tr "labels.or")]
+       [:span.separator
+        [:span.line]
+        [:span.text (tr "labels.continue-with")]
+        [:span.line]]
 
        [:div.buttons
-        [:& login-buttons {:params params}]]])
+        [:& login-buttons {:params params}]]
+
+       (when (or (contains? @cf/flags :login)
+                 (contains? @cf/flags :login-with-ldap))
+         [:span.separator
+          [:span.line]
+          [:span.text (tr "labels.or")]
+          [:span.line]])])
+
+    (when (or (contains? @cf/flags :login)
+              (contains? @cf/flags :login-with-ldap))
+      [:& login-form {:params params}])
 
     [:div.links
-     [:div.link-entry
-      [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
-           :data-test "forgot-password"}
-       (tr "auth.forgot-password")]]
+     (when (contains? @cf/flags :login)
+       [:div.link-entry
+        [:a {:on-click #(st/emit! (rt/nav :auth-recovery-request))
+             :data-test "forgot-password"}
+         (tr "auth.forgot-password")]])
 
      (when (contains? @cf/flags :registration)
        [:div.link-entry

frontend/src/app/main/ui/auth/register.cljs

@@ -121,15 +121,25 @@
    (when (contains? @cf/flags :demo-warning)
      [:& demo-warning])
 
+   (when login/show-alt-login-buttons?
+     [:*
+      [:span.separator
+       [:span.line]
+       [:span.text (tr "labels.continue-with")]
+       [:span.line]]
+
+      [:div.buttons
+       [:& login/login-buttons {:params params}]]
+
+      (when (or (contains? @cf/flags :login)
+                (contains? @cf/flags :login-with-ldap))
+        [:span.separator
+         [:span.line]
+         [:span.text (tr "labels.or")]
+         [:span.line]])])
+
    [:& register-form {:params params}]
 
-    (when login/show-alt-login-buttons?
-      [:*
-       [:span.separator (tr "labels.or")]
-
-       [:div.buttons
-        [:& login/login-buttons {:params params}]]])
-
    [:div.links
     [:div.link-entry
      [:span (tr "auth.already-have-account") " "]

frontend/src/app/main/ui/icons.cljs

@@ -170,6 +170,10 @@
 (def uppercase (icon-xref :uppercase))
 (def user (icon-xref :user))
 
+(def brand-openid (icon-xref :brand-openid))
+(def brand-github (icon-xref :brand-github))
+(def brand-gitlab (icon-xref :brand-gitlab))
+(def brand-google (icon-xref :brand-google))
 
 (def loader-pencil
   (mf/html