login.churchsuite.com
Open in
urlscan Pro
2606:4700:10::ac43:2588
Public Scan
Submitted URL: http://theoasischurch.churchsuite.com/
Effective URL: https://login.churchsuite.com/?account=theoasischurch
Submission: On October 29 via api from US — Scanned from US
Effective URL: https://login.churchsuite.com/?account=theoasischurch
Submission: On October 29 via api from US — Scanned from US
Form analysis 8 forms found in the DOM
<form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" @submit.prevent="submitSearch()" class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="text-center w-full text-gray-700 text-lg">Search for your church</div>
</div>
<div class="space-y-3">
<div x-data="{
...fieldAjaxSelect(),
fetchURL: "/accounts",
fieldName: "account",
multiple: false,
value: null,
valueProxy: null,
autoload: false,
onSelect(option) {$nextTick(() => {
clientAccount = option.id;
submitSearch();
})},
filters: {}
}" x-ref="root" @focusin="showDropdown()" @keydown="navigate($event)" @click.away="hideDropdown()" class="relative w-full">
<div :class="{
'rounded-b-none': showingOptions,
'border-b': showingOptions
}" x-ref="field" @resize.window="setWidth()"
class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 rounded-md text-base border-gray-300 text-gray-800 sm:leading-6 border items-center bg-fff">
<template hidden="true" x-if="loading">
<div class="absolute mx-auto text-blue-500 inset-0 flex justify-center items-center bg-white bg-opacity-50 rounded-md z-10"><svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg></div>
</template>
<div x-show="value !== null" @click.prevent="clearValue()" @focusin.stop="" class="px-3 py-2 justify-between flex w-full cursor-pointer group bg-blue-50 rounded-md">
<div x-ref="selected" x-html="selectedData.length > 0 ? selectedData[0].html : """ class="min-w-0"></div>
<a href="#" tabindex="0" x-ref="clear" @click.prevent="clearValue()" @focusin.stop="" class="flex items-center focus:outline-none text-blue-400 group-hover:text-indigo-600"><span class="icon w-4 h-4 inline-block fill-current"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg></span></a>
</div><input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="e.g. My church" spellcheck="false" type="text" id="account_search" @input.debounce.300="runQuery()" @keydown.escape="q = null" x-model="q" x-ref="search"
x-show="value === null" :tabindex="value === null ? 0 : "-1"" x-intersect="$focus.focus($el)" aria-label="e.g. My church" class="focus:ring-0 focus:ring-opacity-0 text-base block grow text-center border-0 rounded-md w-1/2">
</div><template hidden="true" x-if="showingOptions">
<ul @scroll.debounce.50="infiniteScroll($event)" x-bind="animateDropdown" :style="`width: ${fieldWidth}px`" class="absolute bg-white border-gray-300 border-t-0 border max-h-48 overflow-y-auto rounded-b-lg z-20 overflow-x-hidden text-base">
<template hidden="true" x-for="(option, index) in options" :key="index">
<li>
<a href="#" tabindex="-1" @click.prevent="setValue(option)" :rel="`option_${index}`" class="block px-1 py-1 group focus:outline-none"><span x-html="option.html" class="block rounded-md px-2 py-1 group-focus:bg-blue-50 group-focus:ring-blue-300 group-focus:ring-2 group-hover:bg-blue-50 flex justify-between items-center"></span></a>
</li>
</template><template hidden="true" x-if="loading">
<li class="px-3 py-2 pulse pulse-sm"></li>
</template><template hidden="true" x-if="(q === null || q.length < 2) && !loading && options.length == 0">
<li class="px-3 py-2 text-gray-400">Type 2 or more characters to search</li>
</template><template hidden="true" x-if="noResults()">
<li class="px-3 py-2 text-gray-400">No results</li>
</template></ul>
</template><input name="account" type="text" hidden="1" tabindex="-1"><select multiple="" name="account" hidden="1" id="account" tabindex="-1" x-model="value">
<option value="">-</option><template hidden="true" x-for="option in selectedData" :key="option.id">
<option selected="" :value="option.id" x-text="option.text"></option>
</template>
</select><span hidden="1" id="account__error" class="text-red-500 text-xs block px-1 mt-1"></span>
</div>
</div>
<div class="space-y-3"><button type="submit"
class="disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed active:bg-brand-700 bg-brand-500 flex focus:ring-2 focus:outline-none font-medium hover:bg-brand-400 justify-center py-3 rounded-md text-white text-base w-full">Next</button>
</div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Choose system</div>
</div>
<div class="space-y-3">
<div x-intersect="$focus.first()" @keydown.up="$focus.previous()" @keydown.down="$focus.next()" class="flex flex-col gap-px space-y-4"><template hidden="true" x-for="account in logins" :key="account.system"><button tabindex="0"
@click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button></template></div>
</div>
<div class="space-y-3"></div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-left" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l14 0"></path>
<path d="M5 12l6 6"></path>
<path d="M5 12l6 -6"></path>
</svg>
</cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Choose system</div>
</div>
<div class="space-y-3">
<div x-intersect="$focus.first()" @keydown.up="$focus.previous()" @keydown.down="$focus.next()" class="flex flex-col gap-px space-y-4"><template hidden="true" x-for="account in logins" :key="account.system"><button tabindex="0"
@click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button></template><button tabindex="0" @click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10" data-system="admin">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16" style="display: none;">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"><cs-icon kit="platform"
icon="churchsuite" class="block h-10 w-10"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.0148 2.50001C17.2543 2.50372 21.5 6.75767 21.5 11.9981V12.0056C21.4926 17.2572 17.2358 21.5074 11.9889 21.5C6.74571 21.4963 2.49629 17.2386 2.5 11.9907C2.50371 6.74283 6.76425 2.49259 12.0074 2.50001H12.0148ZM5.16979 9.85819C6.03006 10.192 6.91628 10.459 7.81733 10.663C8.84446 10.8781 9.89383 10.9931 10.9432 11.0116C11.0137 11.0153 11.0285 10.9894 11.0285 10.9263C11.0174 10.7668 11.0025 10.6037 11.0025 10.4442C10.9618 10.0548 10.9321 9.66534 10.8802 9.27592C10.7615 8.35243 10.5761 7.44008 10.324 6.54627C10.1905 6.07155 10.0199 5.61537 9.86788 5.15548C9.84563 5.09243 9.81226 5.07018 9.7418 5.09243C8.74805 5.42622 7.83587 5.96399 7.06831 6.67607C6.15984 7.51054 5.48497 8.56383 5.11046 9.73209C5.09192 9.79143 5.09192 9.8211 5.16979 9.85819ZM11.0211 13.0811C11.0285 13.0069 10.9988 12.9847 10.9284 12.9847L10.3091 13.0143C9.4637 13.0551 8.62198 13.1664 7.79138 13.3407C6.90515 13.5447 6.03006 13.8117 5.17721 14.1381C5.10675 14.1641 5.08451 14.1937 5.10675 14.2716C5.25137 14.7352 5.44789 15.1803 5.69262 15.6031C6.58255 17.1644 8.02127 18.3438 9.73068 18.9076C9.80113 18.9298 9.8308 18.9113 9.85305 18.8519L9.96429 18.5627C10.2498 17.7467 10.4797 16.9085 10.6503 16.0629C10.832 15.1766 10.9469 14.279 10.9988 13.3778C11.01 13.2777 11.0137 13.1516 11.0211 13.0811ZM18.9007 14.2827C18.9266 14.1974 18.9081 14.1604 18.8265 14.127C18.5299 14.0268 18.2443 13.9082 17.944 13.8229C17.3322 13.6448 16.724 13.4594 16.1011 13.3185C15.2594 13.1442 14.4028 13.0366 13.5425 12.9921H13.0642C13.0012 12.9921 12.9641 12.9958 12.9789 13.0774C12.99 13.1627 12.9938 13.248 12.9938 13.3296C13.0383 13.808 13.0568 14.2902 13.131 14.7612C13.2422 15.4695 13.3831 16.1779 13.5277 16.8826C13.6835 17.5502 13.8874 18.2066 14.147 18.8408C14.1729 18.9113 14.2063 18.9372 14.2916 18.9113C15.1481 18.622 15.9491 18.1806 16.6462 17.6021C17.6993 16.7379 18.4854 15.5919 18.9044 14.2939V14.2827H18.9007ZM18.8413 9.8619C18.9118 9.83594 18.934 9.79885 18.9118 9.73209C18.808 9.44652 18.7116 9.15353 18.5781 8.87908C17.7252 7.08775 16.1715 5.73034 14.2879 5.11839C14.21 5.09243 14.1655 5.10356 14.1395 5.18515C14.0357 5.48556 13.9171 5.79339 13.8095 6.10122C13.6167 6.70574 13.4647 7.3214 13.3534 7.94447C13.1495 8.931 13.0271 9.92866 12.9863 10.9337C12.9826 11.0079 13.0086 11.0265 13.0753 11.0265H13.6575V10.9968C14.6068 10.9523 15.5523 10.8225 16.4756 10.6037C17.2802 10.4071 18.0738 10.1623 18.8488 9.87303V9.8619H18.8413Z"
fill="currentColor"></path>
</svg>
</cs-icon></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base">ChurchSuite</span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left" style="display: none;"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText">For users/admins - the back-office system for staff and key volunteers.</span></div>
</div>
</div>
</button><button tabindex="0" @click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10" data-system="my">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16" style="display: none;">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"><cs-icon kit="tablericons"
icon="user-circle" class="block h-10 w-10"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-circle" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"></path>
</svg></cs-icon></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base">My ChurchSuite</span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left" style="display: none;"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText">For members - update your personal details and manage engagement.</span></div>
</div>
</div>
</button><button tabindex="0" @click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10" data-system="checkin">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16" style="display: none;">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"><cs-icon kit="platform"
icon="checkin-churchsuite" class="block h-10 w-10"><svg viewBox="0 0 552 553" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M184 86.2773C176.375 86.2773 169.062 89.3064 163.671 94.698C158.279 100.09 155.25 107.402 155.25 115.027V437.027C155.25 444.652 158.279 451.965 163.671 457.357C169.062 462.748 176.375 465.777 184 465.777H264.5C274.027 465.777 281.75 473.5 281.75 483.027C281.75 492.554 274.027 500.277 264.5 500.277H184C167.225 500.277 151.137 493.614 139.275 481.752C127.414 469.89 120.75 453.802 120.75 437.027V115.027C120.75 98.2524 127.414 82.1645 139.275 70.3028C151.137 58.4412 167.225 51.7773 184 51.7773H368C384.775 51.7773 400.863 58.4412 412.725 70.3028C424.586 82.1645 431.25 98.2524 431.25 115.027V333.527C431.25 343.054 423.527 350.777 414 350.777C404.473 350.777 396.75 343.054 396.75 333.527V115.027C396.75 107.402 393.721 100.09 388.329 94.698C382.938 89.3064 375.625 86.2773 368 86.2773H184Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M235.75 92.0273C235.75 82.5004 243.473 74.7773 253 74.7773H299C308.527 74.7773 316.25 82.5004 316.25 92.0273C316.25 101.554 308.527 109.277 299 109.277H253C243.473 109.277 235.75 101.554 235.75 92.0273Z" fill="currentColor">
</path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M292.522 286.342C301.716 286.845 310.857 288.029 319.869 289.884C326.51 291.403 333.052 293.331 339.619 295.21C342.805 296.126 345.917 297.379 349.078 298.439C349.96 298.729 350.156 299.114 349.862 300.006C345.386 313.712 336.979 325.855 325.652 334.974C318.186 341.063 309.637 345.737 300.437 348.758C299.531 349.072 299.188 348.758 298.894 348.035C296.141 341.349 293.929 334.459 292.277 327.431C290.734 320.008 289.214 312.562 288.014 305.067C287.23 300.102 287.009 295.017 286.568 290.005C286.568 289.113 286.568 288.197 286.396 287.306C286.225 286.414 286.642 286.39 287.328 286.414L292.522 286.342Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M293.699 265.569C291.592 265.569 289.484 265.569 287.377 265.569C286.617 265.569 286.372 265.352 286.397 264.605C286.86 254.018 288.187 243.485 290.366 233.107C291.57 226.527 293.207 220.031 295.267 213.659C296.394 210.406 297.718 207.201 298.796 204.02C299.09 203.2 299.58 203.032 300.388 203.321C310.387 206.537 319.613 211.723 327.504 218.564C335.396 225.405 341.786 233.757 346.285 243.108C347.706 245.976 348.735 249.085 349.887 252.073C350.181 252.82 349.887 253.182 349.2 253.471C340.889 256.541 332.395 259.108 323.765 261.159C313.86 263.443 303.861 265.096 293.699 265.569Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M265.274 290.511C264.687 299.999 263.435 309.436 261.525 318.755C259.692 327.69 257.236 336.491 254.174 345.095C253.831 346.131 253.39 347.119 252.998 348.131C252.605 349.143 252.434 348.999 251.723 348.758C233.374 342.83 217.918 330.411 208.351 313.911C205.757 309.481 203.662 304.786 202.103 299.909C201.833 299.09 202.103 298.752 202.813 298.463C211.969 295.049 221.351 292.255 230.895 290.101C239.772 288.271 248.787 287.159 257.849 286.775L264.441 286.462C265.25 286.462 265.519 286.679 265.446 287.474C265.372 288.269 265.323 289.45 265.274 290.511Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M265.154 259.544C265.154 261.231 265.326 262.942 265.448 264.653C265.448 265.352 265.252 265.593 264.541 265.568C253.292 265.348 242.086 264.106 231.069 261.857C221.426 259.705 211.951 256.878 202.718 253.398C201.958 253.133 201.958 252.748 202.179 252.097C206.17 239.749 213.386 228.648 223.105 219.901C231.33 212.39 241.098 206.703 251.75 203.224C252.51 202.959 252.853 203.224 253.098 203.851C254.715 208.671 256.553 213.49 257.999 218.503C260.672 227.935 262.654 237.543 263.929 247.253C264.492 251.326 264.811 255.447 265.228 259.544H265.154Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M489.99 378.83C496.727 385.566 496.727 396.488 489.99 403.225L397.99 495.225C391.254 501.961 380.331 501.961 373.595 495.225L327.595 449.225C320.858 442.488 320.858 431.566 327.595 424.83C334.331 418.093 345.254 418.093 351.99 424.83L385.792 458.632L465.595 378.83C472.331 372.093 483.254 372.093 489.99 378.83Z"
fill="currentColor"></path>
</svg>
</cs-icon></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base">Check-In</span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template><span x-text="account.badgeText"
class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping">New</span></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left" style="display: none;"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText">For attendance - check children and team members into sessions.</span></div>
</div>
</div>
</button><button tabindex="0" @click.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)"
@keydown.enter.prevent="account.redirect ? window.location.href = account.redirect : submitAccountFromSystem(account.system)" :data-system="account.system"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10" data-system="connect">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16" style="display: none;">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"><cs-icon kit="tablericons"
icon="devices" class="block h-10 w-10"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-devices" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M13 9a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-6a1 1 0 0 1 -1 -1v-10z"></path>
<path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9"></path>
<path d="M16 9h2"></path>
</svg></cs-icon></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base">Connect</span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left" style="display: none;"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText">For services - a suite of applications for use at Sunday services and in-person
events.</span></div>
</div>
</div>
</button></div>
</div>
<div class="space-y-3"></div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" @submit.prevent="submitUsernamePassword($event)"
class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Enter your login details</div>
</div>
<div class="space-y-3"><button tabindex="-1" x-init="account = login" class="flex login p-4 rounded-lg space-x-4 w-full pointer-events-none">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span x-text="account.badgeText"
class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button><template hidden="true" x-if="account.system == 'my'">
<div class="space-y-1 w-full">
<div class="space-y-1">
<div class="flex justify-between"><label for="username" id="username__label" class="block text-sm leading-5 text-gray-700 mb-0">Email<span class="text-red-500"> *</span></label></div>
</div>
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-base"><input inputmode="email" name="username" type="text" value=""
id="username" x-intersect="if (!username || username.length == 0) $focus.focus($el)" :value="username" aria-labelledby="username__label"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-base block w-full rounded-l-md rounded-r-md flex-grow text-center"></div><span hidden="1" id="username__error" x-text="errors['username']"
:hidden="!errors['username']" class="text-red-500 text-xs block px-1"></span>
</div>
</template><template hidden="true" x-if="account.system !== 'my'">
<div class="space-y-1 w-full">
<div class="space-y-1">
<div class="flex justify-between"><label for="username" id="username__label" class="block text-sm leading-5 text-gray-700 mb-0">Email / Username<span class="text-red-500"> *</span></label></div>
</div>
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-base"><input name="username" type="text" value="" id="username"
x-intersect="if (!username || username.length == 0) $focus.focus($el)" :value="username" aria-labelledby="username__label"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-base block w-full rounded-l-md rounded-r-md flex-grow text-center"></div><span hidden="1" id="username__error" x-text="errors['username']"
:hidden="!errors['username']" class="text-red-500 text-xs block px-1"></span>
</div>
</template>
<div x-data="{
showPassword: false,
}" class="space-y-1 w-full">
<div class="space-y-1">
<div class="flex justify-between"><label for="password" id="password__label" class="block text-sm leading-5 text-gray-700 mb-0">Password<span class="text-red-500"> *</span></label></div>
</div>
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-base"><input autocomplete="off" name="password" type="password"
value="" id="password" x-intersect="if (username && username.length > 0) $focus.focus($el)" :type="showPassword ? 'text' : 'password'" aria-labelledby="password__label"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-base block w-full rounded-l-md rounded-r-md flex-grow text-center px-10">
<div @click.prevent="showPassword = !showPassword" class="flex items-center justify-center pr-3 rounded-md text-gray-500 select-none absolute inset-y-0 right-0">
<a href="#toggle" class="inline-flex items-center text-brand-600 focus:outline-none focus:ring-2 rounded-full p-0.5"><cs-icon kit="tablericons" icon="eye-off" title="Show" x-show="!showPassword" class="block h-6 w-6 self-center"></cs-icon><cs-icon kit="tablericons" icon="eye" title="Hide" x-show="showPassword" class="block h-6 w-6 self-center"></cs-icon></a>
</div>
</div><span hidden="1" id="password__error" x-text="errors['password']" :hidden="!errors['password']" class="text-red-500 text-xs block px-1"></span>
</div>
</div>
<div class="space-y-3">
<div class="flex flex-col items-center space-y-2">
<div id="recaptcha-container" x-init="
if (recaptchaRequired) renderRecaptcha();
$watch('errors', errorArray => {
if (Object.keys(errorArray).includes('recaptcha_required')) {
if (errorArray['recaptcha_required']) {
renderRecaptcha();
}
}
})
" data-sitekey="6LcMBtciAAAAAIYdDWuAI-QAXd09gRL1owZiEBm0"></div><span id="recacptcha__error" :class="errors && errors.recaptcha ? '' : 'hidden'" class="text-red-500 text-xs block px-1">This field is required.</span>
</div><button type="submit"
class="disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed active:bg-brand-700 bg-brand-500 flex focus:ring-2 focus:outline-none font-medium hover:bg-brand-400 justify-center py-3 rounded-md text-white text-base w-full">Next</button>
<div class="flex"></div>
<hr class="w-full border-t border-gray-300">
<div class="flex"></div><template hidden="true" x-for="ssoIntegration in login.ssoIntegrations" :key="ssoIntegration.service"><button type="button" @click.prevent="submitSSO(ssoIntegration.service)"
class="-m-px active:bg-brand-50 border disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none flex focus:outline-none focus:ring-2 font-medium hover:bg-brand-50 hover:border-brand-300 justify-center py-3 rounded-md text-base text-brand-700 w-full"><span
class="space-x-2 inline-flex items-center"><cs-icon kit="platform" :icon="ssoIntegration.icon" class="block h-6 w-6"></cs-icon><span>Continue with <span x-text="ssoIntegration.name"></span></span></span></button></template><button
@click.prevent="stageForgottenPassword()" class="active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center px-4 py-2 rounded-md text-gray-600 text-sm w-full"
style="text-decoration:none">Reset your password</button>
</div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" @submit.prevent="submitForgottenPassword($event)"
class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Reset your password</div>
</div>
<div class="space-y-3"><button tabindex="-1" x-init="account = login" class="flex login p-4 rounded-lg space-x-4 w-full pointer-events-none">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span x-text="account.badgeText"
class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button>
<div class="space-y-1 w-full">
<div class="space-y-1">
<div class="flex justify-between"><label for="reset_email" id="reset_email__label" class="block text-sm leading-5 text-gray-700 mb-0">Email<span class="text-red-500"> *</span></label></div>
<p id="reset_email__help" class="mb-0 text-xs text-gray-500">If your email address has an active login, we'll send you instructions on how to reset your password.</p>
</div>
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-base"><input name="reset_email" type="email" value=""
id="reset_email" x-intersect="$focus.focus($el)" aria-describedby="reset_email__help" aria-labelledby="reset_email__label"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-base block w-full rounded-l-md rounded-r-md flex-grow text-center"></div><span hidden="1" id="reset_email__error"
x-text="errors['reset_email']" :hidden="!errors['reset_email']" class="text-red-500 text-xs block px-1"></span>
</div>
</div>
<div class="space-y-3"><button type="submit"
class="disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed active:bg-brand-700 bg-brand-500 flex focus:ring-2 focus:outline-none font-medium hover:bg-brand-400 justify-center py-3 rounded-md text-white text-base w-full">Send
password reset</button></div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Choose your account</div>
</div>
<div class="space-y-3"><button tabindex="-1" x-init="account = login" class="flex login p-4 rounded-lg space-x-4 w-full pointer-events-none">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span x-text="account.badgeText"
class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button>
<div>This email address and password matches more than one user account. Please choose user account you wish to access.</div>
<div x-intersect="$focus.first()" @keydown.up="$focus.previous()" @keydown.down="$focus.next()" class="flex flex-col gap-px"><template hidden="true" x-for="(account, id) in sharedUsers" :key="id"><button tabindex="0"
@click.prevent="setUsername(id); submitChooseUser($event)" @keydown.enter.prevent="setUsername(id); submitChooseUser($event)" :data-id="id"
class="flex login p-4 rounded-lg space-x-4 w-full cursor-pointer focus:bg-brand-25 focus:shadow-sm hover:bg-brand-25 hover:shadow-sm focus:outline-none focus:ring-2 focus:z-10">
<div class="flex space-x-4">
<div class="flex-0"><img x-show="account.avatar && account.avatar.length > 0" :src="account.avatar" class="h-16 rounded-full w-16">
<div x-html="account.svg || account.initials" x-show="account.avatar === null || account.avatar.length == 0" class="bg-brand-50 flex w-16 h-16 items-center justify-center rounded-full text-3xl text-brand-500"></div>
</div>
<div class="flex flex-col grow h-16 items-start justify-center space-y-1">
<div class="font-semibold my-0 flex items-center"><span x-text="account.title" class="text-gray-800 text-base"></span><template hidden="true" x-if="account.badgeText && account.badgeText.length > 0"><span
x-text="account.badgeText" class="bg-yellow-50 ml-1 px-2 rounded-lg text-sm text-yellow-600 uppercase pulse animate-ping"></span></template></div>
<div x-show="account.subtitle && account.subtitle.length > 0" x-text="account.subtitle" class="text-gray-600 text-sm text-left"></div>
<div x-show="account.helperText && account.helperText.length > 0" class="flex text-gray-600 text-left text-sm"><span x-text="account.helperText"></span></div>
</div>
</div>
</button></template></div>
</div>
<div class="space-y-3"></div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" @submit.prevent="submitMfa($event)" class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Enter your multi-factor authentication code</div>
</div>
<div class="space-y-3">
<div class="space-y-1 w-full">
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-3xl"><input inputmode="numeric" name="code" pattern="[0-9]*"
placeholder="* * * * * *" type="text" value="" id="code" x-intersect="$focus.focus($el)" aria-label="* * * * * *"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-3xl block w-full rounded-l-md rounded-r-md flex-grow text-center"></div><span hidden="1" id="code__error" x-text="errors['code']"
:hidden="!errors['code']" class="text-red-500 text-xs block px-1"></span>
</div>
</div>
<div class="space-y-3"><button type="submit"
class="disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed active:bg-brand-700 bg-brand-500 flex focus:ring-2 focus:outline-none font-medium hover:bg-brand-400 justify-center py-3 rounded-md text-white text-base w-full">Next</button>
</div>
</form><form @keydown.escape.window.prevent="if (previousStage && previousStage.length > 0) $data[previousStage]()" :class="loading && 'opacity-75 pointer-events-none'" @submit.prevent="submitSetupMfa($event)"
class="space-y-3 isolate relative">
<div class="space-x-4 flex px-4 items-center">
<div class="px-2"><button type="button" x-show="previousStage && previousStage.length > 0" @click.prevent="$data[previousStage]()"
class="rounded-full hover:bg-brand-50 active:text-brand-700 flex focus:ring-2 focus:text-brand-600 focus:outline-none font-medium hover:text-brand-400 justify-center py-2 space-x-3 text-gray-600 text-sm w-12 h-12"
style="text-decoration:none"><cs-icon kit="tablericons" icon="arrow-left" class="block h-8 w-8"></cs-icon></button></div>
<div class="text-left w-full text-gray-700 text-lg">Your church requires Multi-Factor Authentication for all users. You will need to set this up before continuing.</div>
</div>
<div class="space-y-3">
<div class="space-y-2">
<div class="text-gray-600 text-sm space-y-2">
<div class="bg-blue-50 rounded-md px-3 py-2">
<div class="flex flex-grow-0 space-x-3 w-full">
<div class="flex-shrink-0 w-5 text-blue-500"><svg class="w-full" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg></div>
<div class="space-y-2 leading-5 text-sm flex-grow">
<h3 class="text-blue-800 leading-5 m-0"><span>Scan this QR code on your phone using a Multi-Factor Authentication app, like Authy or Google Authenticator, and then type the 6 digit code generated by the app and save. When you next log
in from a browser you will be asked for your user password and the latest 6 digit code generated by the authentication app.</span></h3>
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center"><img :src="'data:image/png;base64, ' + mfaQrCode">
<div class="space-y-1 w-full">
<div class="space-y-1">
<div class="flex justify-between"><label for="code" id="code__label" class="block text-sm leading-5 text-gray-700 mb-0">6 Digit Code<span class="text-red-500"> *</span></label></div>
</div>
<div class="flex relative rounded-md shadow-sm focus-within:border-brand-300 focus-within:ring focus-within:ring-brand-300 focus-within:ring-opacity-50 focus-within:z-10 text-3xl"><input inputmode="numeric" maxlength="6" name="code"
pattern="[0-9]*" placeholder="* * * * * *" type="text" value="" id="code" x-intersect="$focus.focus($el)" aria-labelledby="code__label"
class="border-gray-300 placeholder-gray-400 text-gray-800 focus:ring-0 focus:ring-opacity-0 text-3xl block w-full rounded-l-md rounded-r-md flex-grow text-center"></div><span hidden="1" id="code__error" x-text="errors['code']"
:hidden="!errors['code']" class="text-red-500 text-xs block px-1"></span>
</div>
</div>
</div>
</div>
<div class="space-y-3"><button type="submit"
class="disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed active:bg-brand-700 bg-brand-500 flex focus:ring-2 focus:outline-none font-medium hover:bg-brand-400 justify-center py-3 rounded-md text-white text-base w-full">Next</button>
</div>
</form>Text Content
Clear all Close YOUR BROWSER HAS DISABLED COOKIES, WHICH ARE REQUIRED TO LOG IN. PLEASE ENABLE COOKIES IN YOUR BROWSER SETTINGS AND RELOAD THE PAGE TO CONTINUE. Oasis Church Search for your church Type 2 or more characters to search No results - Next Choose system Choose system ChurchSuite For users/admins - the back-office system for staff and key volunteers. My ChurchSuite For members - update your personal details and manage engagement. Check-InNew For attendance - check children and team members into sessions. Connect For services - a suite of applications for use at Sunday services and in-person events. Enter your login details Email * Email / Username * Password * This field is required. Next -------------------------------------------------------------------------------- Continue with Reset your password Reset your password Email * If your email address has an active login, we'll send you instructions on how to reset your password. Send password reset Choose your account This email address and password matches more than one user account. Please choose user account you wish to access. Enter your multi-factor authentication code Next Your church requires Multi-Factor Authentication for all users. You will need to set this up before continuing. SCAN THIS QR CODE ON YOUR PHONE USING A MULTI-FACTOR AUTHENTICATION APP, LIKE AUTHY OR GOOGLE AUTHENTICATOR, AND THEN TYPE THE 6 DIGIT CODE GENERATED BY THE APP AND SAVE. WHEN YOU NEXT LOG IN FROM A BROWSER YOU WILL BE ASKED FOR YOUR USER PASSWORD AND THE LATEST 6 DIGIT CODE GENERATED BY THE AUTHENTICATION APP. 6 Digit Code * Next Back