Merge branch 'develop/recuperar-acceso' into 'master'
se agregan paginas para recuperar acceso See merge request m3f_usm/admin_transporte/frontend!1francisco/photos
Francisco Sandoval
commit
28bdccc4c8
|
|
@ -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}>
|
||||
|
|
@ -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>
|
||||
<input class="form-control form-control-lg" type="text" bind:value={form.username} required
|
||||
placeholder="Ingrese su cuenta de usuario">
|
||||
<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}>Contraseña</label>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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()
|
||||
|
|
@ -16,4 +16,34 @@ 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()
|
||||
}
|
||||
Loading…
Reference in New Issue