fix: do not use rgba color functions

digris · Dec 9, 2022 · 2dce8e7 · 2dce8e7
1 parent 4502b35
commit 2dce8e7
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 24 deletions.
diff --git a/core/app_bridge/views.py b/core/app_bridge/views.py
@@ -16,5 +16,7 @@ def social_auth_redirect(request):
         base_url = f"{request.scheme}://{request.get_host()}"
         url = f"{REDIRECTOR_URL}?signed_email={quoted_signed_email}&base_url={base_url}"
         return HttpResponseRedirect(url)
+        # login_url = f"{base_url}/account/email-login/{quoted_signed_email}/"
+        # return HttpResponseRedirect(login_url)
 
     return HttpResponseForbidden()
diff --git a/core/well_known/views.py b/core/well_known/views.py
@@ -17,17 +17,20 @@ def apple_app_site_association(request):
                         "appID": IOS_APP_ID,
                         "paths": [
                             "NOT /social/*",
+                            "NOT /app-bridge/social-auth-redirect/",
+                            "NOT /app-bridge/social-auth-redirect/*",
+                            "*",
                         ],
                         # "components": [
                         #     {
-                        #         "/": "/social/login/*",
+                        #         "/": "/social/*",
                         #         "exclude": True,
-                        #         "comment": "OAuth login flow should be started in the os browser",
+                        #         "comment": "OAuth login flow must be started in the os browser",
                         #     },
                         #     {
-                        #         "/": "/social/complete/*",
+                        #         "/": "/app-bridge/social-auth-redirect/*",
                         #         "exclude": True,
-                        #         "comment": "OAuth login flow should be completed in the os browser",
+                        #         "comment": "Auth redirect to be completed in the os browser",
                         #     },
                         #     {
                         #         "/": "/*",

diff --git a/functions/social-auth-redirector/templates/redirect.html b/functions/social-auth-redirector/templates/redirect.html
@@ -6,6 +6,7 @@
   <meta name="description" content="login">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#fafafa">
+  <meta http-equiv="refresh" content="0; url={{ login_url }}">
 </head>
 <body>
   <p>Account connected: {{ email }}</p>

diff --git a/src/components/account/EmailLogin.vue b/src/components/account/EmailLogin.vue
@@ -1,19 +1,27 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
+import IconBuffering from "@/components/ui/icon/IconBuffering.vue";
 import { useAccount } from "@/composables/account";
 
 export default defineComponent({
+  components: {
+    IconBuffering,
+  },
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const { loginUserBySignedEmail } = useAccount();
+    const { loadUser } = useAccount();
     const signedEmail = ref(route.params.signedEmail);
     const errors = ref<Array<string>>([]);
     const loginBySignedEmail = async (value: string | string[]) => {
       try {
         await loginUserBySignedEmail(value);
-        document.location.href = "/account/settings/";
+        await loadUser();
+        // document.location.href = "/account/settings/";
+        await router.push("/account/settings/");
       } catch (err) {
         console.warn(err);
         errors.value = [err.message, err.response.data];
@@ -30,7 +38,42 @@ export default defineComponent({
 });
 </script>
 <template>
-  <div class="form-errors" v-if="errors.length">
-    <pre v-text="errors" />
+  <div class="email-login">
+    <div class="loading">
+      <IconBuffering />
+      <div class="text">loading user data</div>
+    </div>
+    <div class="errors" v-if="errors.length">
+      <pre v-text="errors" />
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+@use "@/style/base/typo";
+@use "@/style/base/responsive";
+@use "@/style/elements/form";
+
+.email-login {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  .loading {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 6rem;
+
+    > .text {
+      @include typo.small;
+    }
+  }
+
+  .errors {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/broadcast/radio/flow/FlowItem.vue b/src/components/broadcast/radio/flow/FlowItem.vue
@@ -243,7 +243,7 @@ variables defined in parent component(s):
     height: var(--item-size);
     width: var(--item-size);
     left: 0;
-    background: rgba(var(--c-bg, 0.9));
+    background: rgb(var(--c-bg) / 90%);
     transform-origin: left;
     box-shadow: 0 0 20px rgb(0 0 0 / 50%);
   }

diff --git a/src/components/catalog/mood/Visual.vue b/src/components/catalog/mood/Visual.vue
@@ -27,7 +27,8 @@ interface Ray {
 }
 
 const colorToRGBA = (color: RGBAColor) => {
-  return `rgba(${color.join(" ")})`;
+  const [r, g, b, a] = [...color]
+  return `rgba(${r} ${g} ${b} / ${a})`;
 };
 
 const drawCanvas = async (

diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue
@@ -136,8 +136,8 @@ $player-height: 72px;
   width: 100%;
   bottom: 0;
   z-index: 110;
-  color: rgba(var(--c-fg));
-  background: rgba(var(--c-bg));
+  color: rgb(var(--c-fg));
+  background: rgb(var(--c-bg));
   transition: background 1000ms;
 }
 

diff --git a/src/components/player/Queue.vue b/src/components/player/Queue.vue
@@ -82,7 +82,7 @@ export default defineComponent({
         <Circle
           @click="close"
           background-color="rgb(var(--c-black))"
-          hover-background-color="rgba(var(--c-white), 0.1)"
+          hover-background-color="rgb(var(--c-white) / 10%)"
         >
           <IconCaret direction="down" color-var="--c-white" />
         </Circle>

diff --git a/src/components/player/ShuffleControl.vue b/src/components/player/ShuffleControl.vue
@@ -35,7 +35,7 @@ export default defineComponent({
     class="shuffle-control"
     :background-color="shuffleMode ? 'rgb(var(--c-white))' : 'rgb(var(--c-black))'"
     :hover-background-color="
-      shuffleMode ? 'rgba(var(--c-white), 0.9)' : 'rgba(var(--c-white), 0.1)'
+      shuffleMode ? 'rgb(var(--c-white) / 90%)' : 'rgb(var(--c-white) / 10%)'
     "
     @click.prevent="onClick"
   >

diff --git a/src/components/player/mobile/Player.vue b/src/components/player/mobile/Player.vue
@@ -145,7 +145,7 @@ export default defineComponent({
   z-index: 110;
   height: var(--player-height);
   width: 100%;
-  background: rgba(var(--c-bg));
+  background: rgb(var(--c-bg));
   box-shadow: 0 0 1px 1px rgb(var(--c-fg) 0.2);
   transition: background 200ms;
   transition-delay: 1ms;
@@ -169,7 +169,7 @@ export default defineComponent({
 }
 
 .player {
-  color: rgba(var(--c-fg));
+  color: rgb(var(--c-fg));
   transition: background 1000ms;
   height: 60px;
   display: flex;

diff --git a/src/utils/account.ts b/src/utils/account.ts
@@ -8,7 +8,7 @@ import { useDevice } from "@/composables/device";
 import eventBus from "@/eventBus";
 import type { User } from "@/typings/api";
 
-const USER_POLLING_INTERVAL = 5 * 60 * 1000;
+const USER_POLLING_INTERVAL = 60 * 1000;
 
 const updateAppBridgeAccount = (user: User) => {
   if (window.appBridge) {

diff --git a/src/views/Account.vue b/src/views/Account.vue
@@ -31,15 +31,23 @@ export default defineComponent({
 .account {
   @include container.small;
 
-  margin-bottom: 12rem;
-}
+  margin-bottom: 4rem;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    @include typo.x-large;
 
-.header {
-  @include typo.x-large;
+    margin: 2rem 0;
+    @include responsive.bp-medium {
+      margin: 0.625rem 0;
+    }
+  }
 
-  margin: 2rem 0;
-  @include responsive.bp-medium {
-    margin: 0.625rem 0;
+  .body {
+    flex-grow: 1;
+    display: flex;
   }
 }
 </style>