Implement user's public page

eugenesimakin commented 9 months ago

The page contains:

First and last names
Public email
Links

Washubrnfg85 commented 8 months ago

Hey, man)) Back to buisiness!!! Wonder what do you meen by that "user's public page"? It should be absolut new html template that I should do by myself? Nice))) Going for it!

eugenesimakin commented 8 months ago

Hi, yes. A user's public page is a new page.

Here is an example of the page: https://link-sharing-app-f3f11.web.app/3eeadd32-9

Regarding PR #16 Here is a code example:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Links</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        @media (min-width: 768px) {
            .container {
                width: 600px;
            }
        }

        .container {
            margin-top: 1rem;
        }

        .profile-picture {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            display: block;
            margin: 0 auto 2rem;
        }

        .profile-fullname {
            text-align: center;
            margin-bottom: 1rem;
        }

        .public-email {
            text-align: center;
            margin-bottom: 3rem;
        }

        .links {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
    </style>
</head>
<body>
<div class="container">
    <div th:if="${notFound != null}" class="alert alert-warning" role="alert">
        <h4 class="alert-heading">404</h4>
        <p>
            Look like there is no data associated with this user.
            Please, contact the person who shared this with you.
        </p>
    </div>
    <img class="profile-picture" th:src="@{'/pics/' + ${details.imageUrl}}" alt="Profile picture">
    <h1 class="profile-fullname" th:text="${details.firstName + ' ' + details.lastName}"></h1>
    <p class="public-email" th:text="${details.publicEmail}"></p>
    <div class="links">
        <th:block th:each="link : ${details.links}">
            <a class="btn btn-outline-dark btn-lg" th:href="${link.url}" th:text="${link.title}"></a>
        </th:block>
    </div>
</div>

</body>
</html>

eugenesimakin / link-sharing-app

Implement user's public page #15