Skip to content

License Page New UI #1535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 19, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 42 additions & 143 deletions app/components/license-detail/index.hbs
Original file line number Diff line number Diff line change
@@ -1,143 +1,42 @@
<div class='my-1 p-1'>
<AkTypography @variant='h4'>
{{t 'license'}}
</AkTypography>

<table class='my-2' local-class='license-detail-table'>
<thead>
<tr>
<th
colspan='3'
local-class='{{if @license.isActive "success" "critical"}}'
>
<AkStack @justifyContent='space-between'>
<AkStack @alignItems='center'>
<AkTypography @fontWeight='bold'>
{{#if @license.isLimitedScans}}
{{@license.perScanName}}
{{else}}
{{@license.perAppName}}
{{/if}}
</AkTypography>
</AkStack>

<AkStack @alignItems='center' @spacing='2'>
{{#if @license.isActive}}
<AkIcon @iconName='done' @color='success' @size='small' />
{{else}}
<AkIcon @iconName='close' @color='error' @size='small' />
{{/if}}

<span>
{{@license.status}}
</span>
</AkStack>
</AkStack>
</th>
</tr>
</thead>

<tbody>
<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='shape-line' @size='small' />

<AkTypography>{{t 'features'}}</AkTypography>
</AkStack>
</td>

<td>
{{#if @license.isLimitedScans}}
<AkTypography @color='textSecondary' local-class='uppercase-text'>
No. of Scans
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.perScanQuantity}}
</AkTypography>
{{else}}
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'noOfApps'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.perAppQuantity}}
</AkTypography>
{{/if}}
</td>

<td>
<em>
{{#if @license.isLimitedScans}}
{{@license.perScanDescription}}
{{else}}
{{@license.perAppDescription}}
{{/if}}
</em>
</td>
</tr>

<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='calendar-month' @size='small' />

<AkTypography>{{t 'validity'}}</AkTypography>
</AkStack>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'startDate'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{this.startDate}}
</AkTypography>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'expiryDate'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{this.expiryDate}}
</AkTypography>
</td>
</tr>

<tr>
<td>
<AkStack @alignItems='center' @spacing='2'>
<AkIcon @iconName='person' @size='small' />

<AkTypography>{{t 'registration'}}</AkTypography>
</AkStack>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'licenseKey'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.key}}
</AkTypography>
</td>

<td>
<AkTypography @color='textSecondary' local-class='uppercase-text'>
{{t 'licensedTo'}}
</AkTypography>

<AkTypography @fontWeight='medium'>
{{@license.name}}
&lt;{{@license.email}}&gt;
</AkTypography>
</td>
</tr>
</tbody>
</table>
</div>
<AkStack @justifyContent='space-between' local-class='license-detail-header'>
<AkTypography @variant='h5'>{{t 'license'}}</AkTypography>

<AkStack @alignItems='center' @spacing='1.5'>
<AkTypography @variant='h6'>
{{#if @license.isLimitedScans}}
{{@license.perScanName}}
{{else}}
{{@license.perAppName}}
{{/if}}
</AkTypography>

<AkChip
@variant='semi-filled'
@label={{@license.status}}
@color={{if @license.isActive 'success' 'error'}}
@size='small'
/>
</AkStack>
</AkStack>

{{#each this.licenseSections as |section|}}
<AkStack @direction='column' @spacing='1' local-class='license-detail-body'>
<AkIcon @iconName={{section.icon}} @size='small' />

<AkTypography @variant='subtitle1' @gutterBottom={{true}}>
{{section.title}}
</AkTypography>

{{#each section.details as |detail|}}
<AkStack @width='full'>
<AkTypography @color='textSecondary' local-class='key-width'>
{{detail.label}}
</AkTypography>

<AkTypography @variant='h6'>{{detail.value}}</AkTypography>
</AkStack>
{{/each}}
</AkStack>

<AkDivider />
{{/each}}
49 changes: 12 additions & 37 deletions app/components/license-detail/index.scss
Original file line number Diff line number Diff line change
@@ -1,40 +1,15 @@
.license-detail-table {
tr {
border: 1px solid var(--license-detail-border-color);
}

td {
font-size: 12px;
}

th {
padding: 1em;
margin-top: 1em;

&.success {
border-color: var(--license-detail-success-light);
background: var(--license-detail-success-light);
}

&.critical {
border-color: var(--license-detail-primary-light);
background: var(--license-detail-primary-light);
}
}

th,
td {
border-width: 0px;
vertical-align: middle;
.license-detail-header {
border: 1px solid var(--license-detail-border-color);
background-color: var(--license-detail-background-color);
padding: 1.142em 1.714em;
margin: 1.428em 0;
}

&:first-child {
text-align: left;
padding-left: 1em;
}
}
.license-detail-body {
background-color: var(--license-detail-background-color);
padding: 1.142em 1.714em;
}

.uppercase-text {
text-transform: uppercase;
font-size: 0.83rem;
}
.key-width {
width: 15%;
}
73 changes: 70 additions & 3 deletions app/components/license-detail/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import Component from '@glimmer/component';
import dayjs from 'dayjs';
import LicenseModel from 'irene/models/license';
import { service } from '@ember/service';

import type LicenseModel from 'irene/models/license';
import type IntlService from 'ember-intl/services/intl';

export interface LicenseDetailSignature {
Args: {
Expand All @@ -9,12 +12,76 @@ export interface LicenseDetailSignature {
}

export default class LicenseDetailComponent extends Component<LicenseDetailSignature> {
@service declare intl: IntlService;

get license() {
return this.args.license;
}

get startDate() {
return dayjs(this.args.license.startDate).format('DD MMM YYYY');
return dayjs(this.license?.startDate).format('DD MMM YYYY');
}

get expiryDate() {
return dayjs(this.args.license.expiryDate).format('DD MMM YYYY');
return dayjs(this.license?.expiryDate).format('DD MMM YYYY');
}

get featuresDetails() {
if (this.license?.isLimitedScans) {
return [
{
label: this.intl.t('noOfScans'),
value: this.license?.perScanQuantity,
},
{
label: this.intl.t('planType'),
value: this.license?.perScanDescription,
},
];
}

return [
{
label: this.intl.t('noOfApps'),
value: this.license?.perAppQuantity,
},
{
label: this.intl.t('planType'),
value: this.license?.perAppDescription,
},
];
}

get licenseSections() {
return [
{
icon: 'shape-line',
title: this.intl.t('feature'),
details: this.featuresDetails,
},
{
icon: 'calendar-month',
title: this.intl.t('validity'),
details: [
{ label: this.intl.t('startDate'), value: this.startDate },
{ label: this.intl.t('expiryDate'), value: this.expiryDate },
],
},
{
icon: 'person',
title: this.intl.t('registration'),
details: [
{
label: this.intl.t('licenseKey'),
value: this.license?.key,
},
{
label: this.intl.t('licensedTo'),
value: `${this.license?.name} <${this.license?.email}>`,
},
],
},
];
}
}

Expand Down
3 changes: 1 addition & 2 deletions app/styles/_component-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1998,8 +1998,7 @@ body {

// variables for license-detail
--license-detail-border-color: var(--border-color-1);
--license-detail-success-light: var(--success-light);
--license-detail-primary-light: var(--primary-main-10);
--license-detail-background-color: var(--background-main);

// variables for file-details/dynamic-scan/header
--file-details-dynamic-scan-header-background-color: var(--background-light);
Expand Down
10 changes: 5 additions & 5 deletions app/templates/authenticated/dashboard/billing.hbs
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{page-title 'Billing'}}

{{#if @model.organization.showBilling}}
{{#if @model.license}}
{{#if (and @model.organization.showBilling @model.license)}}
<PageWrapper>
<LicenseDetail @license={{@model.license}} />
{{else}}
<OrganizationBilling />
{{/if}}
</PageWrapper>
{{else}}
<OrganizationBilling />
{{/if}}
3 changes: 3 additions & 0 deletions translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,7 @@
"failedToUpdateDsAutomatedDevicePref": "Failed to update automated DAST device preferences.",
"failedToUpdateDsManualDevicePref": "Failed to update manual DAST device preferences.",
"falsePositive": "Is this a false positive? you can override this analysis here",
"feature": "Feature",
"features": "Features",
"fetchGitHubRepoFailed": "Something went wrong when trying to fetch repo list",
"fetchProjectFailed": "Something went wrong when trying to fetch projects list",
Expand Down Expand Up @@ -936,6 +937,7 @@
"noNamespaceDescription": "Once the app is added to appknox dashboard you will be seeing the respected data over here",
"noOfApps": "No. of Apps",
"noOfProjects": "No of projects",
"noOfScans": "No of Scans",
"noPendingRequests": "No pending requests",
"noPersonalToken": "no tokens found",
"noPreference": "No Preference",
Expand Down Expand Up @@ -1139,6 +1141,7 @@
"pinLock": "Pin Lock",
"planName": "PLAN NAME",
"plans": "Plans",
"planType": "Plan Type",
"platform": "Platform",
"googlePlayStore": "Google Play Store",
"pleaseEnterAllDetails": "Please enter all the details",
Expand Down
Loading