> For the complete documentation index, see [llms.txt](https://docs.a11n.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.a11n.io/tutorial/implementation/frontend/stories.md).

# Stories

Let's navigate to the 'stories' folder.

In the 'Story.js' file, add a new tab for Story permissions on line 15 like this:

<pre class="language-jsx"><code class="lang-jsx">&#x3C;Tabs defaultActiveKey="details">
<strong>    &#x3C;Tab eventKey="details" title="Details">&#x3C;Dashboard story={story} setSelectedStory={setSelectedStory} setStories={setStories}/>&#x3C;/Tab>
</strong>    &#x3C;Tab eventKey="permissions" title="Permissions">&#x3C;StoryPermissions story={story}/>&#x3C;/Tab>
&#x3C;/Tabs>
</code></pre>

In the Dashboard component, add new state variables and make use of the useAccess hook to see which permissions the user has for changing story elements:

```jsx
.
.
.
const [estimateAccess, setEstimateAccess] = useState(false)
const [statusAccess, setStatusAccess] = useState(false)
const [assigneeAccess, setAssigneeAccess] = useState(false)
const {story, setSelectedStory, setStories} = props

useAccess(story.id, "EstimateStory", setEstimateAccess)
useAccess(story.id, "ChangeStoryStatus", setStatusAccess)
useAccess(story.id, "ChangeStoryAssignee", setAssigneeAccess)
.
.
.
```

Now, disable form controls if the user doesn't have the required permissions:

```jsx
.
.
.
<Form.Group className="mb-3">
    <Form.Label>Estimate</Form.Label>
    <Form.Control disabled={!estimateAccess} type="number" value={estimate} onChange={handleEstimateChange} onBlur={handleEstimateBlur}/>
</Form.Group>
<Form.Group className="mb-3">
    <Form.Label>Status</Form.Label>
    <Form.Select disabled={!statusAccess} value={status} onChange={handleStatusChange}>
        <option value="todo">todo</option>
        <option value="busy">busy</option>
        <option value="done">done</option>
    </Form.Select>
</Form.Group>
<Form.Group className="mb-3">
    <Form.Label>Assignee</Form.Label>
    <Form.Select disabled={!assigneeAccess} value={assignee} onChange={handleAssigneeChange}>
    .
    .
    .
```

And add the StoryPermissions component to the same file:

```jsx
function StoryPermissions(props) {
    const {story} = props

    return <>
        <AccessGuard resourceId={story.id} action="ReadStoryPermissions">
            <Permissions resourceId={story.id} changeAction="ChangeStoryPermissions"/>
        </AccessGuard>
    </>
}
```

In the 'Stories.js' file, wrap the CreateStory button on line 70 in an AccessGuard like this:

```jsx
selectedStory
? <Story story={selectedStory} setSelectedStory={setSelectedStory} setStories={setStories}/>
: <AccessGuard resourceId={sprintCtx.sprint.id} action="CreateStory">
        <CreateStory setStories={setStories}/>
  </AccessGuard>
```

And disable the StoryButton element if the user doesn't have 'ReadStory' permission on the story:

<pre class="language-jsx"><code class="lang-jsx">function StoryButton(props) {
<strong>    const [readAccess, setReadAccess] = useState(false)
</strong>    useAccess(props.story.id, "ReadStory", setReadAccess)

    return &#x3C;>
        &#x3C;ListGroupItem
            disabled={!readAccess}
            .
            .
            .
</code></pre>

That's it! You now have a fully permissioned app, congratulations!