Skip to content

feat: improved design on auth page #227

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.

Sign up for GitHub

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
jsalaber merged 1 commit into from
Jul 19, 2023
Merged

feat: improved design on auth page #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
86 changes: 76 additions & 10 deletions src/api/ssoAuth.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import open from 'open'
import axios from 'axios'
import { Organization } from './organizations'
import Writer from '../ui/writer'
import { toggleBotSadSvg, toggleBotSvg } from '../ui/togglebot'

const CLI_CLIENT_ID = 'Ev9J0DGxR3KhrKaZwY6jlccmjl7JGKEX'

Expand Down Expand Up @@ -101,18 +102,16 @@ export default class SSOAuth {
const parsed = url.parse(requestUrl, true)
if (parsed.pathname === '/callback') {
if (parsed.query.error) {
res.write(this.resultHtml('Authorization error'))
res.write(this.resultHtml('Authorization Error', false))
res.end()
throw new Error(parsed.query.error.toString())
} else if (parsed.query.code) {
const code = parsed.query.code.toString()
this.retrieveAccessToken(code)
res.write(this.resultHtml('Authorization successful'))
res.write(this.resultHtml('Authorization Successful!', true))
res.end()
} else {
res.write(this.resultHtml('Unrecognized response'))
res.write(this.resultHtml('Unrecognized Response', false))
res.end()
throw new Error('Unrecognized response')
}
} else {
res.writeHead(404)
Expand Down Expand Up @@ -176,12 +175,79 @@ export default class SSOAuth {
return buffer.toString('base64url')
}

private resultHtml(resultMessage: string) {
private resultHtml(resultMessage: string, success: boolean) {
const fontUrl = 'https://fonts.google.com/share?selection.family=Inter:wght@400;800'
const backgroundUrl =
'https://uploads-ssl.webflow.com/614e240a0e0b0fa195b146ed/64b815f3a776eee98d5375a7_backgroundCLI.png'
return `
<html><body align='center'>
<p>${resultMessage}. You may close this browser window.</p>
<button type="button" onclick="javascript:window.close()">Close Window</button>
</body></html>
<html>
<head>
<link href='${fontUrl}' rel='stylesheet' type='text/css'>
<style>
#background {
background-image: url("${backgroundUrl}");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-family: 'Inter', sans-serif;
font-size: 40px;
font-weight: 800;
color: #FFFFFF;
}
p {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 400;
color: #FFFFFF;
}
.container {
height: fit-content;
padding-bottom: 2em;
}
button {
background-color: #1D4ED8;
color: white;
font-family: 'Inter', sans-serif;
width: 200px;
height: 38px;
border-radius: 6px;
border-style: none;
margin-top: 1em;
}
button:hover {
background-color:#335fdb;
transition: 0.2s;
}
</style>
</head>
<body align='center' id="background">
<script type="text/javascript">
var counter = 10;
var x = setInterval(function() {
counter--;
document.getElementById("timer").innerHTML =
"This page will automatically close in " + counter + " seconds.";
if (counter <= 0) {
clearInterval(x);
window.close();
}
}, 1000);
</script>
<div class="container">
${success ? toggleBotSvg : toggleBotSadSvg}
<h1>
${resultMessage}
</h1>
<p id="timer">You may now close this page.</p>
<button type="button" onclick="javascript:window.close()">Close Page</button>
</div>
</body>
</html>
`
}
}
26 changes: 25 additions & 1 deletion src/ui/togglebot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,28 @@ export const togglebotSleep = chalk.blue(`
"-.,_______________,.-"

\`-.___.-\`
`)
`)

export const toggleBotSvg = `
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="119" viewBox="0 0 109 119" fill="none">
<path d="M54.6087 119C47.5237 119 40.9838 114.983 37.8228 108.685C37.3868 107.925 37.8228 106.948 38.5858 106.513H38.6948L42.2918 105.102C43.0548 104.776 43.9268 105.102 44.2538 105.862C47.3057 111.617 54.4997 113.788 60.1677 110.639C62.2387 109.554 63.8736 107.816 64.9636 105.862C65.2906 105.102 66.1626 104.776 66.9256 105.102L70.5226 106.513C71.3946 106.839 71.7216 107.816 71.3946 108.576V108.685C68.2336 114.983 61.6937 119 54.6087 119ZM76.8446 31.5933H58.0967V21.1696C63.7646 19.2152 66.8166 13.0261 64.9636 7.38C63.0016 1.73385 56.7887 -1.30638 51.1207 0.539475C45.4527 2.38533 42.4008 8.68296 44.2538 14.3291C45.3437 17.4779 47.8507 20.0838 51.1207 21.1696V31.5933H32.3728C14.4969 31.7019 0 46.0344 0 63.8415C0 81.6486 14.4969 95.9811 32.2638 95.9811H76.7356C94.6115 95.9811 108.999 81.54 108.999 63.7329C109.108 46.0344 94.6115 31.7019 76.8446 31.5933ZM54.6087 7.05426C56.7887 7.05426 58.5327 8.79154 58.5327 10.9631C58.5327 13.1347 56.7887 14.872 54.6087 14.872C52.4287 14.872 50.6847 13.1347 50.6847 10.9631C50.6847 8.79154 52.4287 7.05426 54.6087 7.05426ZM76.8446 89.032H50.0307C41.7468 89.032 34.0078 84.906 29.3208 78.174C37.2778 80.0199 45.2347 75.0252 47.0877 66.9903C48.9407 59.064 43.9268 51.1376 35.8608 49.2918C27.9038 47.4459 19.9469 52.4406 18.0939 60.4755C17.8759 61.5613 17.7669 62.6471 17.7669 63.7329C17.7669 73.5051 22.2359 82.7344 29.8658 88.8148C15.9139 87.5119 5.77697 75.1338 7.19396 61.2356C8.50195 48.4231 19.4019 38.651 32.2638 38.5424H59.0777C67.3616 38.5424 75.1006 42.6684 79.7875 49.4004C78.6976 49.1832 77.6076 49.0746 76.5176 49.0746C68.3426 49.0746 61.6936 55.698 61.6936 63.8415C61.6936 71.985 68.3426 78.6083 76.5176 78.6083C84.6925 78.6083 91.3415 71.985 91.3415 63.8415C91.3415 54.0693 86.8725 44.84 79.2426 38.7595C93.1945 40.1711 103.331 52.5492 101.914 66.4474C100.606 79.2598 89.8155 89.032 76.8446 89.032ZM24.7429 63.8415C24.7429 59.4983 28.2308 56.0237 32.5908 56.0237C36.9508 56.0237 40.4388 59.4983 40.4388 63.8415C40.4388 68.1847 36.9508 71.6592 32.5908 71.6592C28.2308 71.6592 24.7429 68.1847 24.7429 63.8415ZM84.3655 63.8415C84.3655 68.1847 80.8775 71.6592 76.5176 71.6592C72.1576 71.6592 68.6696 68.1847 68.6696 63.8415C68.6696 59.4983 72.1576 56.0237 76.5176 56.0237C80.8775 56.0237 84.3655 59.4983 84.3655 63.8415Z" fill="url(#paint0_linear_11354_237180)"/>
<defs>
<linearGradient id="paint0_linear_11354_237180" x1="109" y1="14.4902" x2="-6.49691e-06" y2="14.4902" gradientUnits="userSpaceOnUse">
<stop stop-color="#0EA5E9"/>
<stop offset="1" stop-color="#1D4ED8"/>
</linearGradient>
</defs>
</svg>
`

export const toggleBotSadSvg = `
<svg width="109" height="119" viewBox="0 0 109 119" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.6087 104.976C47.5237 104.976 40.9838 108.993 37.8228 115.291C37.3868 116.051 37.8228 117.028 38.5858 117.463H38.6948L42.2918 118.874C43.0548 119.2 43.9268 118.874 44.2538 118.114C47.3057 112.359 54.4997 110.188 60.1677 113.337C62.2387 114.422 63.8736 116.16 64.9636 118.114C65.2906 118.874 66.1626 119.2 66.9256 118.874L70.5226 117.463C71.3946 117.137 71.7216 116.16 71.3946 115.4V115.291C68.2336 108.993 61.6937 104.976 54.6087 104.976ZM76.8446 31.5933H58.0967V21.1696C63.7646 19.2152 66.8166 13.0261 64.9636 7.38C63.0016 1.73385 56.7887 -1.30638 51.1207 0.539475C45.4528 2.38533 42.4008 8.68296 44.2538 14.3291C45.3437 17.4779 47.8507 20.0838 51.1207 21.1696V31.5933H32.3728C14.4969 31.7019 0 46.0344 0 63.8415C0 81.6486 14.4969 95.9811 32.2638 95.9811H76.7356C94.6115 95.9811 108.999 81.54 108.999 63.7329C109.108 46.0344 94.6115 31.7019 76.8446 31.5933ZM54.6087 7.05426C56.7887 7.05426 58.5327 8.79154 58.5327 10.9631C58.5327 13.1347 56.7887 14.872 54.6087 14.872C52.4287 14.872 50.6847 13.1347 50.6847 10.9631C50.6847 8.79154 52.4287 7.05426 54.6087 7.05426ZM76.8446 89.032H50.0307C41.7468 89.032 34.0078 84.906 29.3208 78.174C37.2778 80.0199 45.2347 75.0252 47.0877 66.9903C48.9407 59.064 43.9268 51.1376 35.8608 49.2918C27.9038 47.4459 19.9469 52.4406 18.0939 60.4755C17.8759 61.5613 17.7669 62.6471 17.7669 63.7329C17.7669 73.5051 22.2359 82.7344 29.8658 88.8148C15.9139 87.5119 5.77697 75.1338 7.19396 61.2356C8.50195 48.4232 19.4019 38.651 32.2638 38.5424H59.0777C67.3616 38.5424 75.1006 42.6684 79.7876 49.4004C78.6976 49.1832 77.6076 49.0746 76.5176 49.0746C68.3426 49.0746 61.6937 55.698 61.6937 63.8415C61.6937 71.985 68.3426 78.6083 76.5176 78.6083C84.6925 78.6083 91.3415 71.985 91.3415 63.8415C91.3415 54.0693 86.8725 44.84 79.2426 38.7596C93.1945 40.1711 103.331 52.5492 101.914 66.4474C100.606 79.2598 89.8155 89.032 76.8446 89.032ZM24.7429 63.8415C24.7429 59.4983 28.2308 56.0237 32.5908 56.0237C36.9508 56.0237 40.4388 59.4983 40.4388 63.8415C40.4388 68.1847 36.9508 71.6592 32.5908 71.6592C28.2308 71.6592 24.7429 68.1847 24.7429 63.8415ZM84.3655 63.8415C84.3655 68.1847 80.8775 71.6592 76.5176 71.6592C72.1576 71.6592 68.6696 68.1847 68.6696 63.8415C68.6696 59.4983 72.1576 56.0237 76.5176 56.0237C80.8775 56.0237 84.3655 59.4983 84.3655 63.8415Z" fill="url(#paint0_linear_11358_237081)"/>
<defs>
<linearGradient id="paint0_linear_11358_237081" x1="-32.2484" y1="94.2351" x2="28.531" y2="0.883711" gradientUnits="userSpaceOnUse">
<stop stop-color="#E11D48"/>
<stop offset="1" stop-color="#FBBF24"/>
</linearGradient>
</defs>
</svg>
`