Merge branch 'master' of https://gitlab.com/m3f_usm/admin_transporte/frontend into develop/Ronald

src/components/InputRut.svelte

@@ -0,0 +1,18 @@
+<script>
+    export let value=null
+
+    $: value = formatRut(value)
+
+    function formatRut(str) {
+        if (!str) return str;
+        if (str.length < 3) return str;
+
+        const arr = str.replace(/[.|-]/g,'').split('')
+        const dv = arr.pop().toUpperCase()
+        const num = Number(arr.join(''))
+        if (isNaN(num)) return str;
+        return num.toLocaleString('en').replace(/,/g,'.') + '-' + dv;
+    }
+</script>
+
+<input type="text" bind:value={value} class="form-control" {...$$props}>

src/pages/site/Login.svelte

@@ -1,8 +1,9 @@
 <script>
     import { Link } from 'svelte-navigator'
     import { createToken } from '$/services/login'
+    import InputRut from '$/components/InputRut.svelte';
 
-    let form = { username: '', pass: '' }
+    let form = { rut: '', pass: '' }
     let message_error = '';
     let loading = false;
 
@@ -32,9 +33,8 @@
         <div class="card-body">
             <form on:submit|preventDefault={onIngresar}>
                 <div class="mb-3">
-                    <label class="form-label" for={null}>Cuenta</label>
+                    <label class="form-label" for={null}>RUT</label>
-                    <input class="form-control form-control-lg" type="text" bind:value={form.username} required
+                    <InputRut bind:value={form.rut} class="form-control form-control-lg" required placeholder="12.345.678-9" />
-                        placeholder="Ingrese su cuenta de usuario">
                 </div>
                 <div class="mb-3">
                     <label class="form-label" for={null}>Contraseña</label>

src/pages/site/Password.svelte

@@ -1 +1,106 @@
-En desarrollo
+<script>
+    import { Link } from 'svelte-navigator'
+    import { crearPassword, infoTokenPassword } from '$/services/login'
+    import InputRut from '$/components/InputRut.svelte';
+
+    let form = { rut: '', email: '' }
+    let message_error = '';
+    let error_token = '';
+    let loading = false;
+    let password_confirma = '';
+    let exito = false;
+
+    const mi_url = new URL(document.location.href)
+    const token = mi_url.searchParams.get('s')
+    let persona = null
+
+    infoTokenPassword({ token })
+        .then(data => persona = data)
+        .catch(error => error_token = error)
+
+    // validar usuario contraseña
+    async function onSave() {
+        try {
+            loading = true;
+            message_error = ''
+            const resultado = await crearPassword({ ...form, token })
+            exito = resultado.ok;
+        } catch (error) {
+            message_error = error.message || error
+            setTimeout(() => message_error = '', 3000)
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="container p-4 bg-neutral box-login">
+    <div style="margin-top: 100px;"></div>
+    <div class="card mb-4 m-auto">
+        <div class="card-header bg-dark text-center p-3">
+            <h2 class="text-light">Crear nueva contraseña de acceso</h2>
+        </div>
+        <div class="card-body">
+            {#if !exito}
+                <form on:submit|preventDefault={onSave}>
+                    {#if error_token}
+                        <div class="alert alert-warning">😢 {error_token}</div>
+                    {:else if !persona}
+                        <div class="alert alert-info">Cargando información...</div>
+                    {/if}
+
+                    {#if persona?.nombres}
+                        <h3>{persona.nombres} {persona.apellido_a} {persona.apellido_a}</h3>
+
+                        <div class="mb-3">
+                            <label class="form-label" for={null}>Código de seguridad</label>
+                            <input class="form-control form-control-lg" type="text" bind:value={form.codigo} required>
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label" for={null}>Nueva contraseña</label>
+                            <input class="form-control form-control-lg" type="password" bind:value={form.password} required>
+                        </div>
+                        <div class="mb-3">
+                            <label class="form-label" for={null}>Repita la contraseña</label>
+                            <input class="form-control form-control-lg" type="password" bind:value={password_confirma} required>
+                            {#if password_confirma !== form.password}
+                                <div class="alert alert-warning">Las contraseñas no coinciden....</div>
+                            {/if}
+                        </div>
+                    {/if}
+
+                    {#if message_error}
+                        <div class="mb-3 text-danger">😢 {message_error}</div>
+                    {/if}
+
+                    <Link to="/">Volver</Link>
+
+                    <div class="text-center mt-3">
+                        <button type="submit" class="btn btn-dark" disabled={loading || !form.password || password_confirma !== form.password || !form.codigo}>
+                            <span class="fa fa-key mr-3"></span> Enviar
+                        </button>
+                    </div>
+                </form>
+            {:else}
+                <div class="alert alert-success">
+                    😃 Se ha guardado su nueva contraseña, puede volver e ingresar.
+                </div>
+
+                <a href="/">Volver</a>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .box-login {
+        height: 100vh;
+        max-width: inherit;
+    }
+
+    .box-login .card {
+        width: 400px;
+        max-width: 100%;
+        min-width: 200px;
+    }
+</style>

src/pages/site/Recovery.svelte

@@ -1 +1,78 @@
-En desarrollo
+<script>
+    import { Link } from 'svelte-navigator'
+    import { recuperarAcceso } from '$/services/login'
+    import InputRut from '$/components/InputRut.svelte';
+
+    let form = { rut: '', email: '' }
+    let message_error = '';
+    let loading = false;
+    let exito = false
+
+    // validar usuario contraseña
+    async function onRecuperar() {
+        try {
+            loading = true;
+            message_error = ''
+            const resultado = await recuperarAcceso(form);
+            exito = resultado.ok;
+            console.log({ resultado })
+        } catch (error) {
+            message_error = error.message || error
+            setTimeout(() => message_error = '', 3000)
+        } finally {
+            loading = false;
+        }
+    }
+</script>
+
+<div class="container p-4 bg-neutral box-login">
+    <div style="margin-top: 100px;"></div>
+    <div class="card mb-4 m-auto">
+        <div class="card-header bg-dark text-center p-3">
+            <h2 class="text-light">Recuperar Acceso</h2>
+        </div>
+        <div class="card-body">
+            {#if !exito}
+                <form on:submit|preventDefault={onRecuperar}>
+                    <div class="mb-3">
+                        <label class="form-label" for={null}>RUT</label>
+                        <InputRut bind:value={form.rut} class="form-control form-control-lg" required placeholder="12.345.678-9" />
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" for={null}>Correo Electrónico</label>
+                        <input class="form-control form-control-lg" type="email" bind:value={form.email} required placeholder="usuario@correo.com">
+                    </div>
+
+                    {#if message_error}
+                        <div class="mb-3 text-danger">{message_error}</div>
+                    {/if}
+
+                    <Link to="/">Volver</Link>
+
+                    <div class="text-center mt-3">
+                        <button type="submit" class="btn btn-dark" disabled={loading}>
+                            <span class="fa fa-key mr-3"></span> Enviar
+                        </button>
+                    </div>
+                </form>
+            {:else}
+                <div class="alert alert-success">
+                    <p>Se le ha enviado un correo electrónico con instrucciones para crear una nueva contraseña</p>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .box-login {
+        height: 100vh;
+        max-width: inherit;
+    }
+
+    .box-login .card {
+        width: 400px;
+        max-width: 100%;
+        min-width: 200px;
+    }
+</style>

src/services/login.js

@@ -1,9 +1,9 @@
 import { base, getToken } from "./_config";
 
-export async function createToken({ username=null, password=null }) {
+export async function createToken({ rut=null, password=null }) {
     const res = await fetch(`${base}/auth/`, {
         method: 'POST',
-        body: JSON.stringify({ username, password }),
+        body: JSON.stringify({ rut, password }),
         headers: { "Content-Type": "application/json" }
     })
     if (!res.ok) throw await res.text()
@@ -17,3 +17,33 @@ export async function getInfoToken() {
     if (!res.ok) throw await res.text()
     return res.json()
 }
+
+export async function recuperarAcceso(data) {
+    const res = await fetch(`${base}/auth/recuperar/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function crearPassword(data) {
+    const res = await fetch(`${base}/auth/nueva-contrasena/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function infoTokenPassword(data) {
+    const res = await fetch(`${base}/auth/info/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}