129 lines
3.2 KiB
Svelte
129 lines
3.2 KiB
Svelte
<svelte:options tag="auth-component" />
|
|
|
|
<script>
|
|
|
|
// Import statements
|
|
import { onMount, setContext,getContext } from 'svelte'
|
|
import { sendText } from "/js/libraries/serverTools.js"
|
|
import * as AuthTools from "/js/libraries/authTools.js"
|
|
import "/js/components/login-component.js"
|
|
import "/js/components/signup-component.js"
|
|
|
|
// Main code
|
|
AuthTools.redirectLogged()
|
|
|
|
let loginComponent
|
|
let signupComponent
|
|
|
|
let context = {
|
|
googleInit: false
|
|
}
|
|
setContext("auth",context)
|
|
|
|
function switchFocus(component) {
|
|
if (component==loginComponent) {
|
|
loginComponent.focused = true
|
|
signupComponent.focused = false
|
|
}
|
|
else {
|
|
loginComponent.focused = false
|
|
signupComponent.focused = true
|
|
}
|
|
}
|
|
|
|
function callbackGoogle(data) {
|
|
console.log(data)
|
|
sendText("/signup-google",data.credential,(response) => AuthTools.processLoginResponse(response,context.msgs,context.remember.checked))
|
|
}
|
|
|
|
function initGoogle() {
|
|
if (typeof google != 'undefined') {
|
|
google.accounts.id.initialize({
|
|
client_id: '93612176787-sr8qjqem4e3kok4msrnj8s1illt85a9g.apps.googleusercontent.com',
|
|
callback: callbackGoogle,
|
|
auto_select: true,
|
|
context: "signin"
|
|
})
|
|
context.googleInit = true
|
|
}
|
|
else {
|
|
setTimeout(initGoogle,100)
|
|
}
|
|
}
|
|
|
|
initGoogle()
|
|
|
|
</script>
|
|
|
|
<div id="auth-group">
|
|
<div id="auth-grid-group">
|
|
<login-component bind:this={loginComponent} on:click={() => switchFocus(loginComponent)} on:keydown={() => ""}></login-component>
|
|
<signup-component bind:this={signupComponent} on:click={() => switchFocus(signupComponent)} on:keydown={() => ""}></signup-component>
|
|
</div>
|
|
<div id="auth-or" class="pane">
|
|
<span>OR</span>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@import '/css/common.css';
|
|
@import '/css/auth.css';
|
|
|
|
span {
|
|
font-size: 1.4rem;
|
|
font-family: var(--sans-serif,sans-serif);
|
|
}
|
|
|
|
#auth-group {
|
|
margin: auto;
|
|
width: auto;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
#auth-grid-group {
|
|
display: grid;
|
|
grid-template-columns: 30rem 30rem;
|
|
justify-content: center;
|
|
gap: 1.37rem;
|
|
width: 100%;
|
|
}
|
|
|
|
#auth-or {
|
|
display: flex;
|
|
position: absolute;
|
|
margin: auto;
|
|
top: 40%;/*40%;*/
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 5.4rem;
|
|
height: 5.4rem;
|
|
border-radius: 6.8rem;
|
|
background-color: white;
|
|
align-items:center;
|
|
justify-content:center;
|
|
font-family: var(--sans-serif,sans-serif);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
#auth-grid-group {
|
|
display: grid;
|
|
grid-template-columns: 30rem;
|
|
grid-template-rows: auto auto;
|
|
justify-content: center;
|
|
gap: 1.37rem;
|
|
width: 100%;
|
|
}
|
|
|
|
#auth-or {
|
|
top: 40rem;/*46.4rem;*/
|
|
}
|
|
|
|
#auth-group {
|
|
margin-top: 2rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |