From 8bbf9c0242c5430a7531b0eb88e30bf61018446a Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Mon, 13 Apr 2020 10:27:53 +0200 Subject: [PATCH] Improve login/register page presentation --- client/public/images/icons/SOURCE | 1 + client/public/images/icons/rightArrow.svg | 7 ++++ client/src/components/UpsertUser.vue | 48 ++++++++++++++++------- 3 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 client/public/images/icons/rightArrow.svg diff --git a/client/public/images/icons/SOURCE b/client/public/images/icons/SOURCE index 235d0b93..2946454f 100644 --- 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 index 00000000..1d79d37d --- /dev/null +++ b/client/public/images/icons/rightArrow.svg @@ -0,0 +1,7 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<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"> +<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata> +<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> +</svg> \ No newline at end of file diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue index dc948cf1..6fc67742 100644 --- 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 -- 2.44.0