Improve login/register page presentation

diff --git a/client/public/images/icons/SOURCE b/client/public/images/icons/SOURCE
index 235d0b9..2946454 100644 (file)
--- a/client/public/images/icons/SOURCE
+++ b/client/public/images/icons/SOURCE
@@ -17,3 +17,4 @@ https://www.flaticon.com/free-icon/clear_1632708?term=delete&page=1&position=3
 https://iconscout.com/icon/discord-1
 https://www.onlinewebfonts.com/icon/154680
 https://www.flaticon.com/free-icon/bleach_481058?term=triangle&page=1&position=2
+https://www.onlinewebfonts.com/icon/89755

diff --git a/client/public/images/icons/rightArrow.svg b/client/public/images/icons/rightArrow.svg
new file mode 100644 (file)
index 0000000..1d79d37
--- /dev/null
+++ b/client/public/images/icons/rightArrow.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">\r
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>\r
+<g><path d="M10.7,435.7c0-30.5,7.4-51,22.3-61.5c14.9-10.5,38.3-15.8,70.2-15.8c14.5,0,37.4,0.2,68.6,0.5c31.2,0.4,64.4,0.5,99.6,0.5c35.2,0,69.5,0.2,102.9,0.5c33.4,0.4,59.9,0.5,79.5,0.5c27.6,0.7,49.4-1.6,65.3-7.1c16-5.4,24-18,24-37.6c0-14.5,0.5-31.8,1.6-51.7s1.6-37.2,1.6-51.7c0.7-25.4,8-41.5,21.8-48.4c13.8-6.9,31.2-1.6,52.3,15.8c21.8,17.4,47.2,38.1,76.2,62.1c29,23.9,59.2,48.4,90.4,73.5c31.2,25,61.7,49.7,91.4,74s56.2,45.5,79.5,63.7c21,17.4,31.8,33.9,32.1,49.5c0.4,15.6-9.6,31.8-29.9,48.4c-21,17.4-45.9,37.4-74.6,59.9c-28.7,22.5-58.4,45.7-89.3,69.7c-30.8,24-61.1,47.7-90.9,71.3c-29.8,23.6-56.2,44.5-79.5,62.6c-25.4,20.3-46.3,27.9-62.6,22.9c-16.3-5.1-24.1-20.7-23.4-46.8v-26.1v-31.6c0-10.9-0.2-21.6-0.5-32.1c-0.4-10.5-0.5-20.1-0.5-28.8c0-18.1-5.4-29.6-16.3-34.3c-10.9-4.7-25.8-7.1-44.6-7.1c-21,0-48.6-0.2-82.7-0.5c-34.1-0.4-69.7-0.5-106.7-0.5c-37,0-72.9-0.2-107.8-0.5c-34.8-0.4-63.1-0.5-84.9-0.5c-9.4,0-19.2-0.9-29.4-2.7c-10.2-1.8-19.4-5.3-27.8-10.3c-8.3-5.1-15.1-12.5-20.1-22.3s-7.6-23-7.6-39.7c0-19.6-0.2-38.5-0.5-56.6C9.8,478.5,10,458.2,10.7,435.7z"/></g>\r
+</svg>
\ No newline at end of file

diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue
index dc948cf..6fc6774 100644 (file)
--- a/client/src/components/UpsertUser.vue
+++ b/client/src/components/UpsertUser.vue
@@ -10,7 +10,21 @@ div
   )
     .card
       label.modal-close(for="modalUser")
-      h3.section {{ st.tr[stage] }}
+      h3.section
+        span.title {{ st.tr[stage] }}
+        | (
+        span.link(
+          v-if="stage!='Update'"
+          @click="toggleStage()"
+        )
+          | {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
+        span.link(
+          v-else
+          @click="doLogout()"
+        )
+          | {{ st.tr["Logout"] }}
+        img(src="/images/icons/rightArrow.svg")
+        | )
       div(@keyup.enter="onSubmit()")
         div(v-show="stage!='Login'")
           fieldset
@@ -38,20 +52,8 @@ div
               type="text"
               v-model="nameOrEmail"
             )
-      .button-group
-        button(@click="onSubmit()")
-          span {{ st.tr[submitMessage] }}
-        button(
-          v-if="stage!='Update'"
-          type="button"
-          @click="toggleStage()"
-        )
-          span {{ st.tr[stage=="Login" ? "Register" : "Login"] }}
-        button(
-          v-else type="button"
-          @click="doLogout()"
-        )
-          span {{ st.tr["Logout"] }}
+      button#submitBtn(@click="onSubmit()")
+        | {{ st.tr[submitMessage] }}
       #dialog.text-center {{ st.tr[infoMsg] }}
 </template>
 
@@ -206,6 +208,22 @@ export default {
   max-width: 450px
   max-height: 100%
 
+h3.section
+  span.title
+    padding-right: 10px
+  span.link
+    color: darkred
+    font-size: 0.8em
+    text-decoration: underline
+    cursor: pointer
+  img
+    height: 1em
+    padding-left: 5px
+
+#submitBtn
+  width: 50%
+  margin: 0 auto
+
 #dialog
   padding: 5px
   color: blue