<div class="w-full max-w-sm p-6 m-auto mx-auto rounded-lg shadow-md bg-gray-800 border border-slate-600">
<h1 class="text-3xl font-semibold text-center text-white">Dollan</h1>
<form class="mt-6">
<div>
<label for="username" class="block text-sm text-gray-200">AnvΓ€ndarnamn</label>
<input type="text"
class="block w-full px-4 py-2 mt-2 rounded-lg bg-gray-800 text-gray-300 border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40"
v-model="login.username" />
</div>
<div class="mt-4">
<div class="flex items-center justify-between">
<label for="password" class="block text-sm text-gray-200">LΓΆsenord</label>
<NuxtLink to="/user/forgotpassword" class="text-xs text-gray-400 hover:underline">GlΓΆmt lΓΆsenordet?
</NuxtLink>
</div>
<input type="password"
class="block w-full px-4 py-2 mt-2 rounded-lg bg-gray-800 text-gray-300 border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 "
v-model="login.password" />
</div>
<div class="mt-6">
<button
class="w-full px-6 py-2.5 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-orange-500 rounded-lg hover:bg-orange-600 focus:outline-none focus:ring focus:ring-orange-300 focus:ring-opacity-50"
type="submit"
@click="signIn('credentials', { username: login.username, password: login.password, callbackUrl: '/' })">
Logga in
</button>
</div>
</form>
<div class="flex items-center justify-between mt-4">
<span class="w-1/5 border-b border-gray-600 lg:w-1/5"></span>
<a href="#" class="text-xs text-center uppercase text-gray-400 hover:underline">
eller logga in genom
</a>
<span class="w-1/5 border-b border-gray-400 lg:w-1/5"></span>
</div>
<div class="flex items-center mt-6 -mx-2">
<button type="button"
class="flex items-center justify-center w-40 px-6 py-2 text-sm font-medium text-white transition-colors duration-300 transform bg-sky-800 rounded-lg hover:bg-sky-700 focus:bg-blue-400 focus:outline-none mx-2"
@click="signOut()">
<svg fill="#ffff" width="30" height="30" x="0px" y="0px" viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;">
<g>
<path
d="M31.9,0.9C15.7,0.9,2.1,13.5,1,29.5l16.6,6.9c1.4-1,3.1-1.4,4.9-1.4c0.1,0,0.4,0,0.4,0l7.3-10.9c0-0.1,0-0.1,0-0.1
c0-6.5,5.2-11.7,11.7-11.7S53.7,17.5,53.7,24S48.5,35.7,42,35.7c-0.1,0-0.1,0-0.3,0l-10.6,7.6c0,0.1,0,0.3,0,0.4
c0,4.8-3.9,8.9-8.9,8.9c-4.2,0-7.9-3.1-8.6-7L2,40.5c3.7,13,15.8,22.7,29.9,22.7C49,63.1,63,49.2,63,32S49,0.9,31.9,0.9z" />
<path d="M20.4,48.1l-3.8-1.5c0.7,1.4,1.8,2.7,3.4,3.2c3.2,1.4,7.2-0.1,8.6-3.5c0.7-1.7,0.7-3.4,0-5.1s-2-3-3.5-3.7
c-1.6-0.7-3.2-0.6-4.8-0.1l3.9,1.7c2.4,1.1,3.7,3.9,2.7,6.3C25.8,47.9,23,49,20.4,48.1z" />
<path d="M50,24c0-4.2-3.5-7.9-7.9-7.9c-4.2,0-7.9,3.5-7.9,7.9s3.7,7.9,7.9,7.9S50,28.3,50,24z M36.4,24c0-3.2,2.7-5.8,5.8-5.8
c3.2,0,5.8,2.7,5.8,5.8c0,3.2-2.7,5.8-5.8,5.8C39,29.9,36.4,27.2,36.4,24z" />
</g>
</svg>
<span class="hidden mx-2 sm:inline">Steam</span>
</button>
<button type="button"
class="flex items-center justify-center w-40 px-6 py-2 text-sm font-medium text-white transition-colors duration-300 transform bg-blue-400 rounded-lg hover:bg-blue-300 focus:bg-blue-400 focus:outline-none mx-2"
@click="signIn('discord')">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-discord"
viewBox="0 0 16 16">
<path
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z" />
</svg>
<span class="hidden mx-2 sm:inline">Discord</span>
</button>
</div>
<p class="mt-8 text-xs font-light text-center text-gray-400"> Har du inget konto? <NuxtLink to="/user/register"
class="font-medium text-gray-200 hover:underline ">Skapa ett</NuxtLink>
</p>
</div>
<pre v-if="data" class="mt-8 text-xs font-light text-center text-gray-400"><span>Data:</span> {{ data }}</pre>
</template>
<script setup>
const { signOut, signIn, data } = useSession()
let login = {
username: '',
password: '',
}
</script>
CredentialsProvider.default({
// The name to display on the sign in form (e.g. "Sign in with...")
name: "Credentials",
// `credentials` is used to generate a form on the sign in page.
// You can specify which fields should be submitted, by adding keys to the `credentials` object.
// e.g. domain, username, password, 2FA token, etc.
// You can pass any HTML attribute to the <input> tag through the object.
credentials: {
username: { label: "Username", type: "text" },
password: { label: "Password", type: "password" }
},
async authorize(credentials, req) {
// Add logic here to look up the user from the credentials supplied
const user = { id: "1", name: "J Smith", email: "[email protected]" }
if (user) {
// Any object returned will be saved in `user` property of the JWT
return user
} else {
// If you return null then an error will be displayed advising the user to check their details.
return null
// You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
}
}
})
For me this happens when I use a custom signing page using and then use the signIn function provided by useSession()
when using the standard one made by the module it works as intended, this issue is really strange and something I do not know the cause of. Chromium does not complain about anything but safari complains about "Failed to load resource: you do not have access" and "Unhandled Promise Rejection: FetchError: Load failed ()"
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent