mirror of
https://github.com/getnamingo/registry.git
synced 2025-08-07 01:55:08 +02:00
302 lines
No EOL
16 KiB
Twig
302 lines
No EOL
16 KiB
Twig
{% extends "layouts/app.twig" %}
|
|
|
|
{% block title %}{{ __('My Profile') }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-wrapper">
|
|
<!-- Page header -->
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<!-- Page pre-title -->
|
|
<div class="page-pretitle">
|
|
{{ __('Overview') }}
|
|
</div>
|
|
<h2 class="page-title">
|
|
{{ __('My Profile') }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page body -->
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
{% include 'partials/flash.twig' %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
|
|
<li class="nav-item">
|
|
<a href="#tabs-details" class="nav-link active" data-bs-toggle="tab">Details</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#tabs-2fa" class="nav-link" data-bs-toggle="tab">2FA</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#tabs-webauthn" class="nav-link" data-bs-toggle="tab">WebAuthn</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active show" id="tabs-details">
|
|
<h4 class="card-title">{{ __('Details') }}</h4>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<form action="{{route('change.password')}}" name="register" method="post">
|
|
{{ csrf.field | raw }}
|
|
<div class="row g-3">
|
|
<div class="col-md">
|
|
<div class="form-label">{{ __('User Name') }}</div>
|
|
<div class="form-control-plaintext">{{ username }}</div>
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="form-label">{{ __('Email') }}</div>
|
|
<div class="form-control-plaintext">{{ email }}</div>
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="form-label">{{ __('Status') }}</div>
|
|
<span class="badge bg-green text-bg-green mt-2">{{ status }}</span>
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="form-label">{{ __('Role') }}</div>
|
|
<span class="badge bg-blue text-bg-blue mt-2">{{ role }}</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="card-title mt-4">{{ __('Change Password') }}</h3>
|
|
<div class="row g-3">
|
|
<div class="col-md">
|
|
<div class="form-label required">{{ __('Old Password') }}</div>
|
|
<input type="password" class="form-control{{ errors.old_password ? ' is-invalid' : '' }}" name="old_password" placeholder="Enter old password" required>
|
|
{% if errors.old_password %}
|
|
<small class="form-hint">{{ errors.old_password | first }}</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md">
|
|
<div class="form-label required">{{ __('New Password') }}</div>
|
|
<input type="password" class="form-control{{ errors.new_password ? ' is-invalid' : '' }}" name="new_password" placeholder="Enter new password" required>
|
|
{% if errors.new_password %}
|
|
<small class="form-hint">{{ errors.new_password | first }}</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-transparent mt-auto">
|
|
<div class="btn-list justify-content-end">
|
|
<a href="{{route('home')}}" class="btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 11l-4 4l4 4m-4 -4h11a4 4 0 0 0 0 -8h-1"></path></svg> {{ __('Back') }}
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg> {{ __('Update') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="tabs-2fa">
|
|
<h4 class="card-title">Two-Factor Authentication (2FA)</h4>
|
|
<div class="card">
|
|
{% if secret is defined %}
|
|
<form action="{{route('activate2fa')}}" name="2fa" method="post">
|
|
{{ csrf.field | raw }}
|
|
<div class="card-body">
|
|
<p>Set up 2FA for additional security. Scan the QR code with your authentication app and enter the provided code below to verify.</p>
|
|
<!-- QR Code -->
|
|
<div class="mb-3">
|
|
<img src="{{ qrcodeDataUri }}" alt="2FA QR Code" class="img-fluid">
|
|
</div>
|
|
<!-- Secret for Manual Entry -->
|
|
<div class="mb-3">
|
|
<p class="font-weight-bold">Manual Entry Secret</p>
|
|
<code>{{ secret|split(4)|join(' ') }}</code>
|
|
<small class="form-text text-muted">
|
|
If you're unable to scan the QR code, enter this secret manually into your authentication app. The secret is case-sensitive and should be entered exactly as shown.
|
|
</small>
|
|
</div>
|
|
<!-- Verification Code Input -->
|
|
<div class="mb-3">
|
|
<label for="verificationCode" class="form-label required">Verification Code</label>
|
|
<input type="number" class="form-control" id="verificationCode" name="verificationCode" placeholder="Enter code" required="required">
|
|
<small class="form-text text-muted">
|
|
Enter the code generated by your authentication app. This code verifies that your 2FA setup is working correctly. Once entered, click 'Save 2FA Settings' to activate two-factor authentication for your account.
|
|
</small>
|
|
</div>
|
|
<!-- Save Button -->
|
|
<button type="submit" class="btn btn-primary">Save 2FA Settings</button>
|
|
</div>
|
|
</form>
|
|
{% else %}
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge bg-green text-green-fg me-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" /><path d="M12 11m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12l0 2.5" /></svg></span>
|
|
<div>
|
|
<h5 class="card-title mb-1">Your account is secured with an additional layer of protection.</h5>
|
|
<p class="text-muted mb-2">2FA is currently <strong>enabled</strong> for your account. If you encounter any issues or need to disable 2FA, please contact our support team for assistance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="tabs-webauthn">
|
|
<h4 class="card-title">WebAuthn Authentication</h4>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>Secure your account with WebAuthn. Click the button below to register your device for passwordless sign-in.</p>
|
|
<!-- Connect WebAuthn Button -->
|
|
<button type="button" class="btn btn-success" id="connectWebAuthnButton">Connect WebAuthn Device</button>
|
|
<!-- WebAuthn Devices Table -->
|
|
<div class="table-responsive mt-4">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Device/Browser Info</th>
|
|
<th>Registration Date</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for device in weba %}
|
|
<tr>
|
|
<td>{{ device.user_agent }}</td>
|
|
<td>{{ device.created_at }}</td>
|
|
<td>
|
|
<a href="/path/to/action?deviceId={{ device.id }}">Edit</a>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="3">No devices found.</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="footer footer-transparent d-print-none">
|
|
<div class="container-xl">
|
|
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
|
|
<ul class="list-inline list-inline-dots mb-0">
|
|
<li class="list-inline-item">
|
|
Copyright © 2023
|
|
<a href="https://getpinga.com" class="link-secondary">Pinga</a>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const connectButton = document.getElementById('connectWebAuthnButton');
|
|
|
|
connectButton.addEventListener('click', async function() {
|
|
try {
|
|
|
|
// check browser support
|
|
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
|
|
throw new Error('Browser not supported.');
|
|
}
|
|
|
|
// get create args
|
|
let rep = await window.fetch('/webauthn/register/challenge', {method:'GET', cache:'no-cache'});
|
|
const createArgs = await rep.json();
|
|
|
|
// error handling
|
|
if (createArgs.success === false) {
|
|
throw new Error(createArgs.msg || 'unknown error occured');
|
|
}
|
|
|
|
// replace binary base64 data with ArrayBuffer. a other way to do this
|
|
// is the reviver function of JSON.parse()
|
|
recursiveBase64StrToArrayBuffer(createArgs);
|
|
|
|
// create credentials
|
|
const cred = await navigator.credentials.create(createArgs);
|
|
|
|
// create object
|
|
const authenticatorAttestationResponse = {
|
|
transports: cred.response.getTransports ? cred.response.getTransports() : null,
|
|
clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
|
|
attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
|
|
};
|
|
|
|
// check auth on server side
|
|
rep = await window.fetch('/webauthn/register/verify', {
|
|
method : 'POST',
|
|
body : JSON.stringify(authenticatorAttestationResponse),
|
|
cache : 'no-cache'
|
|
});
|
|
const authenticatorAttestationServerResponse = await rep.json();
|
|
|
|
// prompt server response
|
|
if (authenticatorAttestationServerResponse.success) {
|
|
//location.reload();
|
|
window.alert(authenticatorAttestationServerResponse.msg || 'registration success');
|
|
} else {
|
|
throw new Error(authenticatorAttestationServerResponse.msg);
|
|
}
|
|
|
|
} catch (err) {
|
|
//location.reload();
|
|
window.alert(err.message || 'unknown error occured');
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* convert RFC 1342-like base64 strings to array buffer
|
|
* @param {mixed} obj
|
|
* @returns {undefined}
|
|
*/
|
|
function recursiveBase64StrToArrayBuffer(obj) {
|
|
let prefix = '=?BINARY?B?';
|
|
let suffix = '?=';
|
|
if (typeof obj === 'object') {
|
|
for (let key in obj) {
|
|
if (typeof obj[key] === 'string') {
|
|
let str = obj[key];
|
|
if (str.substring(0, prefix.length) === prefix && str.substring(str.length - suffix.length) === suffix) {
|
|
str = str.substring(prefix.length, str.length - suffix.length);
|
|
|
|
let binary_string = window.atob(str);
|
|
let len = binary_string.length;
|
|
let bytes = new Uint8Array(len);
|
|
for (let i = 0; i < len; i++) {
|
|
bytes[i] = binary_string.charCodeAt(i);
|
|
}
|
|
obj[key] = bytes.buffer;
|
|
}
|
|
} else {
|
|
recursiveBase64StrToArrayBuffer(obj[key]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Convert a ArrayBuffer to Base64
|
|
* @param {ArrayBuffer} buffer
|
|
* @returns {String}
|
|
*/
|
|
function arrayBufferToBase64(buffer) {
|
|
let binary = '';
|
|
let bytes = new Uint8Array(buffer);
|
|
let len = bytes.byteLength;
|
|
for (let i = 0; i < len; i++) {
|
|
binary += String.fromCharCode( bytes[ i ] );
|
|
}
|
|
return window.btoa(binary);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |