mirror of
				https://github.com/h44z/wg-portal.git
				synced 2025-11-03 23:56:18 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			135 lines
		
	
	
		
			8.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			135 lines
		
	
	
		
			8.5 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
<head>
 | 
						|
    <meta charset="utf-8">
 | 
						|
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
 | 
						|
    <title>{{ .Static.WebsiteTitle }} - Profile</title>
 | 
						|
    <meta name="description" content="{{ .Static.WebsiteTitle }}">
 | 
						|
    <link rel="stylesheet" href="/css/bootstrap.min.css">
 | 
						|
    <link rel="stylesheet" href="/fonts/fontawesome-all.min.css">
 | 
						|
    <link rel="stylesheet" href="/css/custom.css">
 | 
						|
</head>
 | 
						|
 | 
						|
<body id="page-top" class="d-flex flex-column min-vh-100">
 | 
						|
    {{template "prt_nav.html" .}}
 | 
						|
    <div class="container mt-5">
 | 
						|
        <h1>WireGuard VPN User-Portal</h1>
 | 
						|
 | 
						|
        <div class="mt-4 row">
 | 
						|
            <div class="col-sm-8 col-12">        
 | 
						|
                <h2 class="mt-2">Your VPN Profiles</h2>
 | 
						|
            </div>
 | 
						|
            <div class="col-sm-4 col-12 text-right">
 | 
						|
                {{if eq $.UserManagePeers true}}
 | 
						|
                <a href="/user/peer/create" title="Add a peer" class="btn btn-primary"><i class="fa fa-fw fa-plus"></i><i class="fa fa-fw fa-user"></i></a>
 | 
						|
                {{end}}
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
        <div class="mt-2 table-responsive">
 | 
						|
            <table class="table table-sm" id="userTable">
 | 
						|
                <thead>
 | 
						|
                <tr>
 | 
						|
                    <th scope="col" class="list-image-cell"></th><!-- Status and expand -->
 | 
						|
                    <th scope="col"><a href="?sort=id">Identifier <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "id"}}"></i></a></th>
 | 
						|
                    <th scope="col"><a href="?sort=pubKey">Public Key <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "pubKey"}}"></i></a></th>
 | 
						|
                    <th scope="col"><a href="?sort=mail">E-Mail <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "mail"}}"></i></a></th>
 | 
						|
                    <th scope="col"><a href="?sort=ip">IP's <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "ip"}}"></i></a></th>
 | 
						|
                    <th scope="col"><a href="?sort=handshake">Handshake <i class="fa fa-fw {{.Session.GetSortIcon "userpeers" "handshake"}}"></i></a></th>
 | 
						|
                    {{if eq $.UserManagePeers true}}
 | 
						|
                    <th scope="col"></th>
 | 
						|
                    {{end}}
 | 
						|
                </tr>
 | 
						|
                </thead>
 | 
						|
                <tbody>
 | 
						|
                {{range $i, $p :=.Peers}}
 | 
						|
                    {{$peerUser:=(userForEmail $.Users $p.Email)}}
 | 
						|
                    <tr id="user-pos-{{$i}}" {{if $p.DeactivatedAt}}class="disabled-peer"{{end}}>
 | 
						|
                        <th scope="row" class="list-image-cell">
 | 
						|
                            <a href="#{{$p.UID}}" data-toggle="collapse" class="collapse-indicator collapsed"></a>
 | 
						|
                            <!-- online check -->
 | 
						|
                            <span class="online-status" id="online-{{$p.UID}}" data-pkey="{{$p.PublicKey}}"><i class="fas fa-unlink"></i></span>
 | 
						|
                        </th>
 | 
						|
                        <td>{{$p.Identifier}}{{if $p.WillExpire}} <i class="fas fa-hourglass-end expiring-peer" data-toggle="tooltip" data-placement="right" title="" data-original-title="Expires at: {{formatDate $p.ExpiresAt}}"></i>{{end}}</td>
 | 
						|
                        <td>{{$p.PublicKey}}</td>
 | 
						|
                        <td>{{$p.Email}}</td>
 | 
						|
                        <td>{{$p.IPsStr}}</td>
 | 
						|
                        <td><span data-toggle="tooltip" data-placement="left" title="" data-original-title="{{$p.LastHandshakeTime}}">{{$p.LastHandshake}}</span></td>
 | 
						|
                        {{if eq $.UserManagePeers true}}
 | 
						|
                        <td>
 | 
						|
                            <a href="/user/peer/edit?pkey={{$p.PublicKey}}" title="Edit peer"><i class="fas fa-cog"></i></a>
 | 
						|
                        </td>
 | 
						|
                        {{end}}
 | 
						|
                    </tr>
 | 
						|
                    <tr class="hiddenRow">
 | 
						|
                        <td colspan="6" class="hiddenCell" style="white-space:nowrap">
 | 
						|
                            <div class="collapse" id="{{$p.UID}}" data-parent="#userTable">
 | 
						|
                                <div class="row collapsedRow">
 | 
						|
                                    <div class="col-md-6 leftBorder">
 | 
						|
                                        <ul class="nav nav-tabs">
 | 
						|
                                            <li class="nav-item">
 | 
						|
                                                <a class="nav-link active" data-toggle="tab" href="#t1{{$p.UID}}">Personal</a>
 | 
						|
                                            </li>
 | 
						|
                                            <li class="nav-item">
 | 
						|
                                                <a class="nav-link" data-toggle="tab" href="#t2{{$p.UID}}">Configuration</a>
 | 
						|
                                            </li>
 | 
						|
                                        </ul>
 | 
						|
                                        <div class="tab-content" id="tabContent{{$p.UID}}">
 | 
						|
                                            <div id="t1{{$p.UID}}" class="tab-pane fade active show">
 | 
						|
                                                <h4>User details</h4>
 | 
						|
                                                {{if not $peerUser}}
 | 
						|
                                                    <p>No user information available...</p>
 | 
						|
                                                {{else}}
 | 
						|
                                                    <ul>
 | 
						|
                                                        <li>Firstname: {{$peerUser.Firstname}}</li>
 | 
						|
                                                        <li>Lastname: {{$peerUser.Lastname}}</li>
 | 
						|
                                                        <li>Phone: {{$peerUser.Phone}}</li>
 | 
						|
                                                        <li>Mail: {{$peerUser.Email}}</li>
 | 
						|
                                                    </ul>
 | 
						|
                                                {{end}}
 | 
						|
                                                <h4>Traffic</h4>
 | 
						|
                                                {{if not $p.Peer}}
 | 
						|
                                                    <p>No Traffic data available...</p>
 | 
						|
                                                {{else}}
 | 
						|
                                                    <p>{{if $p.DeactivatedAt}}-{{else}}<i class="fas fa-long-arrow-alt-down"></i></i> {{formatBytes $p.Peer.ReceiveBytes}} / <i class="fas fa-long-arrow-alt-up"></i> {{formatBytes $p.Peer.TransmitBytes}}{{end}}</p>
 | 
						|
                                                {{end}}
 | 
						|
                                            </div>
 | 
						|
                                            <div id="t2{{$p.UID}}" class="tab-pane fade">
 | 
						|
                                                <pre>{{$p.Config}}</pre>
 | 
						|
                                            </div>
 | 
						|
                                        </div>
 | 
						|
                                    </div>
 | 
						|
                                    <div class="col-md-3">
 | 
						|
                                        <img class="list-image-large" src="/user/qrcode?pkey={{$p.PublicKey}}"/>
 | 
						|
                                    </div>
 | 
						|
                                    <div class="col-md-3">
 | 
						|
                                        {{if $p.DeactivatedAt}}
 | 
						|
                                        <div class="pull-right-lg mt-lg-5 disabled-peer">Peer is disabled! <i class="fas fa-comment-dots" data-toggle="tooltip" data-placement="left" title="" data-original-title="Reason: {{$p.DeactivatedReason}}"></i></div>
 | 
						|
                                        {{end}}
 | 
						|
                                        {{if $p.WillExpire}}
 | 
						|
                                        <div class="pull-right-lg mt-lg-5 expiring-peer"><i class="fas fa-exclamation-triangle"></i> Profile expires on {{ formatDate $p.ExpiresAt}}</div>
 | 
						|
                                        {{end}}
 | 
						|
                                        <div class="pull-right-lg mt-lg-5 mt-md-3">
 | 
						|
                                        <a href="/user/download?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Download configuration">Download</a>
 | 
						|
                                        <a href="/user/email?pkey={{$p.PublicKey}}" class="btn btn-primary" title="Send configuration via Email">Email</a>
 | 
						|
                                        </div>
 | 
						|
                                    </div>
 | 
						|
                                </div>
 | 
						|
                            </div>
 | 
						|
                        </td>
 | 
						|
                    </tr>
 | 
						|
                {{end}}
 | 
						|
                </tbody>
 | 
						|
            </table>
 | 
						|
            <p>Currently listed peers: <strong>{{len .Peers}}</strong></p>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
    {{template "prt_footer.html" .}}
 | 
						|
    <script src="/js/jquery.min.js"></script>
 | 
						|
    <script src="/js/jquery.easing.js"></script>
 | 
						|
    <script src="/js/popper.min.js"></script>
 | 
						|
    <script src="/js/bootstrap.bundle.min.js"></script>
 | 
						|
    <script src="/js/bootstrap-confirmation.min.js"></script>
 | 
						|
    <script src="/js/custom.js"></script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html> |