import { Authentication } from 'iltio/react'

export const MyAuthentication = () => (
  <Authentication
    configuration={{ token: APP_TOKEN }}
    onSuccess={() => { redirect('/overview') }}
  />
)

import { Authentication } from 'iltio/react'

export const MyAuthentication = () => (
  <Authentication
    configuration={{ token: APP_TOKEN }}
    onSuccess={(name, token, registration) => { redirect('/overview') }}
    labels={{ submit: 'Login or Register' }}
    allowPhone={false}
    allowMail={true}
    Components={{ Button: MyButton, Input: MyInput, Form: MyForm, Tab: MyTab }}
    initialCountryCode="ch"
    variables={{
      color: 'blue',
      contrast: 'white',
      borderRadius: 10
    }}
    style={{
      form: { padding: 5 },
      inputMail: { background: 'red' },
      button: { cursor: 'pointer' },
      tab: { fontSize: 12 }
    }}
  />
)

export default () => (
  <Authentication
    labels={{
      submit?: string, // Label of the submit button.
      tabPhone?: string, // Tab phone label text.
      tabMail?: string, // Tab mail label text.
      resend?: string, // Resend code button label.
    }}
    variables={{
      color?: string, // General color used.
      colorError?: string, // Color used to highlight erroneous parts.
      contrast?: string, // Contrast color for dark backgrounds (button).
      borderRadius?: number | string, // Border radius of various elements.
      smallSpace?: number | string, // Smaller space used.
      space?: number | string, // Larger space used.
      fontSize?: number | string, // General font size.
      fontFamily?: string, // General font family.
    }}
    style={{
      form?: CSSProperties, // Wrapper element.
      tabWrapper?: CSSProperties, // Wrapper for tabs (if multiple methods).
      tab?: CSSProperties,
      inputMail?: CSSProperties,
      inputCode?: CSSProperties, // Verification code input in step 2.
      button?: CSSProperties, // Generic button.
      error?: CSSProperties, // Error message text.
      message?: CSSProperties, // Information message text.
      // Various styles to configure the phone number input styles.
      phoneWrapper?: CSSProperties,
      phoneTop?: CSSProperties,
      phoneCountry?: { button?: CSSProperties; flag?: CSSProperties; prefix?: CSSProperties },
      phoneInput?: CSSProperties,
      phoneCountryOptions?: CSSProperties,
      phoneCountryOption?: { button?: CSSProperties; text?: CSSProperties },
      phoneInputCountrySearch?: CSSProperties,
    }}
    Components={{
      Form?: FunctionComponent, // Wrapper element.
      TabWrapper?: FunctionComponent,
      Tab?: FunctionComponent,
      Input?: FunctionComponent, // Input used for mail, phone and code.
      Button?: FunctionComponent, // Submit and resend button.
      Error?: FunctionComponent, // Error message element.
      Message?: FunctionComponent, // Information message element.
      // Various elements for the phone number input.
      PhoneWrapper?: FunctionComponent,
      PhoneInput?: FunctionComponent,
      PhoneTop?: FunctionComponent,
      PhoneCountry?: FunctionComponent,
      PhoneCountryOptions?: FunctionComponent,
      PhoneCountryOption?: FunctionComponent,
    }}
    configuration={{
      url?: string,
      token: string,
      storage?: BasicStorage,
      authenticateUrl?: string,
      tokenStorageKey?: string,
      codeTokenStorageKey?: string,
      nameStorageKey?: string,
      pollDuration?: number,
    }}
  />
)

import { MemoryStorage, configure } from 'iltio'

configure({
  token: APP_TOKEN,
  storage?: MemoryStorage,
  url?: 'https://my-server.com/api',
  authenticateUrl?: 'https://my-server.com/api/authenticate',
  pollDuration?: 5000,
  tokenStorageKey?: 'auth-token',
  codeTokenStorageKey?: 'auth-verify-token',
  nameStorageKey?: 'auth-name',
})

import { Authentication, NativeStyles } from 'iltio/native' // Requires "unstable_enablePackageExports" in metro configuration.
import { Authentication, NativeStyles } from 'iltio/dist/native/index.js' // Fallback without exports.

export const MyNativeAuthentication = () => (
  <Authentication
    configuration={{ token: APP_TOKEN }}
    onSuccess={(name, token) => { go('Overview') }}
    style={{
      button: { text: { color: 'blue' }},
      phoneCountryOption: { touchable: { backgroundColor: 'red' }}
    }}
    Components={{
      Error: ({ style, variables, children, ...props }) => (
        <Text style={{ backgroundColor: 'red', marginBottom: variables.smallSpace, ...style }} {...props}>
          {children}
        </Text>
      )
    }}
  />
)

import { Authentication, Store } from 'iltio/native'
import AsyncStorage from '@react-native-async-storage/async-storage'

const readToken = () => Store.token

export const MyNativeAuthentication = () => (
  <Authentication
    configuration={{ token: APP_TOKEN, storage: AsyncStorage }}
    onSuccess={() => {}}
  />
)

<script>
import Authentication from 'iltio/vue'
</script>

<template>
  <Authentication
    :configuration="{ token: 'demo' }"
    :on-success="(name) => console.log(name)"
  />
</template>

<script>
import Authentication from 'iltio/vue'
import { MyButton } from './MyButton.vue'
</script>

<template>
  <Authentication
    :style="{
      form: { width: '300px', border: '1px dashed hsl(0, 0%, 78.0%)', padding: '20px' },
    }"
    :variables="{ color: 'hsl(0, 0%, 43.5%)', contrast: 'red' }"
    :Components="{
      Button: MyButton,
    }"
  />
</template>

<script>
  import Authentication from 'iltio/svelte'
</script>

<Authentication
  configuration={{ token: 'demo' }}
  onSuccess={(name) => console.log(name)}
/>

<script>
  import Authentication from 'iltio/svelte'
  import { MyInput } from './components/MyInput.svelte'
</script>

<Authentication
  style={{
    form: 'width: 300px; border: 1px dashed hsl(0, 0%, 78.0%); padding: 20px;',
  }}
  variables={{ color: 'blue' }}
  Components={{
    Input: MyInput,
  }}
/>

import { javaScriptForm, configure } from 'iltio'

configure({ token: APP_TOKEN })

javaScriptForm('#my-authentication')

import { Store } from 'iltio'

// Reads the token from the assigned storage method.
Store.token

// Manually set the token.
Store.token = USER_TOKEN

// Remove the token.
Store.removeToken()

// Similarly, read, write or remove the name.
Store.name

// Similarly, read, write or remove the code token.
Store.codeToken

import { getNameType } from 'iltio'

getNameType('test@testing.com') => 'mail'
getNameType('+41799629162') => 'phone'

import { authenticate } from 'iltio'

// authenticate(name: string)
const { error, codeToken, registration } = await authenticate('test@testing.com')

import { poll } from 'iltio'

// poll()
const { error, token } = await poll()

import { confirm } from 'iltio'

// confirm(code: string)
const { error, token } = await confirm('1234')

import { resend } from 'iltio'

// resend(token = Store.codeToken)
const { error, token } = await resend()

import { authorize } from 'iltio'

// authorize(token = Store.token)
const { error, role, id, name } = await authorize()

import { logout } from 'iltio'

// logout(server = false, token = Store.token)
const { error } = await logout(true)

import { remove } from 'iltio'

// remove(token = Store.token)
const { error } = await remove()