feat: change the magic link layout

Author: xiaoluoboding

packages/auth/Auth.vue

@@ -7,7 +7,7 @@
     :appearance="appearance"
   >
     <SocialAuth
-      v-if="isSignView"
+      v-if="authView === VIEWS.SIGN_IN || authView === VIEWS.SIGN_UP"
       :supabaseClient="supabaseClient"
       :appearance="appearance"
       :providers="providers"
@@ -20,7 +20,7 @@
     />
     <template v-if="!onlyThirdPartyProviders">
       <EmailAuth
-        v-if="authView === 'sign_in' || authView === 'sign_up'"
+        v-if="authView === VIEWS.SIGN_IN || authView === VIEWS.SIGN_UP"
         :supabaseClient="supabaseClient"
         :appearance="appearance"
         :redirectTo="redirectTo"
@@ -30,7 +30,7 @@
         :additionalData="additionalData"
       />
       <MagicLink
-        v-if="authView === 'magic_link'"
+        v-if="authView === VIEWS.MAGIC_LINK"
         :supabaseClient="supabaseClient"
         :appearance="appearance"
         :redirectTo="redirectTo"
@@ -41,28 +41,28 @@
   </SocialAuthContainer>
   <template v-else>
     <ForgottenPassword
-      v-if="authView === 'forgotten_password'"
+      v-if="authView === VIEWS.FORGOTTEN_PASSWORD"
       :supabaseClient="supabaseClient"
       :appearance="appearance"
       :redirectTo="redirectTo"
       :showLinks="showLinks"
       :i18n="i18n"
     />
     <UpdatePassword
-      v-if="authView === 'update_password'"
+      v-if="authView === VIEWS.UPDATE_PASSWORD"
       :supabaseClient="supabaseClient"
       :appearance="appearance"
       :i18n="i18n"
     />
     <VerifyOtp
-      v-if="authView === 'verify_otp'"
+      v-if="authView === VIEWS.VERIFY_OTP"
       :supabaseClient="supabaseClient"
       :appearance="appearance"
       :otpType="otpType"
       :i18n="i18n"
     />
     <AnonymousAuth
-      v-if="authView === 'anonymous_sign_in'"
+      v-if="authView === VIEWS.ANONYMOUS_SIGN_IN"
       :supabaseClient="supabaseClient"
       :appearance="appearance"
       :i18n="i18n"
@@ -73,7 +73,7 @@
 
 <script lang="ts" setup>
 import { provide, ref, watch, computed } from 'vue'
-import { I18nVariables, en, merge } from '@supabase/auth-ui-shared'
+import { I18nVariables, en, merge, VIEWS } from '@supabase/auth-ui-shared'
 import { createStitches } from '@stitches/core'
 import cloneDeep from 'lodash.clonedeep'
 import { colord } from 'colord'
@@ -92,7 +92,7 @@ import VerifyOtp from './VerifyOtp.vue'
 import AnonymousAuth from './AnonymousAuth.vue'
 
 const props = withDefaults(defineProps<AuthProps>(), {
-  view: 'sign_in',
+  view: VIEWS.SIGN_IN,
   socialLayout: 'vertical',
   onlyThirdPartyProviders: false,
   magicLink: false,
@@ -131,9 +131,9 @@ const i18n = computed<I18nVariables>(() => {
  */
 const isSignView = computed(() => {
   return (
-    authView.value === 'sign_in' ||
-    authView.value === 'sign_up' ||
-    authView.value === 'magic_link'
+    authView.value === VIEWS.SIGN_IN ||
+    authView.value === VIEWS.SIGN_UP ||
+    authView.value === VIEWS.MAGIC_LINK
   )
 })
 
@@ -177,9 +177,9 @@ watch(
     const { data: authListener } = props.supabaseClient.auth.onAuthStateChange(
       (event) => {
         if (event === 'PASSWORD_RECOVERY') {
-          setAuthView('update_password')
+          setAuthView(VIEWS.UPDATE_PASSWORD)
         } else if (event === 'USER_UPDATED') {
-          setAuthView('sign_in')
+          setAuthView(VIEWS.SIGN_IN)
         }
       }
     )

packages/auth/MagicLink.vue

@@ -8,24 +8,22 @@
     }"
   >
     <Container direction="vertical" gap="large" :appearance="appearance">
-      <Container direction="vertical" gap="large" :appearance="appearance">
-        <div>
-          <Label htmlFor="email" :appearance="appearance">
-            {{ labels?.email_input_label }}
-          </Label>
-          <Input
-            id="email"
-            type="email"
-            name="email"
-            autoComplete="email"
-            autofocus
-            :shape="appearance?.shape"
-            :placeholder="labels?.email_input_placeholder"
-            :appearance="appearance"
-            v-model="email"
-          />
-        </div>
-      </Container>
+      <div>
+        <Label htmlFor="email" :appearance="appearance">
+          {{ labels?.email_input_label }}
+        </Label>
+        <Input
+          id="email"
+          type="email"
+          name="email"
+          autoComplete="email"
+          autofocus
+          :shape="appearance?.shape"
+          :placeholder="labels?.email_input_placeholder"
+          :appearance="appearance"
+          v-model="email"
+        />
+      </div>
 
       <Button
         type="submit"

src/App.vue

@@ -110,10 +110,15 @@
                       :class="
                         cn(
                           `rounded-full border-${color}-500 text-brand-foreground bg-${color}-500/20 hover:bg-${color}-500/50`,
-                          authBrandColor === color &&
-                            `bg-${color}-500 border-${color}-800 dark:border-${color}-200 border-2`
+                          authBrandColor === color && `border-2`
                         )
                       "
+                      :style="{
+                        background: colord(colors[color]['500']).toRgbString(),
+                        borderColor: isDark
+                          ? colord(colors[color]['200']).toRgbString()
+                          : colord(colors[color]['800']).toRgbString()
+                      }"
                       @click="authBrandColor = color"
                     />
                   </div>
@@ -280,6 +285,7 @@ const backgroundColor = computed(() => {
   const color = colors[authBrandColor.value]['500']
   return colord(color).alpha(opacity).toRgbString()
 })
+
 const theme = computed(() => (isDark.value ? 'dark' : 'default'))
 const I18nVariables = computed(() => (locale.value === 'en-US' ? en : zh))
 const redirectTo = computed(() => {