Get logged-In User details using Lightning Web Component

Get logged-In User details using Lightning Web Component

.xml file

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>56.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__AppPage">

            <supportedFormFactors>

                <supportedFormFactor type="Large" />

                <supportedFormFactor type="Small" />

            </supportedFormFactors>

        </targetConfig>

        <targetConfig targets="lightning__RecordPage">

            <supportedFormFactors>

                <supportedFormFactor type="Large" />

                <supportedFormFactor type="Small" />

            </supportedFormFactors>

        </targetConfig>

        <targetConfig targets="lightning__HomePage">

            <supportedFormFactors>

                <supportedFormFactor type="Large" />

            </supportedFormFactors>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

.html file
<template>
    <lightning-card title="Current User Details" icon-name="standard:user">
        <div class="">
            <table>
                <tr>
                    <th>Id</th>
                    <td>{userId}</td>
                </tr>
                <tr>
                    <th>Name</th>
                    <td>{userName}</td>
                </tr>
                <tr>
                    <th>Role</th>
                    <td>{userRoleName}</td>
                </tr>
                <tr>
                    <th>Profile</th>
                    <td>{userProfileName}</td>
                </tr>
                <tr>
                    <th>Manager</th>
                    <td>{userManagerName}</td>
                </tr>
            </table>
        </div>
    </lightning-card>
</template>

.js file
import { LightningElement, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import Name from '@salesforce/schema/User.Name';
import RoleName from '@salesforce/schema/User.UserRole.Name';
import ProfileName from '@salesforce/schema/User.Profile.Name';
import ManagerName from '@salesforce/schema/User.Manager.Name';
export default class GetUserDetails extends LightningElement {
   userId = Id;
   userName;
   userRoleName;
   userProfileName;
   userManagerName;
    @wire(getRecord, { recordId: Id, fields: [Name, RoleName, ProfileName, ManagerName] })
    userDetails({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            if (data.fields.Name.value != null) {
                this.userName = data.fields.Name.value;
            }
            if (data.fields.UserRole.value != null) {
                this.userRoleName = data.fields.UserRole.value.fields.Name.value;
            }
            if (data.fields.Profile.value != null) {
                this.userProfileName = data.fields.Profile.value.fields.Name.value;
            }
            if (data.fields.Manager.value != null) {
                this.userManagerName = data.fields.Manager.value.fields.Name.value;
            }
        }
    }
}