From b5f4224f087cfc1a82d37c80aa9bc4b4e19a196a Mon Sep 17 00:00:00 2001
From: Julian Gojani <julian@gojani.xyz>
Date: Tue, 21 Sep 2021 23:38:04 +0200
Subject: [PATCH] Made LoginSelection.vue more beautiful

---
 frontend/src/views/auth/LoginSelection.vue | 39 ++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/auth/LoginSelection.vue b/frontend/src/views/auth/LoginSelection.vue
index e8f8d3f..737036a 100644
--- a/frontend/src/views/auth/LoginSelection.vue
+++ b/frontend/src/views/auth/LoginSelection.vue
@@ -1,7 +1,16 @@
 <template>
     <div>
-        <h1>Log in with</h1>
-        <a v-for="authtype of $store.state.user.auth_types" :key="authtype" :href="'/api/v2/auth/oauth2/'+authtype" style="display: block; margin-bottom: 20px;">Login with your {{authtype}}-Account</a>
+        <h1>Log in with</h1><br>
+        <a v-for="authtype of $store.state.user.auth_types" :key="authtype" :href="'/api/v2/auth/oauth2/'+authtype" class="authtype">
+            <svg v-if="authtype == 'interaapps'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M11.3814 0.00203312C10.5549 0.0453972 9.52985 0.209368 8.76991 0.420768C7.70681 0.716186 6.79053 1.10511 5.83482 1.66478C4.95525 2.17972 4.00227 2.93724 3.31845 3.66359C2.32469 4.71652 1.60961 5.79927 1.03183 7.12188C0.477172 8.39028 0.140025 9.84297 0.0367056 11.3973C0.0285488 11.5233 0.0149541 11.709 0.00815679 11.8093C-0.00271893 11.9366 -0.00271893 12.0478 0.00815679 12.1752C0.0163136 12.2768 0.0285488 12.4597 0.0367056 12.583C0.0706922 13.0926 0.154979 13.7932 0.235187 14.216C0.500283 15.624 0.891809 16.7162 1.59329 17.9954C1.89102 18.5402 2.05279 18.7936 2.38858 19.2435C3.55364 20.8019 5.09799 22.0649 6.815 22.863C7.32752 23.1015 7.55183 23.1923 8.15951 23.4065C8.81205 23.6368 9.22669 23.7466 9.86564 23.8564C10.6582 23.9932 10.7656 24 12.0068 24C13.2453 24 13.3731 23.9919 14.1819 23.8509C14.6088 23.7764 14.912 23.7032 15.1947 23.607C15.3103 23.5677 15.6039 23.4688 15.8473 23.3861C16.0906 23.3035 16.3897 23.1964 16.5121 23.1463C17.499 22.7479 18.3976 22.2438 19.2269 21.6245C19.9094 21.1149 20.43 20.6257 21.0758 19.8872C22.1538 18.6554 23.0089 17.0834 23.4725 15.4762C23.739 14.5507 23.8912 13.6644 23.9633 12.6034C23.9715 12.4841 23.9837 12.2985 23.9918 12.1914C24.0027 12.0505 24.0027 11.9394 23.9918 11.7849C23.9823 11.6683 23.9701 11.4854 23.9619 11.377C23.9144 10.6818 23.894 10.5192 23.6832 9.20877C23.5935 8.6464 23.3148 7.77776 22.9899 7.04057C22.8825 6.798 22.6011 6.22614 22.4951 6.03777C22.147 5.41713 21.7746 4.86559 21.5081 4.57424C21.451 4.51054 21.3395 4.38316 21.262 4.28966C20.479 3.35598 19.6783 2.63098 18.7307 1.99407C18.4656 1.81655 18.2889 1.71356 17.741 1.41814C16.4414 0.717541 14.9935 0.260863 13.509 0.0819857C12.9584 0.0155844 12.7803 0.0060985 12.1224 0.00203312C11.7675 -0.000677141 11.4345 -0.000677141 11.3814 0.00203312ZM12.6186 1.76912C13.0984 1.80029 13.3867 1.83823 13.3867 1.87211C13.3867 1.89244 13.3608 1.90057 13.0536 1.97781C12.4717 2.12145 11.6058 2.39926 11.0796 2.60794C10.1906 2.96163 9.66036 3.21098 8.88411 3.64191C7.50153 4.40756 6.32151 5.30465 5.35086 6.33048C4.70511 7.01076 4.35029 7.45253 3.86088 8.18565C3.27087 9.06784 2.76515 10.1032 2.35595 11.2618C2.22273 11.6385 2.00249 12.4191 1.89102 12.9056C1.84072 13.1251 1.79721 13.2606 1.77546 13.2606C1.76866 13.2606 1.75643 13.2443 1.74963 13.2254C1.74148 13.2037 1.73604 12.724 1.73604 11.9529C1.73604 10.5788 1.73196 10.6506 1.8312 10.1235C2.04464 8.98653 2.47966 7.85365 3.09278 6.8373C3.82825 5.61904 4.68608 4.67587 5.87017 3.78555C7.39005 2.64453 9.33545 1.91547 11.2115 1.78403C11.3271 1.7759 11.4467 1.76641 11.4766 1.7637C11.6166 1.75286 12.4255 1.75692 12.6186 1.76912ZM17.2829 3.30042C17.3359 3.30719 17.4134 3.32616 17.4569 3.34107C17.5942 3.39256 18.0061 3.6785 18.433 4.01592C19.0203 4.48209 19.4866 4.93741 20.0127 5.56212C20.3471 5.95918 20.426 6.05946 20.5905 6.30202C21.1234 7.08664 21.4796 7.78318 21.7963 8.65859C21.8697 8.86186 21.8847 8.93639 21.852 8.96214C21.8425 8.97027 21.6889 9.02448 21.5095 9.0841C20.6095 9.38359 19.9257 9.7034 19.0556 10.236C18.3093 10.6913 17.4732 11.3553 16.8057 12.0207C16.1627 12.6616 15.5333 13.4557 15.1349 14.1265C14.3777 15.4017 13.9508 16.6322 13.7483 18.1255C13.7088 18.4128 13.6817 18.7069 13.6518 19.1893C13.6395 19.3749 13.6273 19.543 13.6232 19.5592C13.6191 19.5769 13.6259 19.7137 13.6368 19.8641C13.6477 20.0146 13.6667 20.272 13.6789 20.436C13.7102 20.8615 13.7646 21.2965 13.8353 21.6692C13.8516 21.7505 13.8733 21.8684 13.8856 21.9307C13.9155 22.0893 13.9223 22.0838 13.5906 22.1353C13.059 22.2167 12.8252 22.2316 12.0136 22.2316C11.3665 22.2316 11.0307 22.218 10.7085 22.176C10.0437 22.092 9.50266 21.9673 8.90722 21.764C8.26555 21.5445 7.94607 21.4131 7.4186 21.1529C7.03931 20.9659 6.73887 20.7924 6.34462 20.5309C5.46913 19.9509 4.69967 19.2692 4.0648 18.5117C3.72901 18.1106 3.26136 17.452 3.23145 17.3382C3.22193 17.303 3.21785 16.8666 3.22193 16.0142L3.22601 14.7445L3.26951 14.4667C3.38371 13.7268 3.51966 13.1427 3.74805 12.4001C4.02538 11.5003 4.47672 10.4894 4.93486 9.74405C5.23258 9.25891 5.50583 8.86999 5.84162 8.45126C6.13663 8.08402 6.35142 7.84687 6.73207 7.46608C7.61708 6.58389 8.64756 5.81824 9.81806 5.17727C11.2577 4.38858 12.6729 3.85737 14.1344 3.55924C14.7461 3.43457 15.5645 3.33429 16.2211 3.30177C16.5325 3.28686 17.1687 3.28551 17.2829 3.30042ZM22.2653 10.7767C22.2735 10.7997 22.2776 11.2428 22.2735 12.06C22.2694 13.2769 22.2694 13.3121 22.2395 13.4978C22.0233 14.8366 21.553 16.1104 20.8596 17.2311C20.4994 17.8125 20.1949 18.2217 19.715 18.7692C19.023 19.5592 18.07 20.3317 17.1143 20.8778C16.5719 21.1868 15.7073 21.5811 15.5686 21.5811C15.5061 21.5811 15.4897 21.5486 15.4476 21.3358C15.3579 20.8913 15.3579 20.8995 15.3579 19.6338C15.3579 18.3627 15.3565 18.3884 15.4462 17.9141C15.642 16.8856 16.0662 15.8719 16.7092 14.9003C16.8492 14.6889 17.185 14.2431 17.3726 14.0195C17.8838 13.4124 18.6152 12.7402 19.3479 12.205C20.1038 11.6521 20.9344 11.2008 21.761 10.8918C22.2341 10.7157 22.2409 10.7143 22.2653 10.7767Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
+            <svg v-else-if="authtype == 'google'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.7449 12.27C23.7449 11.48 23.6749 10.73 23.5549 10H12.2549V14.51H18.7249C18.4349 15.99 17.5849 17.24 16.3249 18.09V21.09H20.1849C22.4449 19 23.7449 15.92 23.7449 12.27Z" fill="white"/><path d="M12.2549 24C15.4949 24 18.2049 22.92 20.1849 21.09L16.3249 18.09C15.2449 18.81 13.8749 19.25 12.2549 19.25C9.12492 19.25 6.47492 17.14 5.52492 14.29H1.54492V17.38C3.51492 21.3 7.56492 24 12.2549 24Z" fill="white"/><path d="M5.52488 14.2901C5.27488 13.5701 5.14488 12.8001 5.14488 12.0001C5.14488 11.2001 5.28488 10.4301 5.52488 9.71012V6.62012H1.54488C0.724882 8.24012 0.254883 10.0601 0.254883 12.0001C0.254883 13.9401 0.724882 15.7601 1.54488 17.3801L5.52488 14.2901Z" fill="white"/><path d="M12.2549 4.75C14.0249 4.75 15.6049 5.36 16.8549 6.55L20.2749 3.13C18.2049 1.19 15.4949 0 12.2549 0C7.56492 0 3.51492 2.7 1.54492 6.62L5.52492 9.71C6.47492 6.86 9.12492 4.75 12.2549 4.75Z" fill="white"/></svg>
+            <svg v-else-if="authtype == 'github'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C20.565 21.795 24 17.295 24 12C24 5.37 18.63 0 12 0Z" fill="white"/></svg>
+            <svg v-else-if="authtype == 'discord'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.7371 5.39767C18.3264 4.75075 16.8136 4.27413 15.2319 4.00115C15.2031 3.99588 15.1743 4.00904 15.1594 4.03538C14.9649 4.38121 14.7494 4.83238 14.5985 5.187C12.8972 4.93245 11.2047 4.93245 9.53836 5.187C9.38742 4.8245 9.16409 4.38121 8.96866 4.03538C8.95382 4.00992 8.92504 3.99676 8.89624 4.00115C7.31539 4.27325 5.8026 4.74988 4.391 5.39767C4.37878 5.40294 4.36831 5.41172 4.36136 5.42313C1.49191 9.7075 0.705852 13.8866 1.09147 18.0138C1.09321 18.034 1.10455 18.0533 1.12026 18.0656C3.01344 19.4551 4.8473 20.2986 6.64711 20.8578C6.67592 20.8666 6.70644 20.856 6.72477 20.8323C7.15051 20.2513 7.53003 19.6386 7.85542 18.9943C7.87463 18.9565 7.8563 18.9118 7.81705 18.8968C7.21508 18.6686 6.64188 18.3904 6.0905 18.0744C6.04689 18.0489 6.04339 17.9866 6.08351 17.9567C6.19955 17.8699 6.31561 17.7794 6.4264 17.6882C6.44644 17.6715 6.47438 17.668 6.49794 17.6785C10.1203 19.3313 14.0419 19.3313 17.6214 17.6785C17.645 17.6671 17.6729 17.6706 17.6938 17.6873C17.8047 17.7786 17.9207 17.8699 18.0376 17.9567C18.0777 17.9866 18.0751 18.0489 18.0315 18.0744C17.4801 18.3965 16.9069 18.6686 16.3041 18.896C16.2648 18.9109 16.2474 18.9565 16.2666 18.9943C16.5989 19.6377 16.9785 20.2504 17.3964 20.8314C17.4138 20.856 17.4452 20.8666 17.474 20.8578C19.2825 20.2986 21.1164 19.4551 23.0096 18.0656C23.0262 18.0533 23.0366 18.0349 23.0384 18.0147C23.4999 13.2431 22.2654 9.09834 19.7659 5.424C19.7598 5.41172 19.7493 5.40294 19.7371 5.39767ZM8.39636 15.5008C7.30579 15.5008 6.4072 14.5001 6.4072 13.2712C6.4072 12.0424 7.28837 11.0417 8.39636 11.0417C9.51305 11.0417 10.4029 12.0511 10.3855 13.2712C10.3855 14.5001 9.50432 15.5008 8.39636 15.5008ZM15.7509 15.5008C14.6604 15.5008 13.7618 14.5001 13.7618 13.2712C13.7618 12.0424 14.643 11.0417 15.7509 11.0417C16.8677 11.0417 17.7575 12.0511 17.7401 13.2712C17.7401 14.5001 16.8677 15.5008 15.7509 15.5008Z" fill="white"/></svg>
+            <svg v-else-if="authtype == 'twitch'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M6.01042 1L2 4.92857V19.0714H6.8125V23L10.8229 19.0714H14.0312L21.25 12V1H6.01042ZM19.6458 11.2143L16.4375 14.3571H13.2292L10.4219 17.1071V14.3571H6.8125V2.57143H19.6458V11.2143Z" fill="white"/><path d="M17.2399 5.32129H15.6357V10.0356H17.2399V5.32129Z" fill="white"/><path d="M12.8278 5.32129H11.2236V10.0356H12.8278V5.32129Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>
+
+
+            {{authtype}}<br>Account
+        </a>
     </div>
 </template>
 <script>
@@ -9,4 +18,28 @@ export default {
     mounted(){
     }
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.authtype {
+    display: block; 
+    margin-bottom: 10px;
+    margin-right:  10px;
+    text-decoration: none;
+    display: inline-block;
+    padding: 15px 5px;
+    text-align: center;
+    background: #FFFFFF11;
+    border-radius: 15px;
+    min-width: 120px;
+    svg {
+        margin: auto;
+        display: block;
+        width:  40px;
+        height: 40px;
+        margin-bottom: 10px;
+    }
+    &:hover {
+        background: #FFFFFF22;
+    }
+}
+</style>
\ No newline at end of file