<script lang="ts">
    import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
    import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
    import Panel from '$lib/components/dashboard/auth/Panel.svelte';
    import constraints from '$lib/constraints';
  
    export let data;
  </script>
  
  <svelte:head>
    <title>YourSitee</title>
  </svelte:head>
  
  <Panel
    title="Welcome back! Log in to continue"
    links={[
      { url: 'register', text: 'Register' },
      // { url: 'login/recovery', text: 'Forgot password?' },
    ]}
    button="Sign In">
    <InputGroup title="Username/Email address" required={true}>
      <TextInput
        name="identifier"
        required
        placeholder="Provide your username or email"
        tabindex={1}
        minlength={1}
        maxlength={64}
        value={data.username ?? data.email ?? ''} />
    </InputGroup>
    <InputGroup title="Password" required={true}>
      <TextInput
        name="password"
        required
        placeholder="Password"
        type="password"
        tabindex={2}
        minlength={constraints.password.min}
        maxlength={constraints.password.max} />
    </InputGroup>
  </Panel>
  